必须通过服务端签发可信凭证校验 iframe 来源合法性：检查 encryptedcontent 参数存在性、验证 sign 签名（含时间戳/随机串/encryptedcontent）、解密后核验 tenantid/userid 一致性，且敏感操作须待解密完成后再执行。
iframe 被第三方支付插件嵌入时，如何验证来源合法性
第三方支付插件（如支付宝智能客服插件、微信支付 JSAPI 封装页）常通过 iframe 加载，但它们不是“随便谁都能嵌”的公开资源。若没做校验，攻击者可伪造 spi_endpoint 或篡改 encryptedContent 参数，绕过身份鉴权，甚至劫持支付上下文。
关键点在于：插件 iframe 的加载入口（即 src）必须携带服务端签发的可信凭证，前端不能仅靠 URL 存在就信任它。
- 检查 URL 中是否存在
encryptedContent参数 —— 这是支付宝 CCM 插件的强制要求，缺失即为非法调用 - 验证
sign参数是否由你方私钥签名，且签名原文包含时间戳、随机串、encryptedContent三元组（不可只验 sign 存在） - 解密
encryptedContent后，必须校验其中的tenantId、userId是否与当前会话一致，防止 token 复用 - 禁止在未解密前就执行任何敏感操作（如初始化支付 SDK、读取 localStorage 中的订单号）
为什么 sandbox="allow-scripts" + allow-same-origin 组合是高危配置
很多支付类插件文档示例里写了 sandbox="allow-scripts allow-same-origin"，这在调试阶段看似方便，但上线后等于主动放弃同源隔离 —— iframe 内脚本可直接读写父页面 DOM、调用 window.top.location.replace() 跳转，甚至窃取 document.cookie（若未设 SameSite=Strict）。
真实生产环境必须拆开权限：
- 若插件只需渲染 UI 且通信走
postMessage，则去掉allow-same-origin，仅保留allow-scripts - 若必须共享 cookie（如单点登录态），改用
document.domain配合后端Set-Cookie的Domain属性，而非开放沙箱 - 所有
postMessage接收方必须严格校验event.origin，例如只接受https://service.alipay.com，禁用通配符* - 对支付结果回调等关键消息，额外校验
event.data.nonce或签名字段，防重放
Content-Security-Policy 的 frame-src 为何比 X-Frame-Options 更关键
X-Frame-Options: DENY 只能阻止别人嵌你，但无法控制“谁可以被你嵌”。而支付插件集成场景下，你才是 iframe 的父页面，必须明确告诉浏览器：“只允许从指定域名加载 iframe”，否则中间人可替换 src 指向钓鱼页面。
错误写法：Content-Security-Policy: frame-src 'self' —— 这只允许同域资源，但支付宝/微信的插件域名显然不同
正确做法：
- 明确列出可信插件域名：
frame-src 'self' https://service.alipay.com https://wx.tenpay.com - 禁止内联脚本和 eval：
script-src 'self' 'unsafe-inline' 'unsafe-eval'必须移除，否则 XSS 可动态创建恶意 iframe - 配合
referrerpolicy="no-referrer"防止支付参数泄露到 Referer 头中 - CSP 必须由后端响应头设置，前端 meta 标签无效（浏览器忽略）
检测 iframe 是否被恶意劫持的轻量级运行时方案
即使 CSP 和 sandbox 都配好了，仍需在页面加载后快速判断当前 iframe 是否处于预期环境中。别再只用 window.top !== window.self —— 它在跨域 iframe 下会因 SecurityError 失效，且无法区分“合法插件嵌入”和“恶意套壳”。
推荐组合检测：
- 先尝试访问
window.top.location.href，捕获SecurityError—— 出错说明跨域嵌入，需进一步判断 - 检查
window.frameElement的src是否匹配白名单正则（如/^https?:\/\/(service\.alipay|wx\.tenpay)\.com\//） - 若插件支持，调用其提供的环境检测 API（如支付宝的
AlipayJSBridge.call('getEnv', ...)返回env === 'iframe'且domain匹配） - 对异常情况（如检测失败、domain 不匹配），立即销毁 iframe 并显示降级提示，不继续加载支付控件
最易被忽略的是：这个检测逻辑必须在 <iframe></iframe> 标签插入 DOM 后、其内容开始加载前执行 —— 晚了就可能执行恶意脚本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
