CSP、Trusted Types 与注入

本节先用安全的 textContent 和危险的 innerHTML 对照，再说明 CSP 与 Trusted Types 如何阻止注入。

<div id="out"></div><script>
  const value = '<img src=x onerror=alert(1)>'
  const out = document.querySelector('#out')
  out.textContent = value
  console.log(out.innerHTML)
</script>

textContent 显示原始文本而不执行标签；在启用 Trusted Types 的页面中，直接给 innerHTML 字符串会被拒绝，应改用安全策略或继续使用文本节点。

机制拆解

CSP 通过响应头限制脚本来源和执行方式；Trusted Types 约束可把字符串送入危险 DOM sink 的代码路径。textContent 是不解析 HTML 的安全对照，策略与编码应分别验证。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

用两个响应头版本运行同一页面：允许内联脚本与阻止内联脚本；再启用 Trusted Types 并分别执行 textContent、普通 innerHTML，记录控制台阻止信息和最终 DOM。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 用 CSP 允许与阻止内联脚本两次运行，记录 Console 与 DOM 结果。
2. 分别用 textContent 和 innerHTML 写入同一字符串，解释执行差异。
3. 说明 Trusted Types 约束 sink，不等于自动验证业务输入。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。