eval和innerHTML的客户端JavaScript的安全性比较？

我一直在尝试使用inner HTML来尝试找出我需要收紧我正在开发的webapp的安全性,我在 the mozilla docs上碰到了一个有趣的注射方法,我还没有想过.

var name = "<img src=x onerror=alert(1)>";
element.innerHTML = name; // Instantly runs code.

这让我想知道一个.)如果我应该使用innerHTML,b.)如果不是一个问题,为什么我一直在避免其他代码插入方法,特别是eval.

让我们假设我在浏览器上运行javascript客户端,我采取必要的预防措施,以避免在易于访问的功能中暴露任何敏感信息,而且我已经得到了一些任意指定的地方,我已经决定innerHTML不是安全的风险,我已经优化了我的代码,我不一定担心一个很小的性能命中

我使用eval创建任何其他问题吗？除纯代码注入外,还有其他安全问题吗？

或者,是内在的,我应该显示同样的关心的东西？同样危险吗？

解决方法

TL;博士;

是的,你的假设是正确的.

如果您添加不受信任的代码,则设置innerHTML容易遭受XSS攻击.

(如果你添加了代码,这不是一个问题)

考虑使用textContent,如果你想添加用户添加的文本,它会逃脱它.

问题是什么

innerHTML设置DOM节点的HTML内容.当您将DOM节点的内容设置为任意字符串时,如果您接受用户输入,则您很容易受到XSS的攻击.

例如,如果根据GET参数中的用户输入设置节点的innerHTML. “用户A”可以使用HTML发送“用户B”您的页面的一个版本,“窃取用户的数据并通过AJAX将其发送给我”.

有关详细信息,请参阅this question.

我可以做些什么来减轻它？

如果要设置节点的HTML,您可能需要考虑的是：

>使用具有转义功能的Mustache模板引擎. (默认情况下会转义HTML)
>使用textContent手动设置节点文本
>不接受从用户到文本字段的任意输入,自己清理数据.

请参阅this question更多的一般方法来防止XSS.

代码注入是一个问题.你不想在接收端.

大象在房间里

这不是innerHTML和eval的唯一问题.当您更改DOM节点的innerHTML时,您正在销毁其内容节点并创建新节点.当你调用eval时,你正在调用编译器.

虽然这里的主要问题是明显的不可信任的代码,而且您表示的表现不是一个问题,但我仍然觉得我必须提到这两个代码是非常慢的.