必须为所有第三方脚本和样式启用SRI校验并配置integrity与crossorigin属性，CSP须通过HTTP响应头设置且禁用不安全指令，外部资源需白名单管控，iframe需严格沙箱隔离，优先采用Shadow DOM实现组件隔离。
第三方脚本加载是否启用 SRI 校验
没加 integrity 属性的 <script src="https://cdn.jsdelivr.net/...">，等于把执行权白送给 CDN。哪怕文件只被篡改一个字节，浏览器照样执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有带
src的第三方<script>和<link rel="stylesheet">必须同时声明integrity和crossorigin="anonymous" - 哈希值必须从官方源获取（如 jsDelivr 页面、npm pkg 页面），不能手算或复用旧版本
- 小版本升级（如
vue@3.4.21→vue@3.4.22）会改变哈希，上线前要同步更新integrity值 - 若使用动态构建流程（如 Webpack/Vite），应通过插件自动生成并注入 SRI，避免人工遗漏
CSP 是否通过 HTTP 响应头配置
用 <meta http-equiv="Content-Security-Policy"> 写 CSP，require-trusted-types-for、report-uri 等关键指令会被忽略——浏览器只认响应头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
curl -I https://yoursite.com返回头中是否有Content-Security-Policy:字段 - 基线策略至少包含：
default-src 'none'; script-src 'self' https://cdn.jsdelivr.net; font-src 'self' https://fonts.gstatic.com; - 禁用
'unsafe-inline'和'unsafe-eval'；内联脚本改用nonce或hash - 对第三方字体，
font-src必须显式列出可信域名，不能靠default-src继承
外部资源是否被无条件加载
编辑器导出的 HTML 常见问题：自动注入 Google Fonts、统计脚本、未删的 data-editor-id 属性——这些不是“能跑就行”，而是上线即风险。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 逐行检查导出 HTML 中所有
src、href、srcset，确认每个外部 URL 都有明确业务用途 - 禁止
data:或javascript:协议的 URL；图片 URL 必须是 HTTPS 且主机名在白名单中（如images.example.com） - 移除所有编辑器残留属性：
data-gjs-*、data-element、contenteditable="true"等 - 字体优先本地化：下载
.woff2放进/fonts/目录，用相对路径引用，断开对外部 CDN 的 runtime 依赖
第三方组件是否运行在隔离环境
直接用 <iframe src="https://widget.thirdparty.com"> 看似隔离，但若没配 sandbox 或允许 allow-scripts，它仍可读取父页面 Cookie、调用 parent.postMessage 泄露数据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 非必要不使用
<iframe>；优先用attachShadow()封装第三方 HTML 片段，实现样式+脚本+DOM 三层隔离 - 必须用 iframe 时，至少加上：
sandbox="allow-scripts allow-same-origin"，并严格限制allow-权限 - 客服、评论等交互型组件，应在用户触发后（如点击按钮）再动态创建
<script>或<iframe>，避免首屏加载 - 对已知会污染全局的 SDK（如某些老版广告 JS），用
document.domain = ''+iframe拆离到独立子域，物理隔绝
data-id="gjs-123" 能不能删”——这些需要人肉确认的模糊地带，才是安全落地最耗时的部分。 
