CSS anti-modification

Avec la popularité d'Internet et le développement de la technologie, la sécurité des sites Web fait également l'objet de plus en plus d'attention. Parmi eux, la technologie anti-modification CSS est l’un des moyens importants pour protéger la sécurité des sites Web. Cet article présentera les connaissances pertinentes sur la technologie anti-modification CSS et comment implémenter l'anti-modification CSS.

Connaissances liées à la technologie anti-modification CSS

1. Qu'est-ce que CSS ?

CSS (Cascading Style Sheets) est l'abréviation de Cascading Style Sheets, qui est un langage de style utilisé pour décrire l'apparence et le style de documents tels que HTML ou XML. CSS peut séparer les styles du contenu de la page Web, ce qui rend la page Web plus facile à maintenir et à modifier.

2. Le rôle du CSS

L'utilisation de la technologie CSS peut rendre les pages Web plus belles et vous pouvez également modifier facilement le style des pages Web. Par rapport au HTML, CSS présente les avantages suivants :

(1) La mise en page est plus flexible

(2) Le code est plus concis

(3) Facile à modifier et à entretenir

(4) peut grandement améliorer la vitesse de chargement des pages Web

3. Principe d'anti-modification CSS
#🎜 🎜#

CSS Le principe de base de la technologie anti-modification est d'empêcher des tiers de modifier le style des pages Web par certaines techniques, assurant ainsi la sécurité du site Web. Plus précisément, la technologie anti-modification CSS peut être implémentée des manières suivantes :

(1) Utilisation de CSS Sprite : CSS Sprite est une technologie qui fusionne plusieurs petites icônes en une seule grande icône. Grâce à la technologie CSS Sprite, plusieurs petites icônes d'une page Web peuvent être compressées en une seule grande icône, ce qui rend difficile la modification de l'une des petites icônes, garantissant ainsi la sécurité du site Web.

(2) Utilisez l'encodage Base64 : L'encodage Base64 est une méthode d'encodage qui convertit les données binaires en code ASCII. La technologie d'encodage Base64 peut être utilisée pour convertir des fichiers image dans des fichiers CSS en une longue chaîne de texte, protégeant ainsi la sécurité des fichiers image.

(3) Interdire le clic droit : interdire les opérations de clic droit sur les pages Web peut empêcher les utilisateurs de copier, coller, enregistrer des images, etc., protégeant ainsi le contenu de la page Web.

(4) Utilisez le cryptage JS : utilisez JavaScript pour crypter le code CSS, ce qui rend difficile la modification du code CSS.

Comment empêcher la modification CSS ?

Utiliser CSS Sprite

(1) Fusionnez plusieurs petites icônes en une grande icône.

(2) Utilisez les styles CSS pour placer de grandes icônes aux emplacements appropriés sur la page Web.

(3) Définissez des paramètres tels que le décalage et la taille via les styles CSS, de sorte que là où de petites icônes sont nécessaires, seule la partie correspondante de la grande icône sera affichée.

Utiliser l'encodage Base64

(1) Convertissez les fichiers image qui doivent être protégés au format d'encodage Base64.

(2) Utilisez la propriété background-image de CSS pour insérer des fichiers image dans HTML.

(3) Définissez la taille, la couverture ou la mise à l'échelle de l'image via l'attribut background-size.

Clic droit interdit

Ajoutez le code suivant à la page Web pour interdire aux utilisateurs de cliquer avec le bouton droit :

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

# 🎜🎜##🎜🎜 #Utiliser le cryptage JS

4. (1) Ajoutez le code suivant en en-tête de la page Web et utilisez JavaScript pour crypter le code 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) Dans le CSS qui doit être chiffré Ajoutez le code suivant à l'en-tête du fichier :

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

Summary

La technologie anti-modification CSS est l'une des le moyen important pour protéger la sécurité du site Web. En utilisant CSS Sprite, l'encodage Base64, en désactivant le clic droit et en utilisant la technologie de cryptage JS, vous pouvez protéger efficacement le style, les images et autres contenus du site Web contre les modifications malveillantes. Cependant, lorsque vous utilisez ces technologies, vous devez également tenir compte de leur impact sur des facteurs tels que la vitesse de chargement des sites Web et la compatibilité pour obtenir le meilleur effet de protection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!