HTML中Trusted Types API强制类型检查防止DOM型XSS的配置-html教程-PHP中文网

必须配csp响应头，否则trusted types完全不生效；服务端需返回content-security-policy: require-trusted-types-for 'script'; trusted-types default，缺一不可，且标签无效。

html中trusted types api强制类型检查防止dom型xss的配置

必须配 CSP 响应头，否则 Trusted Types 完全不生效

Trusted Types 不是 JS API 调用就能启用的防御机制。浏览器只在收到正确的 Content-Security-Policy HTTP 响应头后才开启运行时拦截——<meta http-equiv="Content-Security-Policy"> 对 require-trusted-types-for 指令完全无效，写了也白写。

服务端必须返回如下响应头（Nginx 示例）：
add_header Content-Security-Policy "require-trusted-types-for 'script'; trusted-types default";

require-trusted-types-for 'script' 是开关：它让 innerHTML、insertAdjacentHTML、document.write 等 sink 拒绝普通字符串
trusted-types default 中的 default 不可省略，它是策略白名单的占位名；若用自定义名（如 htmlPolicy），必须写成 trusted-types htmlPolicy，且 JS 中策略名必须严格匹配
漏掉任一指令（比如只写 trusted-types default 却没写 require-trusted-types-for），所有 innerHTML = '<script>alert(1)</script>' 都会静默执行

createHTML 函数不能只是透传或拼接字符串

策略函数不是“加个壳就安全”，而是强制你做真实净化。返回原始输入或手动拼接 HTML，等于把信任直接交给用户输入。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

错误写法：
createHTML: (input) => input
createHTML: (input) => `<div>${input}</div>`

前者绕过所有过滤，等同于裸字符串赋值
后者在拼接后仍可能带恶意标签（如 input = '"><img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="HTML中Trusted Types API强制类型检查防止DOM型XSS的配置">'）
正确做法是调用专业净化库，例如 DOMPurify（需 ≥ 3.0 并启用 RETURN_TRUSTED_TYPE: true）：createHTML: (input) => DOMPurify.sanitize(input, { RETURN_TRUSTED_TYPE: true })
别在策略里写正则替换 HTML 标签——绕过成本低、维护难、性能差

哪些 DOM 操作会被拦截，哪些不会

Trusted Types 只拦截规范明确定义的“脚本执行类 sink”，不是所有字符串赋值都管。关键看是否可能触发 JS 执行。

会被拦截：element.innerHTML = ...、element.insertAdjacentHTML()、document.write()、location.assign('javascript:...')、eval('...')
不会被拦截：element.textContent = ...（推荐优先用）、element.setAttribute('data-id', ...)、JSON.parse(...)、location.href = 'https://...'（但 location.assign(...) 会拦）
容易被忽略的 sink：element.outerHTML = ...、iframe.srcdoc = ...、DOMParser.parseFromString(..., 'text/html')——它们同样受控，但常被遗漏

开发阶段必须用 Report-Only 模式收集违规

上线即开 Content-Security-Policy 强制模式，极易导致大面积白屏。必须先用 Content-Security-Policy-Report-Only + report-uri 收集所有未包装的赋值行为。

配置示例：add_header Content-Security-Policy-Report-Only "require-trusted-types-for 'script'; trusted-types default; report-uri /csp-report"
上报内容包含具体哪行 JS、哪个变量、哪个 DOM 操作被拦截，能准确定位漏改点
第三方库（如富文本编辑器、图表库）若内部直接操作 innerHTML，也会触发上报——需确认其版本是否适配，或封装 wrapper
注意：旧版 Safari 或部分 Web Components 场景（如 shadowRoot.innerHTML）可能未完全覆盖，需额外验证

实际落地最易卡住的点，不在 JS 策略怎么写，而在服务端头是否真发出去、策略名是否大小写一致、以及那些没被日志捕获的间接 sink 调用。