본문 바로가기
UX 개발/JS

HTML 페이지(정적 웹사이트) 비밀번호로 접근권한 제어하기

반응형
  • 문서정보 (최종 업데이트: 2022-10-13)
    • v1.0 2022-10-13: 최초 작성

일반정보

  • 클라이언트 단에서 사이트에 비밀번호 제어를 위해서는 별도 자바스크립트 구현체를 통한 기능 구현 가능. 하지만 별도 고도화를 병행하지 않는다면 페이지의 접근만을 제어할 뿐 콘텐츠 암호화가 불가능하며, 접근 경로(URL)만 알면 접근이 가능하다는 점 등 제약사항이 많음
  • 보통 서버 단에서 처리하는 것이 일반적임
  • 서버리스 환경이라면 Cloudflare 등의 서버 제어 기능을 활용하거나, Netlify와 같은 정적웹사이트 호스팅 서비스 자체 제공 보안 기능 활용

정적 웹사이트 비밀번호 제어 방법 모음

Gitlab Pages Access Control

Netlify Password Protection

(Project) Password protection for static pages

- index.html          <-- 비밀번호 입력 기능 구현용 HTML               
- background.jpg
- this-is-a-hash      <-- 비밀번호의 SHA1 해시코드가 디렉토리가 됨               
  \ - index.html      <-- 콘텐츠를 담고 있는 index.html

 

<div id="loginbox" class="lightbox" >
        <div class="horizontal">
            <div class="vertical">
                <div class="box">
                    <input style="margin: 16px; text-align: center;" id="password" type="password" placeholder="password" /> <br />
                    <button id="loginbutton" type="button">Enter</button>
                    <p id="wrongPassword" style="display: none">wrong password</p>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://rawcdn.githack.com/chrisveness/crypto/7067ee62f18c76dd4a9d372a00e647205460b62b/sha1.js"></script>
    <script type="text/javascript">
    "use strict";

    function loadPage(pwd) {

        var hash= pwd;
        hash= Sha1.hash(pwd);
        var url= hash + "/index.html";

        $.ajax({
            url : url,
            dataType : "html",
            success : function(data) {

                window.location= url;

            },
            error : function(xhr, ajaxOptions, thrownError) {

                parent.location.hash= hash;

                //$("#wrongPassword").show();
                $("#password").attr("placeholder","wrong password");
                $("#password").val("");
            }
        });
    }

    $("#loginbutton").on("click", function() {
        loadPage($("#password").val());
    });
    $("#password").keypress(function(e) {
        if (e.which == 13) {

            loadPage($("#password").val());
        }
    });
    $("#password").focus();

    </script>

추가정보

관련 글

반응형