javascript - XSS - insideText 字符串可以是 HTML 元素 : script, div 等是否危险？

Question

我正在从事评论网站的客户端工作。

用户可以在评论描述中插入任何文本，包括 html 元素文本(例如: <script> console.log('hello') </script> )，并使用基本文本样式:斜体、粗体等...

我想测试跨站点脚本。所以我玩了一下，当使用斜体时，元素被渲染为 html 元素的内部文本。

HTML 中的内部文本如下所示:

不过，我没有看到警报被执行。

用户编写的文本是否可以通过调用其事件而变成有效的 HTML？如果是这样，怎么办？

Answer 1

您在 elements/DOM 选项卡中看到的内容有点误导您。如果您使用过 innerText (或者更恰本地说 textContent ，通常)设置元素的文本，它没有其中有标签。它有人物。从显示的 Angular 来看，这些字符可以形成标签，但它们不是标签，浏览器不会那样对待它们。

查看此内容的一种方法是查看它们的 HTML:

const target = document.getElementById("target");
target.textContent =
    `<script>alert("Hi!");<\/script>
    <div onclick='alert("Ho!");'>click me</div>
    <img onerror='alert("Hum!");' src=''>`;
console.log("textContent:", target.textContent);
console.log("innerHTML:", target.innerHTML);

<div id="target"></div>

请注意，该元素不包含 script标签，它包含字符 < , s , c , r , i , p , t等

---

相反，使用innerHTML让您容易遭受 XSS 攻击:

const target = document.getElementById("target");
target.innerHTML =
    `<script>alert("Hi!");<\/script>
    <div onclick='alert("Ho!");'>click me</div>
    <img onerror='alert("Hum!");' src=''>`;
console.log("textContent:", target.textContent);
console.log("innerHTML:", target.innerHTML);

<div id="target"></div>

script以这种方式插入的标签不会运行，但属性定义的事件处理程序会运行，例如 error img 上的事件没有 src - 运行的代码可以添加 script将被执行:

const target = document.getElementById("target");
target.innerHTML =
    `<div onclick='alert("Ho!");'>click me</div>
    <img onerror='(function() {
        alert("Hi!");
        var s = document.createElement("script");
        s.textContent = &apos;alert("Hi from script");&apos;;
        document.body.appendChild(s);
    })()' src=''>`;
console.log("textContent:", target.textContent);
console.log("innerHTML:", target.innerHTML);

<div id="target"></div>