☰

JavaScript で HTML エンティティをエスケープ解除するには? 質問する

tag-icon • tag-icon javascript html escaping xml-rpc
JavaScript で HTML エンティティをエスケープ解除するには? 質問する

XML-RPC バックエンドと通信する JavaScript コードがあります。XML-RPC は次の形式の文字列を返します。

<img src='myimage.jpg'>

ただし、JavaScript を使用して文字列を HTML に挿入すると、文字列は文字通りにレンダリングされます。画像ではなく、文字列が表示されます。

<img src='myimage.jpg'>

HTML は XML-RPC チャネル経由でエスケープされていると思われます。

JavaScript で文字列をエスケープ解除するにはどうすればよいですか? このページのテクニックを試しましたが、失敗しました:http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

問題を診断する他の方法は何ですか?

ベストアンサー1

ここで与えられた答えのほとんどには大きな欠点があります。変換しようとしている文字列が信頼できない場合、クロスサイトスクリプティング（XSS）の脆弱性関数については、受け入れられた回答次の点を考慮してください。

htmlDecode("<img src='dummy' onerror='alert(/xss/)'>");

この文字列にはエスケープされていない HTML タグが含まれているため、関数は何かをデコードする代わりに、htmlDecode文字列内に指定された JavaScript コードを実際に実行します。

これを回避するには、DOMParserこれはすべての最新ブラウザ:

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("&lt;img src='myimage.jpg'&gt;")  )    
// "<img src='myimage.jpg'>"

console.log(  htmlDecode("<img src='dummy' onerror='alert(/xss/)'>")  )  
// ""

この関数は、副作用として JavaScript コードを実行しないことが保証されています。HTML タグはすべて無視され、テキスト コンテンツのみが返されます。

互換性に関する注意: HTML を解析するには、DOMParser少なくとも Chrome 30、Firefox 12、Opera 17、Internet Explorer 10、Safari 7.1、または Microsoft Edge が必要です。したがって、サポートされていないブラウザーはすべて EOL をはるかに超えており、2017 年現在、まだ時折見られるのは古いバージョンの Internet Explorer と Safari だけです (通常、これらはまだ気にするほど多くありません)。

おすすめ記事