[解決済み] 入力フィールドから属性を読み込むと、HTMLエンコーディングが失われる

質問

JavaScriptを使ってhiddenフィールドから値を取り出し、テキストボックスに表示させています。隠しフィールドの値はエンコードされています。

例えば

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

に引き込まれる。

<input type='text' value='chalk &amp; cheese' />

jQuery を使って hidden フィールドから値を取得します (この時点でエンコーディングが分からなくなります)。

$('#hiddenId').attr('value')

問題は、私が読んだときに chalk & cheese を使用すると、JavaScript のエンコーディングが失われるようです。私は、値が chalk & cheese . 私はリテラル amp; を保持する。

文字列をHTMLエンコードするJavaScriptのライブラリやjQueryのメソッドはありますか？

どのように解決するのですか？

EDITです。 この回答はかなり前に投稿されたものであり htmlDecode 関数には XSS 脆弱性があります。このため、一時的な要素を div から textarea XSSの可能性を減らすことができます。しかし、最近では、DOMParser APIを使うことをお勧めします。 他の回答者 .

こんな機能を使っています。

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

基本的にtextarea要素はメモリ上に作成されますが、ドキュメントに追記されることはありません。

について htmlEncode 関数を設定しました。 innerText を取得し、エンコードされた innerHTML の上にある htmlDecode 関数を設定しました。 innerHTML 要素の値と innerText が取得される。

実行例を確認する こちら .