htmlコードビハインド

ほとんどのユーザーにとって、Web ページの疑似クラスは深く掘り下げることはなく、基本的なフレームワーク、つまり HTML 構造、CSS ファイル、JavaScript コードを確認する方法しか知りません。一部の単純な Web ページでは、HTML ファイルに CSS スタイルを直接記述したり、JavaScript コードを直接記述したりできます。ただし、多くの場合、コードのセキュリティを確保するためにコードを非表示にする必要があります。

HTML コードの非表示とは、ユーザーの視界に直接表示されないように、HTML 構造内のコンテンツを非表示にすることを指します。このテクノロジーは、オンライン支払いやアカウント検証など、機密性を維持し、保護し、隠す必要がある一部の Web サイトでよく使用されます。では、HTML コードを非表示にするにはどうすればよいでしょうか?

1. CSS を使用して HTML コードを非表示にする

CSS には、HTML コードを非表示にすることができる非常に便利な属性表示があります。この属性を使用する場合、display:none、visibility:hidden、opacity:0、position:absolute left:-9999px (左シフト 9999 ピクセル) などを使用して HTML コードを非表示にすることができます。

1. display:none

display:none は、HTML を非表示にする最も一般的に使用される方法です。要素を非表示にして、HTML コードを非表示にすることができます。非表示ユーザーへ。要素を非表示にするには、要素の表示属性値を none に設定します。

.hide {
    display: none;
}

2. visibility:hidden

visibility:hidden は HTML 要素を非表示にできます。display:none と同様の効果があります。違いは、要素が元の状態のままであることです。それを保持し（スペースは解放されません）、元のサイズに従って占有しますが、表示されません。

.hide {
    visibility: hidden;
}

3. opacity:0

opacity:0 は、要素の可視性の透明度を設定するために使用されるフィルター属性です。 0 に設定された要素は完全に透明になるように設定され、ユーザーには表示されません。表示:非表示とは異なり、元の位置にスペースが確保されます。

.hide {
    opacity: 0;
}

4. position:absolute left:-9999px

position:absolute Positioning 属性は、要素の位置を完全に左に移動できます。属性値 left を使用すると、次のようになります。 -9999px、要素を完全に非表示にすることができます。

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

2. JavaScript を使用して HTML コードを非表示にする

HTML コードを非表示にする JS メソッドは CSS よりも少し複雑で、JS API を介して実装する必要があります。たとえば、DOM を使用してドキュメント内の要素を操作し、setAttribute 属性と style 属性を通じてコードを非表示にすることができます。コードは次のとおりです。

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

上記のコードの機能は、Hide の ID を持つ要素を選択し、要素の style 属性を display:none に設定することです。これは、要素が画面から消えることを意味します。ページ。

3. HTML コードの暗号化と難読化

上記の方法に加えて、より安全な目的を達成するために HTML コードを暗号化する、より安全な方法があります。

1. BASE64 暗号化

Base64 を使用して HTML コードを暗号化すると、より高い機密性を実現できます。 Base64 で暗号化された文字列は、URL や HTTP POST パラメータなどの通信プロトコルでの送信に使用でき、長さの制限を考慮する必要はありません。暗号化された文字列を文字エンコード形式に変換することで、正しくHTMLに出力することができ、HTML内のコードを隠蔽することができます。

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

2. JS コードの難読化

JS コードの難読化とは、何らかの手段を使用して JS コードの可読性を低下させ、解読の難易度を高めることを指します。難読化には通常、関数名の変更、変数の名前の変更、スペースやコメントの省略などが含まれます。難読化により、ハッカーが JS ソース コードを分析して脆弱性を見つけてコードを攻撃するのを防ぎ、ページのセキュリティを向上させることができます。

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

上記のコードは、ページ内にスタイル タグを動的に作成し、その innerHTML を '.hide { display:none; }' に設定し、スタイルを動的に生成することでページに非表示のコードを配置します。

つまり、HTML コード隠蔽テクノロジは、Web サイトのセキュリティを保護するために非常に重要です。上記で紹介した HTML コードを非表示にするいくつかの方法にはそれぞれ長所と短所があるため、開発者はページのセキュリティ保護機能を向上させるために、独自のニーズに応じて選択する必要があります。

以上がhtmlコードビハインドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。