kod html di belakang

Bagi kebanyakan pengguna, kelas pseudo halaman web tidak menyelidiki secara mendalam, dan mereka hanya tahu cara menyemak rangka kerja asas, iaitu struktur HTML, fail CSS dan kod JavaScript. Pada beberapa halaman web ringkas, kami boleh terus menulis gaya CSS dalam fail HTML, atau terus menulis kod JavaScript. Walau bagaimanapun, dalam banyak kes, kita perlu menyembunyikan kod untuk memastikan keselamatan kod.

Menyembunyikan kod HTML merujuk kepada menyembunyikan kandungan dalam struktur HTML supaya ia tidak akan muncul secara langsung dalam bidang penglihatan pengguna. Teknologi ini sering digunakan dalam beberapa tapak web yang perlu dirahsiakan, dilindungi dan disembunyikan, seperti pembayaran dalam talian, pengesahan akaun, dsb. Jadi, bagaimana untuk menyembunyikan kod HTML?

1. Gunakan CSS untuk menyembunyikan kod HTML

Terdapat paparan atribut yang sangat berguna dalam CSS, yang boleh menyembunyikan kod HTML. Apabila menggunakan atribut ini, kita boleh menggunakan display:none, visibility:hidden, opacity:0, position:absolute + left:-9999px (anjakan kiri 9999 piksel), dsb. untuk menyembunyikan kod HTML.

1. display:none

display:none ialah kaedah yang paling biasa digunakan untuk menyembunyikan HTML, supaya kod HTML tidak kelihatan kepada pengguna. Tetapkan nilai atribut paparan elemen kepada tiada untuk menyembunyikan elemen.

.hide {
    display: none;
}

2. keterlihatan:tersembunyi

keterlihatan:tersembunyi boleh menyembunyikan elemen HTML Ia mempunyai kesan yang serupa dengan paparan:tiada kedudukan. Simpan (ruang tidak dilepaskan) dan menduduki ruang mengikut saiz asal, tetapi ia tidak kelihatan.

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0 ialah atribut penapis yang digunakan untuk menetapkan ketelusan keterlihatan elemen. Elemen yang ditetapkan kepada 0 ditetapkan untuk menjadi telus sepenuhnya dan tidak akan kelihatan kepada pengguna. Berbeza daripada visibility:hidden, ruang akan dikhaskan dalam kedudukan asal.

.hide {
    opacity: 0;
}

4. kedudukan:mutlak + kiri:-9999px

kedudukan:atribut kedudukan mutlak boleh mengalihkan kedudukan elemen ke kiri sepenuhnya, digabungkan dengan nilai atribut left:-9999px, Elemen boleh disembunyikan sepenuhnya.

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

2. Gunakan JavaScript untuk menyembunyikan kod HTML

Kaedah menyembunyikan kod HTML dalam JS adalah lebih rumit sedikit daripada CSS dan perlu dilaksanakan melalui API JS. Sebagai contoh, kita boleh menggunakan DOM untuk mengendalikan elemen dalam dokumen dan menyembunyikan kod melalui setAttribute dan atribut gaya. Kod tersebut adalah seperti berikut:

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

Fungsi kod di atas adalah untuk memilih elemen dengan id sebagai hide dan menetapkan atribut gaya elemen untuk memaparkan:tiada, yang bermaksud elemen itu hilang daripada muka surat.

3. Penyulitan dan pengeliruan kod HTML

Selain kaedah di atas, terdapat cara yang lebih selamat, iaitu menyulitkan kod HTML untuk mencapai tujuan yang lebih selamat.

1. Penyulitan BASE64

Penyulitan Base64 bagi kod HTML boleh mencapai kerahsiaan yang lebih tinggi. Rentetan yang disulitkan Base64 boleh digunakan untuk penghantaran dalam protokol komunikasi seperti URL dan parameter HTTP POST, dan tidak perlu mempertimbangkan sekatan panjang. Dengan menukar rentetan yang disulitkan ke dalam format pengekodan aksara, ia boleh dikeluarkan dengan betul kepada HTML, dengan itu menyembunyikan kod dalam HTML.

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

2. Kekeliruan kod JS

Kekeliruan kod JS merujuk kepada menggunakan beberapa cara untuk menjadikan kebolehbacaan kod JS lebih teruk dan meningkatkan kesukaran untuk dipecahkan. Kekeliruan secara amnya termasuk menamakan semula nama fungsi, menamakan semula pembolehubah, menghilangkan ruang dan ulasan, dsb. Kekeliruan boleh menghalang penggodam daripada mencari kelemahan dan kod serangan dengan menganalisis kod sumber JS, dengan itu meningkatkan keselamatan halaman.

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

Kod di atas secara dinamik mencipta teg gaya dalam halaman dan menetapkan innerHTMLnya kepada '.hide { display:none }', dengan itu meletakkan kod tersembunyi pada halaman dengan menjana gaya secara dinamik.

Ringkasnya, teknologi penyembunyian kod HTML adalah sangat penting untuk melindungi keselamatan tapak web. Beberapa kaedah menyembunyikan kod HTML yang diperkenalkan di atas mempunyai kelebihan dan kekurangan mereka sendiri Pembangun harus memilih mengikut keperluan mereka sendiri untuk meningkatkan keupayaan perlindungan keselamatan halaman.

Atas ialah kandungan terperinci kod html di belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!