将 JavaScript 注入并执行到现有的 DOM

Question

我正在尝试将 JavaScript 代码注入现有的 DOM。

我已经看到，如果我将脚本手动放入浏览器的 DOM 元素检查器

<script>alert("XSS test");</script>

脚本节点已添加到 DOM，但它没有效果。我的意思是，没有显示警告框。

另一方面，如果我使用 document.write() 通过 JavaScript 控制台将脚本作为纯文本放置，在这种情况下，代码会立即被解析和执行，并且警告框按预期显示。

document.write('<script>alert("XSS test");</script>');

我习惯于在检查器中看到对 DOM 元素的手动更改会立即反映在页面中，而 JavaScript 节点似乎是个例外。

为什么 Web 浏览器不执行检查器中手动放置的 JavaScript 个节点？

是否有另一种方法可以将脚本节点发送到 DOM 并立即使其成为运行？

Answer 1

尝试转到您想要的网页，然后在顶部的 URL 栏中添加

javascript:[你的脚本]

例如

javascript:alert("Hello World!");

Answer 2

script 通过 innerHTML 和相关方法（insertAdjacentHTML 等）添加的标签不会被执行。（确切的规则在 the script portion of the HTML specification 中的某处但它很繁重。）这可能是因为早期发现 poorly-written 页面可能使用 innerHTML 等等附加用户内容，所以不执行它是避免非常非常基本的 XSS 攻击的一种快速简单的方法。但只有非常非常基本的。

您可以将 script 标记添加到 DOM 并通过创建和附加脚本标记来执行它：

const script = document.createElement("script");
script.textContent = `console.log("Hi there");`;
document.body.appendChild(script);

例如，您可以从 devtools 的控制台选项卡执行此操作，而不是 DOM 检查器选项卡。

将 JavaScript 注入并执行到现有的 DOM

Inject and execute JavaScript into an existing DOM

html

javascript

xss