从输入字段读取属性时 HTML 编码丢失

小编典典

从输入字段读取属性时 HTML 编码丢失

all

我使用 JavaScript 从隐藏字段中提取值并将其显示在文本框中。隐藏字段中的值被编码。

例如，

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

被拉进

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

通过一些 jQuery 从隐藏字段中获取值（此时我失去了编码）：

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

问题是当我chalk & cheese从隐藏字段读取时，JavaScript 似乎丢失了编码。我不希望值是chalk & cheese。amp;我希望保留文字。

是否有可以对字符串进行 HTML 编码的 JavaScript 库或 jQuery 方法？

阅读 120

2022-03-02

共1个答案

小编典典

编辑： 这个答案是很久以前发布的，该htmlDecode函数引入了 XSS 漏洞。它已被修改，将临时元素从
adiv更改为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检索了。

在此处查看运行示例。

2022-03-02