css anti-pengubahsuaian

Dengan populariti Internet dan perkembangan teknologi, keselamatan laman web juga semakin mendapat perhatian. Antaranya, teknologi anti-ubah suai CSS adalah salah satu cara penting untuk melindungi keselamatan laman web. Artikel ini akan memperkenalkan pengetahuan berkaitan teknologi antipengubahsuaian CSS dan cara melaksanakan antipengubahsuaian CSS.

Pengetahuan tentang teknologi antipengubahsuaian CSS

1. Apakah itu CSS?

CSS (Cascading Style Sheets) ialah singkatan Cascading Style Sheets, iaitu bahasa gaya yang digunakan untuk menerangkan rupa dan gaya dokumen seperti HTML atau XML. CSS boleh memisahkan gaya daripada kandungan halaman web, menjadikan halaman web lebih mudah untuk diselenggara dan diubah suai.

2. Peranan CSS

Menggunakan teknologi CSS boleh menjadikan halaman web lebih cantik, dan anda juga boleh menukar gaya halaman web dengan mudah. Berbanding dengan HTML, CSS mempunyai kelebihan berikut:

(1) Susun aturnya lebih fleksibel

(2) Kodnya lebih ringkas

(3) Ianya mudah untuk mengubah suai dan mengekalkan

(4) Ia boleh meningkatkan kelajuan memuatkan halaman web dengan ketara

3. Prinsip anti-pengubahsuaian CSS

Asas prinsip teknologi anti-ubah suai CSS adalah untuk menghalang orang lain daripada mengubah suai melalui beberapa teknik Gaya halaman web untuk memastikan keselamatan laman web. Khususnya, teknologi antipengubahsuaian CSS boleh dilaksanakan dengan cara berikut:

(1) Menggunakan CSS Sprite: CSS Sprite ialah teknologi yang menggabungkan berbilang ikon kecil menjadi satu ikon besar. Menggunakan teknologi CSS Sprite, berbilang ikon kecil dalam halaman web boleh dimampatkan menjadi satu ikon besar, menjadikannya sukar untuk mengubah suai mana-mana ikon kecil, sekali gus memastikan keselamatan tapak web.

(2) Gunakan pengekodan Base64: Pengekodan Base64 ialah kaedah pengekodan yang menukar data binari kepada kod ASCII. Teknologi pengekodan Base64 boleh digunakan untuk menukar fail imej dalam fail CSS kepada rentetan teks yang panjang, dengan itu melindungi keselamatan fail imej.

(3) Melumpuhkan operasi klik kanan: Melumpuhkan operasi klik kanan pada halaman web boleh menghalang pengguna daripada menyalin, menampal, menyimpan imej, dsb., dengan itu melindungi kandungan halaman web.

(4) Gunakan penyulitan JS: Gunakan JavaScript untuk menyulitkan kod CSS, menjadikannya sukar untuk mengubah suai kod CSS.

Bagaimana untuk menghalang pengubahsuaian CSS?

1. Gunakan CSS Sprite

(1) Gabungkan berbilang ikon kecil menjadi satu ikon besar.

(2) Gunakan gaya CSS untuk meletakkan ikon besar di lokasi yang sesuai pada halaman web.

(3) Tetapkan parameter seperti offset dan saiz melalui gaya CSS, supaya di mana ikon kecil diperlukan, hanya bahagian ikon besar yang sepadan akan dipaparkan.

2. Gunakan pengekodan Base64

(1) Tukar fail imej yang perlu dilindungi kepada format pengekodan Base64.

(2) Gunakan atribut imej latar belakang CSS untuk memasukkan fail imej ke dalam HTML.

(3) Tetapkan saiz, liputan atau penskalaan imej melalui atribut saiz latar belakang.

3. Lumpuhkan klik kanan

Tambahkan kod berikut pada halaman web untuk melarang pengguna mengklik kanan:

<script language="JavaScript">
function stop(){
return false;
}
document.oncontextmenu=stop;
</script>

4. Gunakan JS penyulitan

(1) Tambahkan kod berikut pada kepala halaman web dan gunakan JavaScript untuk menyulitkan kod CSS:

<script type="text/javascript">
function StrEnc(str, pwd){
if(str==""||pwd=="")return"";
str=escape(str);
pwd=escape(pwd);
if(pwd.length<4){pwd=pwd+"0000".substr(0,4-pwd.length);}
var prand=new Array();
for(var i=0;i<pwd.length;i++){
prand[i]=pwd.charCodeAt(i);
}
var sPos=0;
var str2="";
for(var i=0;i<str.length;i++){
sPos=(sPos==pwd.length)?0:sPos;
var tmp=parseInt(str.charCodeAt(i)^prand[sPos++]);
str2+=String.fromCharCode(tmp);
}
return str2;
}
//加密后的CSS代码
var css=document.getElementsByTagName("link");
for(var i=1;i<css.length;i++){
if(css[i].getAttribute("rel").indexOf("style")!=-1&&css[i].getAttribute("title").indexOf("notEncrypt")==-1){
var objXMLHttpRequest=new XMLHttpRequest();
objXMLHttpRequest.onreadystatechange=function(){
if (objXMLHttpRequest.readyState==4&&objXMLHttpRequest.status==200){
css[i].outerHTML="<style>"+StrEnc(objXMLHttpRequest.responseText.trim(),"key")+"</style>";
}
};
objXMLHttpRequest.open("GET",css[i].getAttribute("href"),false);
objXMLHttpRequest.send(null);
}
}
</script>

(2) Tambahkan kod berikut pada kepala daripada fail CSS yang perlu disulitkan:

<meta charset="UTF-8">
<title>notEncrypt</title>

Ringkasan

Teknologi antipengubahsuaian CSS ialah salah satu cara penting untuk melindungi keselamatan tapak web. Dengan menggunakan CSS Sprite, pengekodan Base64, melumpuhkan klik kanan dan menggunakan teknologi penyulitan JS, anda boleh melindungi gaya tapak web, imej dan kandungan lain dengan berkesan daripada pengubahsuaian berniat jahat. Walau bagaimanapun, apabila menggunakan teknologi ini, anda juga perlu mempertimbangkan kesannya terhadap faktor seperti kelajuan memuatkan laman web dan keserasian untuk mencapai kesan perlindungan terbaik.

Atas ialah kandungan terperinci css anti-pengubahsuaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!