如何使用jQuery解码HTML实体？

javascript jquery html

2022-08-29 23:43:13

如何使用jQuery解码字符串中的HTML实体？

答案 1

安全说明：使用此答案（以下面的原始形式保留）可能会在应用程序中引入 XSS 漏洞。您不应使用此答案。阅读Lucascaro的答案，了解这个答案中的漏洞解释，并使用该答案或Mark Amery的答案中的方法。

实际上，请尝试

var encodedStr = "This is fun &amp; stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>

答案 2

没有任何jQuery：

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 &amp; 2')); // '1 & 2'

这类似于接受的答案，但对于不受信任的用户输入，可以安全地使用。

类似方法中的安全问题

正如 Mike Samuel 所指出的，使用 a 而不是 a 而不是 a 进行不受信任的用户输入是一个 XSS 漏洞，即使从未将<div><textarea><div>

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

但是，这种攻击不可能针对，因为没有 HTML 元素是<文本区域>的允许内容。因此，浏览器将自动对仍存在于“编码”字符串中的任何 HTML 标记进行实体编码。<textarea>

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

警告：使用jQuery的.html（）和.val（）方法而不是使用.innerHTML来执行此操作，并且对于某些版本的jQuery也是不安全的*，即使使用文本区域也是如此。这是因为较旧版本的 jQuery 会有意和显式地计算传递给的字符串中包含的脚本。因此，像这样的代码在jQuery 1.8中显示了一个警报：.value.html()

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

_{* 感谢 Eru Penkman 抓住了这个漏洞。}