HTML-Code-Behind

王林
Freigeben: 2023-05-15 22:48:39
Original
2780 Leute haben es durchsucht

Für die meisten Benutzer gehen Webseiten-Pseudoklassen nicht tief in die Materie ein und sie wissen nur, wie sie ein grundlegendes Framework überprüfen, nämlich die HTML-Struktur, CSS-Dateien und JavaScript-Code. Auf einigen einfachen Webseiten können wir CSS-Stile direkt in HTML-Dateien schreiben oder direkt JavaScript-Code schreiben. In vielen Fällen müssen wir den Code jedoch verbergen, um die Sicherheit des Codes zu gewährleisten.

HTML-Code-Ausblenden bezieht sich auf das Ausblenden des Inhalts in der HTML-Struktur, sodass er nicht direkt im Sichtfeld des Benutzers erscheint. Diese Technologie wird häufig auf einigen Websites verwendet, die vertraulich, geschützt und verborgen bleiben müssen, z. B. bei Online-Zahlungen, Kontobestätigungen usw. Wie kann man also HTML-Code verbergen?

1. Verwenden Sie CSS, um HTML-Code auszublenden.

Es gibt eine sehr nützliche Attributanzeige in CSS, mit der HTML-Code ausgeblendet werden kann. Wenn wir dieses Attribut verwenden, können wir display:none, Visibility:hidden, opacity:0, position:absolute + left:-9999px (Linksverschiebung 9999 Pixel) usw. verwenden, um den HTML-Code auszublenden.

  1. display:none

display:none ist die am häufigsten verwendete Methode zum Ausblenden von HTML. Es kann Elemente ausblenden, sodass HTML-Code angezeigt werden kann vor Benutzern verborgen. Setzen Sie den Anzeigeattributwert des Elements auf „Keine“, um das Element auszublenden.

.hide {
    display: none;
}
Nach dem Login kopieren
  1. visibility:hidden

visibility:hidden hat einen ähnlichen Effekt wie display:none. Der Unterschied besteht darin , Das Element bleibt an seiner ursprünglichen Position (der Platz wird nicht freigegeben) und wird entsprechend seiner ursprünglichen Größe belegt, ist aber nicht sichtbar.

.hide {
    visibility: hidden;
}
Nach dem Login kopieren
  1. opacity:0

opacity:0 ist ein Filterattribut, das zum Festlegen der Transparenz der Elementsichtbarkeit verwendet wird. Auf 0 gesetzte Elemente sind vollständig transparent und für den Benutzer nicht sichtbar. Im Gegensatz zu „visibility:hidden“ wird der Platz an der ursprünglichen Position reserviert.

.hide {
    opacity: 0;
}
Nach dem Login kopieren
  1. position:absolute + left:-9999px

position:absolute Positionierungsattribut kann die Position des Elements vollständig nach links verschieben, mit links: Der Attributwert von -9999px kann das Element vollständig ausblenden.

.hide {
    position: absolute;
    left: -9999px;
}
Nach dem Login kopieren

2. Verwenden Sie JavaScript, um HTML-Code auszublenden

Die JS-Methode zum Ausblenden von HTML-Code ist etwas komplizierter als CSS und muss über die JS-API implementiert werden. Beispielsweise können wir DOM verwenden, um Elemente im Dokument zu bedienen und Code über die Attribute setAttribute und style auszublenden. Der Code lautet wie folgt:

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

Die Funktion des obigen Codes besteht darin, das Element mit der ID „hide“ auszuwählen und das Stilattribut des Elements auf „display:none“ zu setzen, was bedeutet, dass das Element verschwindet von der Seite.

3. Verschlüsselung und Verschleierung von HTML-Code

Zusätzlich zu den oben genannten Methoden gibt es eine sicherere Möglichkeit, den HTML-Code zu verschlüsseln, um mehr Sicherheit zu erreichen .

  1. BASE64-Verschlüsselung

Durch die Verschlüsselung von HTML-Code mit Base64 kann eine höhere Vertraulichkeit erreicht werden. Base64-verschlüsselte Strings können zur Übertragung in Kommunikationsprotokollen wie URLs und HTTP-POST-Parametern verwendet werden, ohne dass Längenbeschränkungen berücksichtigt werden müssen. Durch Konvertieren der verschlüsselten Zeichenfolge in ein Zeichenkodierungsformat kann sie korrekt in HTML ausgegeben werden, wodurch der Code in HTML ausgeblendet wird.

var str = document.getElementById('demo').innerHTML;
//加密
var base64 = btoa(str);
//解密
var origin = atob(base64);
document.getElementById('demo').innerHTML = origin;
Nach dem Login kopieren
  1. JS-Code-Verschleierung

JS-Code-Verschleierung bezieht sich auf die Verwendung einiger Mittel, um die Lesbarkeit von JS-Code zu verschlechtern und zu erhöhen Wie schwierig es ist gehackt werden. Die Verschleierung umfasst im Allgemeinen das Umbenennen von Funktionsnamen, das Umbenennen von Variablen, das Weglassen von Leerzeichen und Kommentaren usw. Durch die Verschleierung kann verhindert werden, dass Hacker Schwachstellen finden und Codes angreifen, indem der JS-Quellcode analysiert wird, wodurch die Sicherheit der Seite erhöht wird.

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

Der obige Code erstellt dynamisch ein Style-Tag auf der Seite und setzt dessen innerHTML auf „.hide { display:none; }“, wodurch der Style dynamisch aus dem auf der Seite implementierten versteckten Code generiert wird.

Kurz gesagt ist die Technologie zum Ausblenden von HTML-Code sehr wichtig, um die Sicherheit der Website zu schützen. Die verschiedenen oben vorgestellten Methoden zum Ausblenden von HTML-Code haben ihre eigenen Vor- und Nachteile. Entwickler sollten sie entsprechend ihren eigenen Anforderungen auswählen und so die Sicherheitsschutzfunktionen der Seite verbessern.

Das obige ist der detaillierte Inhalt vonHTML-Code-Behind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage