移动端网页嵌入第三方广告为何无法加载？检查 iframe credentialless 属性
当第三方内容因跨域隔离策略无法加载时，开发者应检查是否在 iframe 上设置了 credentialless 属性以解决兼容性问题。
为何第三方内容无法加载
现代浏览器为了防御 Spectre 等侧信道攻击，要求启用跨域隔离的网页必须设置 Cross-Origin-Embedder-Policy (COEP) 响应头。当父页面设置了 COEP，它会递归应用到所有嵌入其中的 iframe 内容中，导致第三方资源因未部署该策略而无法加载。这意味着开发者无法直接在设置了 COEP 的页面中嵌入未配置隔离策略的第三方广告或脚本。
这种递归隔离机制限制了跨域隔离特性的普及，因为开发者通常无法控制第三方服务提供商是否实现了 COEP。在没有解决方案的情况下，开发者只能等待第三方服务更新以支持跨域隔离，这会导致页面功能缺失或广告无法展示，影响用户体验和业务运营。
如何设置 credentialless 属性
通过在 iframe 标签上添加 credentialless 属性，或者通过 JavaScript 将 HTMLIFrameElement.credentialless 设置为 true，可以创建一个无凭据的上下文。这种上下文是临时的，仅与顶层文档的生命周期相关联，且不访问其常规来源的网络、Cookie 和存储数据。这使得第三方文档能够以“纯净”版本加载，不包含用户敏感信息。
开发者可以在 HTML 中直接使用属性方式，例如在 iframe 标签内添加 credentialless。也可以通过 JavaScript 动态创建或修改 iframe 元素，先获取元素引用，然后设置 credentialless 为 true，最后再指定 src 属性。这种方式允许在运行时灵活控制哪些 iframe 需要启用该特性。
验证 credentialless 是否生效
在嵌入的 iframe 文档内部，可以通过查询 window.credentialless 属性来验证当前是否处于无凭据上下文中。如果该属性返回 true，则表示嵌入的 iframe 是 credentialless 的。这可以作为前端逻辑判断的依据，确保页面知道第三方内容是否在受限环境中运行。
验证结果还体现在存储隔离上。在 credentialless iframe 中设置的 Cookie 只能在同一顶层文档下的其他同源 credentialless iframe 中访问。刷新页面后，由于上下文已改变，之前设置的 Cookie 将不可用。这证明了该特性确实创建了独立且隔离的存储环境。
注意限制与副作用
使用 credentialless 属性会带来一些功能限制。首先，弹出的窗口将带有 rel='noopener' 属性，这会阻止 OAuth 弹窗流程的正常工作。其次，在 credentialless iframe 中将无法使用浏览器的自动填充或密码管理器功能，因为敏感信息不可用。这些限制意味着该属性主要适用于不需要用户登录态或自动填充的第三方内容。
此外，该特性目前处于实验阶段，并非所有主流浏览器都完全支持。在部署到生产环境前，必须仔细查阅浏览器兼容性表。虽然该特性解决了跨域隔离导致的加载问题，但开发者需要权衡功能缺失与安全提升之间的关系，确保不会影响核心业务流程。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。