XSS を防止しながら HTML 特殊エンティティを簡単にデコードするにはどうすればよいですか?

HTML 特殊エンティティを簡単にデコードする

HTML 特殊エンティティをデコードするのは、複雑な作業になる場合があります。次の JSON 応答を考えてみましょう:

{
    "message": "We're unable to complete your request at this time."
}

エンコードされたアポストロフィ (') に注目してください。このエンコードの背後にある理由は不明瞭かもしれませんが、主な関心事はそれをデコードすることです。

jQuery の侵襲的アプローチ

jQuery を使用して考えられる方法の 1 つは、HTML 文字列を次のように変換することです。 div を作成し、そのテキスト内容を抽出します:

function decodeHtml(html) {
    return $('<div>').html(html).text();
}<p>ただし、このアプローチは多少問題があります。 </p>
<p><strong>推奨ソリューション: タグの保持</strong></p>
<p>タグも保持する、より洗練されたソリューションが存在します。</p>
<pre class="brush:php;toolbar:false">function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

このアプローチには、 textarea 要素、その innerHTML を HTML 文字列に設定し、デコードされた値となる値を取得します。 content.

XSS 防止を使用した実際の例

次の例を考えてみましょう。

Input:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Output:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

ご覧のとおり、特殊なエンティティ (  ) はデコードされますが、script タグは保持されるため、アプリケーションの安全性が確保されます。