HTML 코드 숨김

대부분의 사용자에게 웹 페이지 의사 클래스는 깊이 파고들지 않으며 기본 프레임워크, 즉 HTML 구조, CSS 파일 및 JavaScript 코드를 검토하는 방법만 알고 있습니다. 일부 간단한 웹페이지에서는 HTML 파일에 CSS 스타일을 직접 작성하거나 JavaScript 코드를 직접 작성할 수 있습니다. 그러나 많은 경우에는 코드의 보안을 보장하기 위해 코드를 숨겨야 합니다.

HTML 코드 숨기기는 사용자의 시야에 직접 나타나지 않도록 HTML 구조에 내용을 숨기는 것을 말합니다. 이 기술은 온라인 결제, 계정 확인 등과 같이 기밀을 유지하고 보호하고 숨겨야 하는 일부 웹사이트에서 자주 사용됩니다. 그렇다면 HTML 코드를 숨기는 방법은 무엇입니까?

1. CSS를 사용하여 HTML 코드 숨기기

CSS에는 HTML 코드를 숨길 수 있는 매우 유용한 표시 속성이 있습니다. 이 속성을 사용할 때 표시:없음, 표시 여부:숨김, 불투명도:0, 위치:절대 + 왼쪽:-9999px(왼쪽 이동 9999픽셀) 등을 사용하여 HTML 코드를 숨길 수 있습니다.

1. display:none

display:none은 HTML을 숨기는 데 가장 일반적으로 사용되는 방법이므로 HTML 코드를 사용자에게 숨길 수 있습니다. 요소를 숨기려면 요소의 표시 속성 값을 없음으로 설정하세요.

.hide {
    display: none;
}

2. visibility:hidden

visibility:hidden은 HTML 요소를 숨길 수 있습니다. display:none과 비슷한 효과가 있지만 차이점은 요소가 원래 위치에 남아 있다는 것입니다(공백이 해제되지 않음). 원본 크기가 점유되어 있지만 표시되지 않습니다.

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0은 요소 가시성의 투명도를 설정하는 데 사용되는 필터 속성입니다. 0으로 설정된 요소는 완전히 투명하게 설정되어 사용자에게 표시되지 않습니다. 가시성:숨김과 다르게 원래 위치에 공간이 예약됩니다.

.hide {
    opacity: 0;
}

4. position:absolute + left:-9999px

position:absolute positioning 속성은 요소의 위치를 ​​완전히 왼쪽으로 이동할 수 있습니다. left:-9999px 속성 값을 사용하면 요소를 완전히 숨길 수 있습니다.

.hide {
    position: absolute;
    left: -9999px;
}

2. JavaScript를 사용하여 HTML 코드 숨기기

JS에서 HTML 코드를 숨기는 방법은 CSS보다 약간 더 복잡하며 JS API를 통해 구현해야 합니다. 예를 들어 DOM을 사용하여 문서의 요소를 조작하고 setAttribute 및 스타일 속성을 통해 코드를 숨길 수 있습니다. 코드는 다음과 같습니다.

<div id="hide">需要隐藏的内容</div>
<script>
var hide = document.getElementById('hide');
hide.setAttribute('style', 'display:none'); 
</script>

위 코드의 기능은 id가 hide인 요소를 선택하고 해당 요소의 스타일 속성을 display:none으로 설정하는 것입니다. 즉, 해당 요소가 페이지에서 사라집니다.

3. HTML 코드의 암호화 및 난독화

위의 방법 외에도 보다 안전한 목적을 달성하기 위해 HTML 코드를 암호화하는 더 안전한 방법도 있습니다.

1. BASE64 암호화

HTML 코드의 Base64 암호화는 더 높은 기밀성을 달성할 수 있습니다. Base64로 암호화된 문자열은 URL 및 HTTP POST 매개변수와 같은 통신 프로토콜의 전송에 사용될 수 있으며 길이 제한을 고려할 필요가 없습니다. 암호화된 문자열을 문자 인코딩 형식으로 변환하면 HTML로 올바르게 출력할 수 있어 HTML의 코드를 숨길 수 있습니다.

var str = document.getElementById('demo').innerHTML;
//加密
var base64 = btoa(str);
//解密
var origin = atob(base64);
document.getElementById('demo').innerHTML = origin;

2. JS 코드 난독화

JS 코드 난독화는 JS 코드의 가독성을 떨어뜨리고 크랙의 난이도를 높이기 위해 어떤 수단을 사용하는 것을 말합니다. 난독화에는 일반적으로 함수 이름 바꾸기, 변수 이름 바꾸기, 공백 및 주석 생략 등이 포함됩니다. 난독화는 JS 소스코드를 분석하여 해커가 취약점을 찾아 공격하는 것을 방지하여 페이지의 보안을 강화할 수 있습니다.

function hide() {
    var a = document.createElement('style');
    a.innerHTML = '.hide { display:none; }';
    document.head.appendChild(a);
}
hide();

위 코드는 페이지에 스타일 태그를 동적으로 생성하고 innerHTML을 '.hide {display:none }'으로 설정하여 스타일을 동적으로 생성하여 페이지에 숨겨진 코드를 구현합니다.

간단히 말하면, HTML 코드 숨기기 기술은 웹사이트의 보안을 보호하는 데 매우 중요합니다. 위에 소개된 HTML 코드를 숨기는 여러 가지 방법에는 장점과 단점이 있습니다. 개발자는 페이지의 보안 보호 기능을 향상시키기 위해 자신의 필요에 따라 선택해야 합니다.

위 내용은 HTML 코드 숨김의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!