비밀번호가있는 DIV 요소 숨기기

Question

DIV 요소가 오른쪽과 왼쪽의 두 테이블로 분리되어 있습니다. 왼쪽 테이블은 그대로이지만 사용자가 암호 또는 구를 입력 할 때까지 올바른 테이블을 숨겨서 테이블을 열거 나 잠금 해제해야합니다.

이것은 보안 문제가 아니지만 전문성 중 하나입니다. 해당 섹션에 직접 액세스 할 수 없도록 요청했지만 공통 비밀번호 (등록 필요 없음)를 추가하십시오.

나는 클라이언트 측 JS가 보안에 약하지만이 경우 보안에는 문제가 없다는 것을 안다. 내 최고의/가장 효율적인 옵션은 무엇입니까? Lightbox 솔루션을 사용해 보았지만 올바른 구문을 입력하면 DIV를 표시하는 방법을 알 수 없습니다. 여기

Answer 1

내가 무슨 짓을 :

http://jsfiddle.net/rp40rkpo/3/

#HIDDENDIV { 
 
    display: none; 
 
} 
 

 
#table td { 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
} 
 

 

 
#table.show tr > *:nth-child(2) { 
 
    display: block; 
 
}

<div id="passw"> 
 
      <div> 
 
       (THE PASSWORD IS PASSWORD) <br /> 
 
       Enter the password to proceed: 
 
      </div> 
 
      <div> 
 
      
 
       <input type="password" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" /> <!-- IMPORTANT! this part is so if you click enter, it works. --> 
 
       </div> 
 
      
 

 
      <div> 
 
       <br/> 
 
       <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
 
document.getElementById('table').classList.toggle('show'); document.getElementById('passw').style.display='none'; } 
 
else { alert('Invalid Password!'); password.setSelectionRange(0, password.value.length); } " /> 
 
      </div> 
 
<!-- it will autoselect wrong input if wrong --> 
 
    <br /><br /><br /> 
 
     </div> 
 

 
<table id="table"> 
 
    <tr> 
 
     <td>stuff</td> 
 
     <td id="HIDDENDIV" >hidden stuff</td> 
 
    </tr> 
 
</table>

경고 :이 보안 상 안전하지 않을 수 있습니다. 웹 관리자를 운영하는 방법을 아는 사람은 누구나 숨겨진 div를 볼 수 있습니다.

암호를 잘못 입력하면 "잘못된 암호"가 표시되고 선택하지 않고 다시 시도 할 수 있도록 암호가 선택됩니다. 그것.

또한 비밀번호 찾기 상자가 숨겨지면 숨길 수 있습니다.

희망 하시겠습니까?