HTML：禁用动态添加的 <script> 标签？答案

【问题标题】：HTML: disable dynamically added <script> tags?HTML：禁用动态添加的 <script> 标签？
【发布时间】：2021-12-07 12:53:31
【问题描述】：

我从没想过要问这个问题，但我从事安全产品的工作，因此我们对 XSS 实施了非常严格的保护：

我们不允许在服务器端和客户端的用户输入中使用 < 和 >
如果用户确实设法发出包含其中任何一个字符的请求，服务器将禁用他们的帐户并向管理员发出警告
Angular 还会在将内插内容注入 DOM 之前对其进行清理

这一切都很棒而且很花哨，除了它会伤害用户体验并且不利于性能。当然，当然，有一种方法可以告诉浏览器不要执行初始文档解析后添加的<script> 标签，对吧？我们使用现代的捆绑工作流程，任何 JavaScript 的延迟加载都将通过 import("/some/js/module") 调用完成，这些调用由捆绑程序重新定位，但永远不会在运行时提供动态值。

即使没有办法直接告诉浏览器不要运行动态添加（在页面加载后由 JS 加载）<script> 标签，是否有一个经过验证的真实工作流程用于渲染，例如，markdown + HTML 子集用户在 iframe 中制作的内容？我对 iframe 很熟悉，但我的意思是父文档/页面可以操作 iframe 的 DOM 内容或其他东西，所以即使它确实在 iframe 中添加了<script> 标签，脚本代码也不会有访问父文档的JS环境？

实际上，作为一种显示用户内容的沙盒方式，这会很酷，因为理论上它们可以故意包含一个脚本并制作一个小的交互式小部件供其他用户使用（在实践中可能是一种反功能）。

【问题讨论】：

dompurify 怎么样？这正是它的目的，还是我错过了一些观点？见：github.com/cure53/DOMPurify
有<iframe sandbox>和HTTP CSP headers to restrict things like <script>。
web.dev/sanitizer 还要注意TrustedTypes 和Content-Security-Policy。
@Andy Neat 库，但我明确表示我想要一个“完全阻止所有脚本，除非我特别允许”浏览器支持的方法。没有性能影响，出错的机会更少。
@connexo Sanitizer 似乎根本不受支持。此外，我对 Google 大力推动的新 API 感到非常厌倦。不想成为 Chrome 的走狗。 :^)

标签： javascript html xss

【解决方案1】：

您可以使用 CSP（内容安全策略）来做到这一点

https://developers.google.com/web/fundamentals/security/csp#inline-code-considered-harmful

示例：只允许：

<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
  // Some inline code I can't remove yet, but need to asap.
</script>

与

Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

首先阻止所有：

default-src 'none'

【讨论】：

要添加此内容，请不要将unsafe-eval 或unsafe-inline 添加到该标题。对 Content-Security-Policy 标头进行研究，并确保使用安全值。
谢谢，这正是我正在寻找的解决方案。默认阻止，之后根据具体情况允许是完美的！