广告容器必须用 iframe + 显式 sandbox，如 sandbox="allow-scripts allow-popups"，禁用 allow-same-origin 和 allow-top-navigation；外层需预设宽高防 CLS；广告脚本须 async 且置于 body 开头；样式与 DOM 污染须用 Shadow DOM 隔离；CSP 必须分设 script-src 和 frame-src 并禁用 unsafe 选项。
广告容器必须用 iframe + 显式 sandbox，不能只写 sandbox=""
只写 sandbox 或 sandbox="" 会导致广告 iframe 白屏，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，控制台无报错、无日志、连 HTML 标签都不解析——这不是加载失败，是浏览器直接拒收响应体。
- 正确写法必须是
sandbox="allow-scripts allow-popups"：至少启用脚本执行和有限弹窗 - 严禁加
allow-same-origin（会暴露父页 cookie）和allow-top-navigation（可劫持整个页面跳转） - 外层容器需预设宽高，如
style="width:300px;height:250px;"，否则广告动态撑开引发 CLS 报警 -
loading="lazy"对广告 iframe 无效，反而可能触发重复请求；应改用IntersectionObserver动态创建
第三方脚本必须 async + 移至 body 开头，禁放 head
没加 async 或 defer 的 <script src="ad.js"></script> 会同步阻塞 HTML 解析，首屏 DOM 构建直接暂停——不是“慢”，是“停”。常见现象包括文字/图片完全不出现、DOMContentLoaded 延迟 2s+、LCP 崩坏。
- 所有广告 SDK 脚本（如
gpt.js、qg.js）必须带async属性 - 脚本标签必须移到
<body>开头，紧贴首屏容器之后，绝不可放在<head>里 - 删掉所有内联初始化代码（如
googletag.cmd.push(...)），统一在googletag.enableServices()中调用 -
async和defer对内联脚本（<script>...</script>）无效，只对外部src生效
样式与 DOM 污染必须靠 Shadow DOM，CSS-in-JS 无效
广告常通过全局选择器（如 .btn、body）覆盖你页面样式，CSS-in-JS（如 styled-components）只保护你自己写的组件，对第三方注入的 <style> 或内联样式完全无感。
- 唯一可靠方案是
attachShadow({ mode: 'open' })，创建影子根后手动注入内容 - 禁止直接赋值
shadowRoot.innerHTML = htmlString：<script>不执行、<style>不生效、<link>加载到全局 - 正确做法是用
<template>包裹原始 HTML，再用cloneNode(true)拆解，逐个处理<style>和<script> - 第三方 JS 初始化（如
new Quill('#editor')）默认查document，需改为查shadowRoot.querySelector('.ql-editor')
CSP 必须分设 script-src 和 frame-src，且禁用 unsafe 选项
没配 Content-Security-Policy 头，等于放行所有第三方脚本——广告不仅污染样式，还可能拖垮性能、窃取用户行为。
立即学习“前端免费学习笔记（深入）”；
- 服务端响应头必须设
Content-Security-Policy: script-src 'self' https://cdn.yourdomain.com; frame-src 'self' https://securepubads.g.doubleclick.net - 显式剔除广告常用域名（如
doubleclick.net）于script-src或frame-src列表之外 - 禁用
'unsafe-inline'和'unsafe-eval'，否则内联广告脚本和eval渲染的弹窗仍可执行 - 本地开发可用
<meta http-equiv="Content-Security-Policy">测试，但不支持report-uri等高级指令
document，Shadow DOM 里得手动传入 shadowRoot；又比如 sandbox 的 token 是白名单，写了才开，不写就锁死，空值比不写更危险。这些细节一漏，隔离就形同虚设。 
