XSS javascript，漏洞检查

Question

我目前正在处理一个页面，我需要用户输入几个变量，这些变量在提交时会显示在整个页面中。

问题是，它需要是 100% 安全的代码，虽然我可以使用 PDO/mysql 等，但 javascript 并不是我非常流利的东西。

目前，我有以下内容：

<script language="JavaScript">
function showInput() {
    document.getElementById('var1').innerText = 
                document.getElementById("user_var1").value;
    document.getElementById('var2').innerText = 
                document.getElementById("user_var2").value;
}
</script>

用html

<form>
     your variable 1 is = <input type="text" name="message" id="user_var1"><br />
     your variable 2 is = <input type="text" name="message" id="user_var2"><br />
</form>
 <input type="submit" onclick="showInput();">
  <p>var1 = <span id='var1'></span></p>
  <p>var2 = <span id='var2'></span></p>

据我所知，使用“.innerText”应该会停止使用任何 html 等，并且我已经使用

进行了测试

<script>alert(document.cookie);</script>

这导致上面的内容只是按原样打印（不运行）。

例如

your variable 1 is = <script>alert(document.cookie);</script>

您还有什么其他建议可以确保它是安全的（XSS 或其他）？只有 / 和 A-Z 0-9 是需要输入的字符

提前致谢:)

编辑

澄清一下，唯一的代码就是上面的代码，页面没有从数据库等中提取数据（你在上面看到的实际上是完整的 php 页面，只是缺少 html 头部标签等）。

Answer 1

仅根据您在上面所做的事情，您不会有 XSS。 innerText 会进行适当的转义。

让您的网站 100% 安全是一项艰巨的任务。我要看的一些东西是通过HTTPS 和HSTS 运行您的网站，以防止网络级别的对手篡改网站parameterizing your SQL queries，并在提交表单时根据需要添加CSRF 令牌。

特别是关于 XSS，人们获得 XSS 的最常见方式之一是因为他们执行不安全的 DOM 操作。如果您担心安全性，我强烈建议您将 JS 移植到 React，因为您正在操作“虚拟 DOM”，这允许 React 执行上下文相关的转义。它还减轻了开发人员必须进行适当转义的负担。

一个快速的安全胜利是将CSP policy 添加到您的站点并将script-src 指令设置为self。 CSP 策略建立了某些内容可以在您的站点上运行的上下文。因此，例如，如果您将 script-src 设置为 self（这意味着您的 JS 被加载到 <script> 标记的 src 属性中，该标记指向与提供 HTML 的域相同的域，而不是在页面）如果有人进行 XSS，它将（很可能*）不会运行。

这些只是您可以使用的不同安全解决方案的一些示例，以及深入安全实践的简要介绍。很高兴您认真对待安全问题！

*在某些情况下（例如，如果您正在动态生成脚本）它们的代码可以运行。

Answer 2

这里没有漏洞（请在投票前阅读）。

只是为了澄清，唯一的代码是上面的，页面不是 从数据库等中提取数据（您在上面看到的实际上是 完整的 php 页面，只是缺少 html 头体标签等）。

因此，以下两个字段不能由当前用户以外的任何人填充：

<input type="text" name="message" id="user_var1">
<input type="text" name="message" id="user_var2">

因为没有填充这两个字段的代码。

代码填充的两个DOM元素如下：

<span id='var1'></span>
<span id='var2'></span>

执行此操作的代码是

document.getElementById('var1').innerText = 
                document.getElementById("user_var1").value;
document.getElementById('var2').innerText = 
                document.getElementById("user_var2").value;

它使用非标准的innerText而不是textContent，但是innerText会设置文本内容而不是HTML内容，阻止浏览器呈现任何标签或脚本。

但是，即使它改为设置innerHTML 属性，用户所能做的就是攻击自己（就像他们在浏览器中打开开发者工具一样）。

但是，为了正确的功能行为和互联网标准，我会使用textContent 而不是innerText 或innerHTML。

注意

<script>alert(document.cookie);</script>

无论如何都行不通，它必须是

<svg onload="alert(document.cookie)" />

或类似的。 HTML5 规定不应执行通过 innerHTML 插入的 <script> 标记。