让用户使用自己的 HTML 更新 div 有什么本质上的危险吗?

Question

我为孩子们创建了一个页面来解释HTML如何工作的一些基础知识，我想做的一件事是为他们添加一个功能，让他们输入标签并由浏览器实时呈现。

我知道有很多网站已经这样做了，但我找不到一个可以嵌入我的网站，或者无论如何都足够简单。我想出的解决方案非常简单...

function update() {
var sandbox = document.getElementById("sandbox");
var editor = document.getElementById("editor");
sandbox.innerHTML = editor.value;
}

<form>
<fieldset>
<textarea id="editor" style="width:100%; height: auto;" placeholder="Try typing some HTML here" maxlength="100" oninput="update()"></textarea>
<div id="sandbox" style="width:100%; height: auto;"></div>
</fieldset>
</form>

我想不出任何本质上危险的东西，因为用户基本上已经在控制台和客户端中做这种事情了。但我只是想仔细检查并确保我没有在我的网站中创建漏洞或做一些不太好的事情。抱歉，如果这是一个愚蠢的问题，感谢您的帮助。

Answer 1

它可以允许任意代码执行：

function update() {
var sandbox = document.getElementById("sandbox");
var editor = document.getElementById("editor");
sandbox.innerHTML = editor.value;
}

<form>
<fieldset>
<textarea id="editor" style="width:100%; height: auto;" placeholder="Try typing some HTML here" maxlength="100" oninput="update()"></textarea>
<div id="sandbox" style="width:100%; height: auto;"></div>
</fieldset>
</form>

输入<img src onerror="alert('evil')">查看。

如果用户能够在网站上存储个人信息(例如登录(，则这可能是一个问题。然后，恶意行为者需要做的只是窃取该信息，就是说服某人粘贴不可信的代码。

(这种攻击是许多网站在打开浏览器控制台时向用户显示大警告的原因 - 他们经常说"如果有人告诉你在这里粘贴代码，不要这样做，这是一个骗局试图窃取你的信息。

一个可能的解决方案是将结果嵌入到沙盒 iframe 中，就像 Stack Snippets 和 JSFiddle 以及 Codepen 和其他站点的工作方式一样 - 如果操作得当，这将确保在 iframe 内完成的任何操作都无法离开沙箱并访问父页面中 iframe 外部的重要信息。

如果个人信息不可能通过网站输入或存储在任何地方，那么设置任意 HTML 可能是安全的 - 最坏的情况是，如果网站变得无法运行，用户只需要重新加载页面。(但无论如何使用沙盒iframe是个好主意(