CSP、Trusted Types 与 SRIweb-quality-skills 安全最佳实践打造零漏洞的现代网页【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skillsweb-quality-skills 是一套面向 AI 编程助手的网页质量技能包基于 Google Lighthouse 标准帮助开发者全面提升网站性能、可访问性与安全性。本文聚焦其中的网页安全最佳实践讲解 CSP内容安全策略、Trusted Types 与 SRI子资源完整性三重防线帮你从零搭建一套抵御 XSS 攻击与供应链攻击的现代网页安全体系。️为什么现代网页需要三重安全防线先说结论单一防护手段已经不够用了。过去网页最大的威胁是 XSS跨站脚本攻击——攻击者把恶意代码偷偷注入你的页面在受害者浏览器里执行。但随着前端生态越来越复杂威胁也在升级DOM 型 XSS即使你不加载任何外部脚本一行把用户输入直接塞进innerHTML的写法就足以让恶意代码跑起来。供应链攻击你信任的 CDN 被黑所有引用它的网站一起沦陷。真实案例知名 polyfill 服务 polyfill.io 在 2024 年被攻破约 10 万个网站因此向用户推送了恶意代码。面对这些升级的威胁web-quality-skills 的 best-practices 技能 给出了一套组合拳CSP 管好脚本来源Trusted Types 管好 DOM 注入SRI 管好第三方文件。三者层层设防缺一不可。 想快速了解整体写法可直接查看 skills/best-practices/SKILL.md 的 Security 章节那里有完整的官方配置与示例。第一重防线CSP 内容安全策略什么是 CSPCSPContent Security Policy内容安全策略就像给网页发了一张白名单。你明确告诉浏览器只允许从这些可信来源加载脚本、样式、图片等资源凡是不在白名单里的一律拦截。这样一来就算攻击者成功把一段脚本注入进了你的页面只要它的来源不在白名单里浏览器就会拒绝执行。配置 CSP 的两种写法最简单的入门方式是用 meta 标签meta http-equivContent-Security-Policy contentdefault-src self; script-src self https://trusted-cdn.com;更推荐的做法是通过HTTP 响应头下发 CSP因为响应头可以携带更完整的策略。一个比较完整的安全响应头大致长这样Content-Security-Policy: default-src self; script-src self nonce-abc123; img-src self data: https:; connect-src self https://api.example.com; frame-ancestors self; base-uri self; form-action self;几个关键字段值得留意default-src self兜底规则只允许同源资源没单独声明的资源类型都按它来。frame-ancestors / base-uri / form-action分别防止页面被恶意嵌套、base标签被篡改、表单被提交到外部是很多人容易漏配的高级项。用 nonce 安全放行内联脚本有些场景你难免要写内联脚本。此时直接给 CSP 加unsafe-inline等于把防护拆了一半千万别这么干。正确姿势是给脚本配一个nonce一次性随机串服务器每次请求生成一个随机值放进响应头页面里合法的脚本带上同样的值浏览器就放行攻击者注入的脚本拿不到正确 nonce自然被拦下。完整写法与对比示例可参考 skills/best-practices/SKILL.md#L36-L61 的 CSP 章节。第二重防线Trusted Types 防御 DOM-XSSCSP 堵不住的那个洞CSP 管的是加载哪些脚本文件但管不住一段字符串被送进危险接口。只要你的代码里有把用户输入直接赋给innerHTML、调用eval这类写法DOM 型 XSS 的口子就还开着。Trusted Types 如何堵住它Trusted Types 的思路很直接让innerHTML、eval这些危险接口拒绝接收裸字符串只接受经过命名策略处理过的类型化对象。从 2026 年初起它已成为所有主流浏览器的基线能力Baseline。开启方式是在 CSP 里追加一行Content-Security-Policy: require-trusted-types-for script; trusted-types default;之后任何绕过策略直接往innerHTML赋值裸字符串的代码都会抛错逼着你统一走净化函数。常见框架都已适配Angular 内置支持React 19 在强制开启后会自动产出受信任的 HTML其余场景则普遍配合 DOMPurify 这类净化库使用。 平滑落地的小技巧先用Content-Security-Policy-Report-Only只上报不拦截找出代码里所有危险接口的调用点确认修完再切换为强制模式。详细原理与示例见 skills/best-practices/SKILL.md#L70-L91。第三重防线SRI 子资源完整性供应链攻击有多危险SRISubresource Integrity子资源完整性解决的是我信任的文件被人调包的问题。只要给从外部 CDN 加载的脚本和样式加上 SRI 校验浏览器就会在运行前比对文件的哈希值——哈希对不上直接拒绝执行。即便 CDN 被攻破、文件被偷换用户也不会执行到被篡改的代码。给第三方脚本加 SRI核心就是在标签上补两个属性integrity哈希值和crossoriginscript srchttps://cdn.example.com/lib.js integritysha384-oqVuAfXRKap7fdgcCY5uykM6... crossoriginanonymous/script几个实用细节哈希值可用 OpenSSL 一行命令生成integrity支持用空格分隔写多个哈希升级版本时先把新版本的哈希加进去再切换避免中途加载失败SRI 依赖 CDN 返回Access-Control-Allow-Origin响应头。⚠️ 特别提醒永远不要从一个你无法掌控的第三方 CDN 加载 polyfill。polyfill.io 的沦陷就是血淋淋的教训——优先自托管或用可信镜像并务必用 SRI 锁版本。完整写法见 skills/best-practices/SKILL.md#L93-L103。别忘了安全响应头清单CSP、Trusted Types、SRI 解决的是攻击进不来而一组配套的安全响应头则把其余常见风险也挡在门外响应头作用Strict-Transport-SecurityHSTS强制 HTTPS防中间人协议降级X-Content-Type-Options: nosniff禁止浏览器猜测 MIME 类型Referrer-Policy控制地址信息随引用泄露Permissions-Policy限制地理位置、麦克风、摄像头等敏感能力frame-ancestors写在 CSP 内防点击劫持比旧的 X-Frame-Options 更现代有一个反直觉的坑要避开不要再发X-XSS-Protection这个头了。它对应的浏览器 XSS 审计器已被 Chrome、Edge 废弃并移除某些情况下反而会引入新漏洞。用严格 CSP Trusted Types来替代才是正确姿势。完整响应头配置说明见 skills/best-practices/SKILL.md#L105-L124。用 web-quality-skills 一键审计你的网页理解原理后真正落地靠的是检查。web-quality-skills 把上面这套安全规范固化成了可执行的审计清单web-quality-audit 技能 会一次性覆盖性能、可访问性、SEO 与最佳实践并对每个问题标注 Critical / High / Medium / Low 严重程度给出具体修复建议。它内置的安全审计清单Securitycritical 级别包括HTTPS 已启用无混合内容无已知漏洞依赖npm audit已配置 CSP 响应头含frame-ancestors、base-uri、form-action已强制require-trusted-types-for script或灰度期间先 report-only第三方script/link relstylesheet均已用 SRI 哈希锁定已具备 HSTS、X-Content-Type-Options、Referrer-Policy 等安全头生产环境未暴露 source map这份清单的完整内容见 skills/best-practices/SKILL.md#L596-L625照着逐项核对就是最稳的落地路径。如何把技能装到本地安装很简单一条命令即可把整套技能装进你的编程助手npx skills add addyosmani/web-quality-skills之后在对话里直接说帮我做一次安全审计或检查 CSP 配置技能就会自动激活按上面这套标准开始工作。更多本地安装与排错步骤可看 docs/codex-setup.md。常见问题 FAQQ我只是一个静态博客也需要配这么多吗值得而且更简单。静态站配好 HSTS default-src self的 CSP nosniff就已经甩开绝大多数攻击面了。QCSP、Trusted Types、SRI 三者的关系它们是互补而非替代CSP 管资源来源Trusted Types 管 DOM 注入SRI 管第三方文件完整性。三层叠起来才是零漏洞的底气。Q配错了 CSP 会不会把正常功能搞坏会所以先用Report-Only模式观察、确认无误再上强制模式是官方推荐的平滑路径。总结现代网页安全的关键词不是某一条银弹而是层层设防️CSP白名单机制管住脚本来源Trusted Types让 DOM 危险接口只认受信任类型SRI哈希校验防第三方文件被调包✅安全响应头 依赖审计补齐剩余常见风险这套方法已被完整沉淀在 web-quality-skills 的 best-practices 技能 中。把本文的三重防线配上它内置的安全审计清单你的网页就拥有了对抗 XSS 与供应链攻击的完整防线。【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CSP、Trusted Types 与 SRI：web-quality-skills 安全最佳实践，打造零漏洞的现代网页
CSP、Trusted Types 与 SRIweb-quality-skills 安全最佳实践打造零漏洞的现代网页【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skillsweb-quality-skills 是一套面向 AI 编程助手的网页质量技能包基于 Google Lighthouse 标准帮助开发者全面提升网站性能、可访问性与安全性。本文聚焦其中的网页安全最佳实践讲解 CSP内容安全策略、Trusted Types 与 SRI子资源完整性三重防线帮你从零搭建一套抵御 XSS 攻击与供应链攻击的现代网页安全体系。️为什么现代网页需要三重安全防线先说结论单一防护手段已经不够用了。过去网页最大的威胁是 XSS跨站脚本攻击——攻击者把恶意代码偷偷注入你的页面在受害者浏览器里执行。但随着前端生态越来越复杂威胁也在升级DOM 型 XSS即使你不加载任何外部脚本一行把用户输入直接塞进innerHTML的写法就足以让恶意代码跑起来。供应链攻击你信任的 CDN 被黑所有引用它的网站一起沦陷。真实案例知名 polyfill 服务 polyfill.io 在 2024 年被攻破约 10 万个网站因此向用户推送了恶意代码。面对这些升级的威胁web-quality-skills 的 best-practices 技能 给出了一套组合拳CSP 管好脚本来源Trusted Types 管好 DOM 注入SRI 管好第三方文件。三者层层设防缺一不可。 想快速了解整体写法可直接查看 skills/best-practices/SKILL.md 的 Security 章节那里有完整的官方配置与示例。第一重防线CSP 内容安全策略什么是 CSPCSPContent Security Policy内容安全策略就像给网页发了一张白名单。你明确告诉浏览器只允许从这些可信来源加载脚本、样式、图片等资源凡是不在白名单里的一律拦截。这样一来就算攻击者成功把一段脚本注入进了你的页面只要它的来源不在白名单里浏览器就会拒绝执行。配置 CSP 的两种写法最简单的入门方式是用 meta 标签meta http-equivContent-Security-Policy contentdefault-src self; script-src self https://trusted-cdn.com;更推荐的做法是通过HTTP 响应头下发 CSP因为响应头可以携带更完整的策略。一个比较完整的安全响应头大致长这样Content-Security-Policy: default-src self; script-src self nonce-abc123; img-src self data: https:; connect-src self https://api.example.com; frame-ancestors self; base-uri self; form-action self;几个关键字段值得留意default-src self兜底规则只允许同源资源没单独声明的资源类型都按它来。frame-ancestors / base-uri / form-action分别防止页面被恶意嵌套、base标签被篡改、表单被提交到外部是很多人容易漏配的高级项。用 nonce 安全放行内联脚本有些场景你难免要写内联脚本。此时直接给 CSP 加unsafe-inline等于把防护拆了一半千万别这么干。正确姿势是给脚本配一个nonce一次性随机串服务器每次请求生成一个随机值放进响应头页面里合法的脚本带上同样的值浏览器就放行攻击者注入的脚本拿不到正确 nonce自然被拦下。完整写法与对比示例可参考 skills/best-practices/SKILL.md#L36-L61 的 CSP 章节。第二重防线Trusted Types 防御 DOM-XSSCSP 堵不住的那个洞CSP 管的是加载哪些脚本文件但管不住一段字符串被送进危险接口。只要你的代码里有把用户输入直接赋给innerHTML、调用eval这类写法DOM 型 XSS 的口子就还开着。Trusted Types 如何堵住它Trusted Types 的思路很直接让innerHTML、eval这些危险接口拒绝接收裸字符串只接受经过命名策略处理过的类型化对象。从 2026 年初起它已成为所有主流浏览器的基线能力Baseline。开启方式是在 CSP 里追加一行Content-Security-Policy: require-trusted-types-for script; trusted-types default;之后任何绕过策略直接往innerHTML赋值裸字符串的代码都会抛错逼着你统一走净化函数。常见框架都已适配Angular 内置支持React 19 在强制开启后会自动产出受信任的 HTML其余场景则普遍配合 DOMPurify 这类净化库使用。 平滑落地的小技巧先用Content-Security-Policy-Report-Only只上报不拦截找出代码里所有危险接口的调用点确认修完再切换为强制模式。详细原理与示例见 skills/best-practices/SKILL.md#L70-L91。第三重防线SRI 子资源完整性供应链攻击有多危险SRISubresource Integrity子资源完整性解决的是我信任的文件被人调包的问题。只要给从外部 CDN 加载的脚本和样式加上 SRI 校验浏览器就会在运行前比对文件的哈希值——哈希对不上直接拒绝执行。即便 CDN 被攻破、文件被偷换用户也不会执行到被篡改的代码。给第三方脚本加 SRI核心就是在标签上补两个属性integrity哈希值和crossoriginscript srchttps://cdn.example.com/lib.js integritysha384-oqVuAfXRKap7fdgcCY5uykM6... crossoriginanonymous/script几个实用细节哈希值可用 OpenSSL 一行命令生成integrity支持用空格分隔写多个哈希升级版本时先把新版本的哈希加进去再切换避免中途加载失败SRI 依赖 CDN 返回Access-Control-Allow-Origin响应头。⚠️ 特别提醒永远不要从一个你无法掌控的第三方 CDN 加载 polyfill。polyfill.io 的沦陷就是血淋淋的教训——优先自托管或用可信镜像并务必用 SRI 锁版本。完整写法见 skills/best-practices/SKILL.md#L93-L103。别忘了安全响应头清单CSP、Trusted Types、SRI 解决的是攻击进不来而一组配套的安全响应头则把其余常见风险也挡在门外响应头作用Strict-Transport-SecurityHSTS强制 HTTPS防中间人协议降级X-Content-Type-Options: nosniff禁止浏览器猜测 MIME 类型Referrer-Policy控制地址信息随引用泄露Permissions-Policy限制地理位置、麦克风、摄像头等敏感能力frame-ancestors写在 CSP 内防点击劫持比旧的 X-Frame-Options 更现代有一个反直觉的坑要避开不要再发X-XSS-Protection这个头了。它对应的浏览器 XSS 审计器已被 Chrome、Edge 废弃并移除某些情况下反而会引入新漏洞。用严格 CSP Trusted Types来替代才是正确姿势。完整响应头配置说明见 skills/best-practices/SKILL.md#L105-L124。用 web-quality-skills 一键审计你的网页理解原理后真正落地靠的是检查。web-quality-skills 把上面这套安全规范固化成了可执行的审计清单web-quality-audit 技能 会一次性覆盖性能、可访问性、SEO 与最佳实践并对每个问题标注 Critical / High / Medium / Low 严重程度给出具体修复建议。它内置的安全审计清单Securitycritical 级别包括HTTPS 已启用无混合内容无已知漏洞依赖npm audit已配置 CSP 响应头含frame-ancestors、base-uri、form-action已强制require-trusted-types-for script或灰度期间先 report-only第三方script/link relstylesheet均已用 SRI 哈希锁定已具备 HSTS、X-Content-Type-Options、Referrer-Policy 等安全头生产环境未暴露 source map这份清单的完整内容见 skills/best-practices/SKILL.md#L596-L625照着逐项核对就是最稳的落地路径。如何把技能装到本地安装很简单一条命令即可把整套技能装进你的编程助手npx skills add addyosmani/web-quality-skills之后在对话里直接说帮我做一次安全审计或检查 CSP 配置技能就会自动激活按上面这套标准开始工作。更多本地安装与排错步骤可看 docs/codex-setup.md。常见问题 FAQQ我只是一个静态博客也需要配这么多吗值得而且更简单。静态站配好 HSTS default-src self的 CSP nosniff就已经甩开绝大多数攻击面了。QCSP、Trusted Types、SRI 三者的关系它们是互补而非替代CSP 管资源来源Trusted Types 管 DOM 注入SRI 管第三方文件完整性。三层叠起来才是零漏洞的底气。Q配错了 CSP 会不会把正常功能搞坏会所以先用Report-Only模式观察、确认无误再上强制模式是官方推荐的平滑路径。总结现代网页安全的关键词不是某一条银弹而是层层设防️CSP白名单机制管住脚本来源Trusted Types让 DOM 危险接口只认受信任类型SRI哈希校验防第三方文件被调包✅安全响应头 依赖审计补齐剩余常见风险这套方法已被完整沉淀在 web-quality-skills 的 best-practices 技能 中。把本文的三重防线配上它内置的安全审计清单你的网页就拥有了对抗 XSS 与供应链攻击的完整防线。【免费下载链接】web-quality-skillsAgent Skills for optimizing web quality based on Lighthouse and Core Web Vitals.项目地址: https://gitcode.com/gh_mirrors/we/web-quality-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
