XSS

Question

如果我需要加载一些不受信任的外部 HTML 内容并在 DOM 上呈现它们，使用 innerHTML 属性是否足以防止恶意脚本？

通过我自己的测试和 HTML 内的 article、<script> 标签，通过 innerHTML 设置到 DOM 中的现有元素（ main 或 shadow) 不被执行。所以即使脚本在那里，不执行它是否可以防止安全风险？

对于添加的措施，它也可以帮助找到所有 <script> 标签并在 DOM 中删除它们。这还有必要吗？

Answer 1

不，这还不够好。内联处理程序仍然可以执行 - 最值得注意的是，那些将立即执行的处理程序。例如：

const untrustworthyContent = `
<div>
  <img src onerror="alert('evil');">
</div>
`;
document.querySelector('div').innerHTML = untrustworthyContent;

<div></div>

任何东西都可以放入这样的内联处理程序属性中，包括加载其他恶意脚本。

For added measure, it can also help to find all tags and remove them in the DOM. Is this even necessary?

最好做到彻底。在考虑渲染之前删除所有 <script> 标记和内联处理程序。

XSS - 通过在 DOM 元素上设置内部 HTML 来加载外部 HTML 是否可以防止攻击？