javascript - 页面中反射(reflect)的未验证输入的安全风险

Question

我试图找出以下代码的问题有多大，以及我可以采取什么措施。没有 GET 请求，没有动态 url(数据 url 算吗？)，我没有在任何地方使用 eval() 等。我真正知道的唯一一件事是，我应该转义特殊字符，例如 < 、> 和 & 等。但问题在于，我见过的示例表明了为什么这是概念验证演示中的重要一步(人们可能会输入脚本标签并从不良库或同样险恶的东西导入代码) )不工作。所以我很难见证其重要性。

我正在做两件事:

1. 以某种方式将用户输入反射(reflect)回页面
2. 使用用户输入提供可供下载的文件

问题1:不安全吗？不是一般性的，而是我编写的具体代码。如果是这样:

问题2:能否向我展示以下代码在 2018 年下半年在任何现代浏览器中被利用的至少一种方式？

html:

<input id='myInput' value='bob'></input>
<button id='myButton'></button>
<p id='myOutput'></p>

JavaScript:

var buttonEl = document.getElementById('myButton');
buttonEl.addEventListener('click', function() {
 var input = document.getElementById('myInput').value;
 doSomethingThenExportAsTextFile(input);
});

function doSomethingThenExportAsTextFile(x) {
 document.getElementById('myOutput').innerHTML = x;
 var a = document.createElement('a');
 a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(x));
 a.download = 'fileName.txt';
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
}

如果我输入类似 <u>bob</u> 的内容然后正如我所料，带下划线的名称“bob”出现在我的 p 标签中。如果我替换 innerHTML与 textContent或document.createTextNode()那我就没有这个问题了。 这样足够安全吗？

我不知道以前的情况如何，但是如果我在输入中的脚本标记内键入代码，则不会发生任何事情(在 Chrome 中)。 这是 chrome 正在做的事情吗？我该怎么做才能看到上面代码中完全没有任何安全措施的效果？

下载的文本文件，我假设是因为 encodeURIComponent() ，准确读取我输入的内容。

编辑

我认为这个问题的后半部分更重要，因为我读到的有关该主题的几乎所有内容都表明我编写的代码不是安全代码。

此外，我建议这里提供的解决方案:Is createTextNode completely safe from HTML injection & XSS?与我正在寻找的不同，因为所考虑的利用方法使用 php，它能够中断类似 document.createTextNode() 的内容。这不适用于我的情况。

Answer 1

恐怕.innerHTML 不适合防御 XSS；任何允许用户将原始 HTML 输出到 DOM 的东西都容易受到 XSS 的影响。这包括您上面的代码。

例如，您可以使用 onerror <img> 的属性强制加载嵌入式<script>将以下内容提交到您的 <input> :

<img src=x onerror="&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041">

或者如果你想变得非常讨厌，你可以强制加载 <script>嵌入的标签 <svg>
(感谢AllowScriptAccess):

<EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlhTUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED>

以上两种情况都会在最新版本的 Chrome 和 Firefox 中引发“XSS”警报。

.textContent()/.createTextNode()只接受原始文本(无 HTML)，因此在这方面是安全，假设您没有任何允许最终用户注入(inject)服务器的服务器端错误配置端代码。