html code-behind

For most users, web page pseudo-classes do not dig deeply, and they only know how to review a basic framework, that is, HTML structure, CSS files and JavaScript code. On some simple web pages, we can directly write CSS styles in HTML files, or directly write JavaScript code. However, in many cases, we need to hide the code to ensure the security of the code.

HTML code hiding refers to hiding the content in the HTML structure so that it will not appear directly in the user's field of vision. This technology is often used in some websites that need to be kept confidential, protected and hidden, such as online payments, account verification, etc. So, how to hide HTML code?

1. Use CSS to hide HTML code

There is a very useful attribute display in CSS, which can hide HTML code. When using this attribute, we can use display:none, visibility:hidden, opacity:0, position:absolute left:-9999px (left shift 9999 pixels), etc. to hide the HTML code.

1. display:none

display:none is the most commonly used method of hiding HTML. It can hide elements, so that the HTML code can be hidden. Not visible to users. Set the element's display attribute value to none to hide the element.

.hide {
    display: none;
}

2. visibility:hidden

visibility:hidden can hide HTML elements. It has a similar effect to display:none. The difference is that the element remains in its original position. Keep it (the space is not released) and occupy it according to the original size, but it is not visible.

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0 is the filter attribute used to set the transparency of the element's visibility. Elements set to 0 are set to be completely transparent and will not be visible to the user. Different from visibility:hidden, space will be reserved in the original position.

.hide {
    opacity: 0;
}

4. position:absolute left:-9999px

position:absolute positioning attribute can completely move the position of the element to the left. With the attribute value of left:-9999px, you can Hide elements thoroughly.

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

2. Use JavaScript to hide HTML code

The JS method of hiding HTML code is slightly more complicated than CSS and needs to be implemented through the JS API. For example, we can use DOM to operate elements in the document and hide code through setAttribute and style attributes. The code is as follows:

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

The function of the above code is to select the element with the ID of hide and set the style attribute of the element to display:none, which means that the element disappears from the page.

3. Encryption and obfuscation of HTML code

In addition to the above methods, there is a safer way, which is to encrypt the HTML code to achieve more secure purposes.

1. BASE64 encryption

Encrypting HTML code with Base64 can achieve higher confidentiality. Base64-encrypted strings can be used for transmission in communication protocols such as URLs and HTTP POST parameters, and there is no need to consider length restrictions. By converting the encrypted string into a character encoding format, it can be correctly output to HTML, thereby hiding the code in HTML.

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

2. JS code obfuscation

JS code obfuscation refers to using some means to make the readability of JS code worse and increase the difficulty of being cracked. Obfuscation generally includes renaming function names, renaming variables, omitting spaces and comments, etc. Obfuscation can prevent hackers from finding vulnerabilities and attack codes by analyzing JS source code, thereby increasing the security of the page.

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

The above code dynamically creates a style tag in the page and sets its innerHTML to '.hide { display:none; }', thereby placing the hidden code on the page by dynamically generating styles. realized on.

In short, HTML code hiding technology is very important to protect the security of the website. The several methods of hiding HTML code introduced above have their own advantages and disadvantages. Developers should choose according to their own needs to improve the security protection capabilities of the page.

The above is the detailed content of html code-behind. For more information, please follow other related articles on the PHP Chinese website!