必须为所有第三方脚本和样式启用sri校验并配置integrity与crossorigin属性，csp须通过http响应头设置且禁用不安全指令，外部资源需白名单管控，iframe需严格沙箱隔离，优先采用shadow dom实现组件隔离。
第三方脚本加载是否启用 SRI 校验
没加 integrity 属性的 <script src="https://cdn.jsdelivr.net/..."></script>，等于把执行权白送给 CDN。哪怕文件只被篡改一个字节，浏览器照样执行。
实操建议：
- 所有带
src的第三方<script></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"></iframe> 看似隔离，但若没配 sandbox 或允许 allow-scripts，它仍可读取父页面 Cookie、调用 parent.postMessage 泄露数据。
实操建议：
- 非必要不使用
<iframe></iframe>；优先用attachShadow()封装第三方 HTML 片段，实现样式+脚本+DOM 三层隔离 - 必须用 iframe 时，至少加上：
sandbox="allow-scripts allow-same-origin"，并严格限制allow-权限 - 客服、评论等交互型组件，应在用户触发后（如点击按钮）再动态创建
<script></script>或<iframe></iframe>，避免首屏加载 - 对已知会污染全局的 SDK（如某些老版广告 JS），用
document.domain = ''+iframe拆离到独立子域，物理隔绝
data-id="gjs-123" 能不能删”——这些需要人肉确认的模糊地带，才是安全落地最耗时的部分。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
