code HTML-behind

Pour la plupart des utilisateurs, les pseudo-classes de pages Web n'approfondissent pas et savent seulement comment réviser un cadre de base, c'est-à-dire la structure HTML, les fichiers CSS et le code JavaScript. Sur certaines pages Web simples, nous pouvons écrire directement des styles CSS dans des fichiers HTML, ou écrire directement du code JavaScript. Cependant, dans de nombreux cas, nous devons masquer le code pour garantir sa sécurité.

Le masquage du code HTML fait référence au masquage du contenu dans la structure HTML afin qu'il n'apparaisse pas directement dans le champ de vision de l'utilisateur. Cette technologie est souvent utilisée dans certains sites Web qui doivent rester confidentiels, protégés et cachés, comme les paiements en ligne, la vérification des comptes, etc. Alors, comment masquer le code HTML ?

1. Utilisez CSS pour masquer le code HTML

Il existe un affichage d'attributs très utile en CSS, qui peut masquer le code HTML. Lors de l'utilisation de cet attribut, nous pouvons utiliser display:none, visibilité:hidden, opacity:0, position:absolute + left:-9999px (shift gauche 9999 pixels), etc. pour masquer le code HTML.

1. display:none

display:none est la méthode la plus couramment utilisée pour masquer le HTML. Elle peut masquer des éléments, afin que le code HTML puisse être caché aux utilisateurs. Définissez la valeur de l'attribut d'affichage de l'élément sur none pour masquer l'élément.

.hide {
    display: none;
}

2. visibility:hidden

visibility:hidden peut masquer les éléments HTML. Il a un effet similaire à display:none La différence est que l'élément reste dans sa position d'origine (l'espace n'est pas libéré selon le). original La taille est occupée, mais elle n'est pas visible.

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0 est l'attribut de filtre utilisé pour définir la transparence de la visibilité des éléments. Les éléments définis sur 0 sont définis pour être complètement transparents et ne seront pas visibles par l'utilisateur. Différent de la visibilité : caché, l'espace sera réservé dans la position d'origine.

.hide {
    opacity: 0;
}

4. position:absolute + left:-9999px

position:l'attribut de positionnement absolu peut déplacer complètement la position de l'élément vers la gauche Avec la valeur d'attribut left:-9999px, l'élément peut être complètement masqué.

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

2. Utilisez JavaScript pour masquer le code HTML

La méthode de masquage du code HTML dans JS est légèrement plus compliquée que CSS et doit être implémentée via l'API JS. Par exemple, nous pouvons utiliser DOM pour exploiter des éléments du document et masquer le code via les attributs setAttribute et style. Le code est le suivant :

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

La fonction du code ci-dessus est de sélectionner l'élément avec l'identifiant comme hide et de définir l'attribut de style de l'élément sur display:none, ce qui signifie que l'élément disparaît de la page.

3. Cryptage et obscurcissement du code HTML

En plus des méthodes ci-dessus, il existe également un moyen plus sûr, qui consiste à crypter le code HTML pour atteindre des objectifs plus sécurisés.

1. Cryptage BASE64

Le cryptage Base64 du code HTML peut atteindre une confidentialité plus élevée. Les chaînes chiffrées en base64 peuvent être utilisées pour la transmission dans des protocoles de communication tels que les URL et les paramètres HTTP POST, et il n'est pas nécessaire de prendre en compte les restrictions de longueur. En convertissant la chaîne cryptée dans un format de codage de caractères, elle peut être correctement sortie au format HTML, masquant ainsi le code en HTML.

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

2. Obfuscation du code JS

L'obscurcissement du code JS fait référence à l'utilisation de certains moyens pour rendre la lisibilité du code JS pire et augmenter la difficulté d'être craqué. L'obscurcissement consiste généralement à renommer les noms de fonctions, à renommer les variables, à omettre les espaces et les commentaires, etc. L'obscurcissement peut empêcher les pirates de trouver des vulnérabilités et des codes d'attaque en analysant le code source JS, augmentant ainsi la sécurité de la page.

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

Le code ci-dessus crée dynamiquement une balise de style dans la page et définit son innerHTML sur '.hide { display:none }', implémentant ainsi le code caché sur la page en générant dynamiquement des styles.

En bref, la technologie de masquage du code HTML est très importante pour protéger la sécurité du site Web. Les différentes méthodes de masquage du code HTML présentées ci-dessus ont leurs propres avantages et inconvénients. Les développeurs doivent les choisir en fonction de leurs propres besoins, améliorant ainsi les capacités de protection de la page.

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!