XSS javascript，漏洞检查

我目前正在一个页面上工作，我需要用户输入几个变量，提交后这些变量将显示在整个页面上

问题是，它需要是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>

函数showInput（）{
document.getElementById（'var1'）。innerText=
document.getElementById（“user_var1”）.value；
document.getElementById（'var2'）。innerText=
document.getElementById（“user_var2”）.value；
}

使用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>

您的变量1为=

您的变量2为=

var1=

var2=

据我所知，使用“.innerText”应该可以停止使用任何html等，我已经用它进行了测试

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

警报（document.cookie）；

这导致上述内容按原样打印（未运行）

e、 g

变量1=alert（document.cookie）；

您是否建议执行其他操作以确保其安全（XSS或其他）？只需输入/和A-Z 0-9字符

提前感谢：）

编辑

---

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

仅根据您在上面所做的，您将不会有XSS<代码>内部文本将进行正确的转义

让你的网站100%安全是一项艰巨的任务。我要介绍的一些内容是运行您的站点，以防止网络级别的对手篡改站点，并在表单提交时添加必要的令牌

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

一个快速的安全胜利是向站点添加一个脚本，并将

scriptsrc

指令设置为

self

。CSP策略建立了特定内容可以在站点上运行的上下文。因此，例如，如果将

script src

设置为

self

（这意味着您的JS加载在

标记的

src

属性中，该标记指向HTML服务的同一域，而不是在页面上内联），如果有人执行XSS，它将（很可能*）不会运行

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

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

此处没有漏洞（请在下一票前阅读）

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

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

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

它正在使用非标准而不是，但是

innerText

将设置文本内容而不是HTML内容，从而阻止浏览器呈现任何标记或脚本

然而，即使是设置属性，用户所能做的就是攻击自己（就像他们在浏览器中打开开发人员工具一样）

然而，为了正确的功能行为和互联网标准，我会使用

textContent

，而不是

innerText

或

innerHTML

注意

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

警报（document.cookie）；

无论如何都不管用，必须这样

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

---

或类似的。HTML5规定通过innerHTML插入的

标记不应执行。

你说的

100%安全的代码是什么意思。这里最简单的“攻击”是用我想要的任何内容覆盖
showInput
，或者如果我只是想禁用它，则从节点中删除id，弄乱按钮，或者更改按钮上的clickhandler。这才刚刚开始，你说安全是什么意思？承认100%安全可能是个错误的术语。我的意思是，用户将无法向宿主注入或添加任何内容，或使用它遍历到另一个目录（例如，使用../../../）。e、 对于一些使用mysql的页面，我不得不改为PDO等来停止注入。这就是我所说的，用户只需在浏览器中按F12键，就可以在你的页面中执行他/她想要的任何内容。Like
showInput=null
或
document.getElementById（'var1'）.innerHTML=“…任何…”
或。。。你（几乎）没有任何控制权。所以inspect元素等意味着你没有控制权，你建议如何让用户安全地向html页面添加变量？谢谢。因为时间将是一个因素，很明显，我需要做大量的阅读。我正在考虑的一个选择是使用iframe并将上述代码放在不同的托管页面+域上。据我所见，任何攻击都应该被锁定在新的主机包上（从而限制损害）。当然，这是利用同源策略（）作为防御，这在很大程度上是好的只要iframe的域上没有敏感信息，hanks:）基本上，新的主机包将只包含上述代码（没有其他代码）。是的，有了安全性，您总是可以进一步锁定某些内容。这几乎是不可能的
document.getElementById('var1').innerText = 
                document.getElementById("user_var1").value;
document.getElementById('var2').innerText = 
                document.getElementById("user_var2").value;

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

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