javascript - 让用户用他们自己的 HTML 更新 div 有什么固有的危险吗？

Question

我为 children 创建了一个页面来解释 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 是个好主意)