入力フィールドから属性を読み取るとHTMLエンコーディングが失われます 質問する

入力フィールドから属性を読み取るとHTMLエンコーディングが失われます 質問する

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

例えば、

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

引き込まれる

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

jQuery を使用して隠しフィールドから値を取得します (この時点でエンコーディングが失われます)。

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

問題は、chalk &amp; cheese隠しフィールドから読み取るときに、JavaScript がエンコーディングを失うように見えることです。値を にしたくないのですchalk & cheese。リテラルamp;を保持したいのです。

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

ベストアンサー1

編集:この回答はずっと前に投稿されたもので、このhtmlDecode関数はXSSの脆弱性をもたらしました。一時要素を から に変更してXSSの可能性を減らしましdivtextarea。しかし、今日では、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設定し、エンコードされた を取得します。関数では要素の値を設定し、を取得します。innerTextinnerHTMLhtmlDecodeinnerHTMLinnerText

実行例を確認するここ

おすすめ記事