移动体验 / 方法解读

移动端嵌套 iframe 开启 credentialless 后子级弹窗为何失效

当父级 iframe 开启 credentialless 属性后,其内部的子级 iframe 会继承该设置,导致通过 OAuth 等方式打开的弹窗被 rel=noopener 属性阻断。

Facebook OAuth2 授权登录界面截图
主题资料配图,非新闻现场照片 · 配图:fb_oauth2授权.jpg

检查 credentialless 属性是否被继承

在移动端开发中,如果父级 iframe 设置了 credentialless 属性,浏览器会自动将其传递给所有嵌套的子级 iframe。这意味着子级 iframe 也会运行在无凭证的上下文中。开发者需要确认子级 iframe 是否也继承了该属性,这通常通过在控制台查询 window.credentialless 的值来判断。如果该值为 true,说明子级 iframe 处于 credentialless 状态。

可以通过在子级 iframe 的控制台执行 console.log(window.credentialless) 来验证。如果输出为 true,则表示该 iframe 继承了父级的 credentialless 设置。这种继承机制确保了安全性,但也可能影响需要用户凭证的第三方服务。在移动端,这种继承行为可能会影响广告或登录弹窗的正常显示。

验证弹窗是否被 rel=noopener 阻断

开启 credentialless 的 iframe 在打开新窗口或弹窗时,会自动添加 rel=noopener 属性。该属性会切断新窗口与父窗口之间的联系,防止父窗口通过新窗口访问敏感信息。对于 OAuth 流程,这会导致授权页面无法正确回调或获取用户信息。检查弹窗是否被 rel=noopener 阻断,可以通过查看弹窗的 window.opener 是否为 null 来确认。

在移动端调试时,如果发现 OAuth 弹窗打开后无法完成授权流程,可以尝试在父级 iframe 中移除 credentialless 属性。如果问题随之解决,则说明弹窗确实被 noopener 属性阻断。需要注意的是,这种阻断是浏览器为了安全而采取的默认行为,无法通过简单的代码修改完全绕过。

排查浏览器自动填充功能是否受影响

Credentialless iframe 会禁用浏览器的自动填充和密码管理器功能。这意味着在移动端,用户可能无法通过自动填充快速输入用户名和密码。检查这一功能是否受影响,可以通过在 iframe 内部尝试输入表单信息来观察。如果输入框没有自动填充建议,或者密码管理器无法识别表单,则说明自动填充功能已被禁用。

这种禁用是由于 credentialless 上下文不包含任何用户敏感信息。浏览器为了防止信息泄露,会阻止自动填充功能。在移动端,这可能会降低用户体验,特别是在需要频繁登录的场景下。开发者需要评估这种安全性与便利性之间的平衡,并考虑是否需要调整 credentialless 的使用策略。

确认 Cookie 和存储数据的隔离情况

Credentialless iframe 使用临时的 nonce 值来隔离存储数据,这意味着 Cookie 和 localStorage 不会在 iframe 之间共享。检查这一情况,可以通过在父级 iframe 中设置一个 Cookie,然后在子级 iframe 中尝试读取。如果读取失败,则说明存储数据已被隔离。这种隔离机制确保了不同 iframe 之间的数据安全,但也可能导致某些功能异常。

在移动端,这种隔离可能会影响依赖 Cookie 的第三方服务。例如,广告网络可能无法正确追踪用户行为。开发者需要确认是否需要跨 iframe 共享数据,如果不需要,则 credentialless 的隔离机制是有效的。如果需要共享数据,则可能需要调整策略,例如使用 postMessage 进行数据传递。

资料与延伸阅读

你可以通过以下原始资料核对文中概念,并继续深入阅读。

  1. IFrame credentialless - HTTP | MDN ↗
  2. 配图:fb_oauth2授权.jpg ↗
← 更多移动体验文章返回顶部 ↑