如何在javascript中取消转义HTML？

19 浏览
0 Comments

如何在javascript中取消转义HTML？

我正在使用一个Web服务，它会给我返回类似于以下的值：\nvar text = \"<<<&&&\";\n我需要用JavaScript将其打印成\"<<<&&&\"的形式。\n但问题是：我不能使用innerHTML（实际上我将这些值发送给一个创建文本节点的原型库，所以它不会对我的原始HTML字符串进行转义）。如果不能编辑该库，你将如何对这个HTML字符串进行解码？\n我需要理解其中的真正问题，这种字符串解码的风险是什么？innerHTML是如何解码的？还有哪些其他选择？\n编辑：问题不在于使用JavaScript的常规转义/解转义，甚至不是使用jQuery/prototype的实现，而是关于使用任何一种方法可能导致的安全问题...也就是说，“他们告诉我使用它们是相当不安全的”。\n（对于那些试图理解我在用innerHTML解码这个奇怪字符串时在说什么的人，请查看下面这个简单的例子：）\n



createTextNode示例




段落的第一行。

0

3 答案

0 Comments

问题：如何在JavaScript中取消转义HTML？

原因：根据给出的链接，通过escape和unescape函数在JavaScript中取消转义HTML可能会导致严重的安全问题。因此，这个问题的出现是因为人们想要了解如何在不引起安全问题的情况下取消转义HTML。

解决方法：根据提供的链接，escape和unescape函数已经被弃用。可以参考链接中提供的博客文章以获取更多详细信息。此外，根据前面的评论，使用之前提到的polyfill时需要应用修复方法。

代码：

// 使用unescape函数取消转义HTML（已弃用）
var escapedHtml = "<p>Hello World</p>";
var unescapedHtml = unescape(escapedHtml);
// 使用新的解决方法取消转义HTML
var decodedHtml = he.decode(escapedHtml);

注意：上述博客文章的链接已经更改，可以在新的链接中找到相关信息。

0
0 Comments

问题的原因是使用createTextNode方法来转义HTML并不安全。文章中举了一个例子来说明这种做法的风险。解决方法是使用其他更安全的方法来转义HTML，例如使用innerHTML属性或使用第三方库。

解决方法之一是使用innerHTML属性来设置元素的内容，而不是使用createTextNode方法。这样可以确保HTML被正确转义。例如：

function escapeHtml(str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    return div.innerHTML;
};

另一种解决方法是使用第三方库，例如jQuery的.text()方法。这个方法会自动转义HTML，可以确保安全性。例如：

var userWebsite = '" onmouseover="alert(\'derp\')" "';
var profileLink = '<a href="' + $.text(userWebsite) + '">Bob</a>';
var div = document.getElementById('target');
div.innerHtml = profileLink;

要安全地转义HTML，不能简单地使用createTextNode方法。要么使用innerHTML属性，要么使用第三方库来确保转义的安全性。

0
0 Comments

问题原因：在JavaScript中，有时我们需要将HTML实体转换为其原始的HTML字符，即进行HTML反转义。这个问题的出现是因为在处理用户输入时，如果不对用户输入进行转义处理，就可能导致安全风险，比如用户输入恶意脚本或试图窃取cookie等。

解决方法：

1. 如果文本来自于一个已知安全的来源，并且不基于任何用户输入，则是安全的。

2. 如果使用`createTextNode`创建一个文本节点，并使用`appendChild`将该未经修改的节点对象直接插入文档中，则是安全的。

3. 否则，需要采取适当的措施，确保不安全的内容无法传递给浏览器。

需要注意的是，使用`createTextNode`不是万能的解决方案，如果在转义字符串后使用`textContent`或`innerHTML`获取转义后的文本，并对其进行其他操作，仍然存在安全风险。特别是，Peter Brown的答案中的`escapeHtml`方法如果用于填充属性，则是不安全的。

因此，总结起来，如果有任何来自用户的内容，应该使用`createTextNode`进行处理。但如果需要允许用户使用HTML功能进行文本样式设置等操作，则需要找到一种安全的方法。

0