禁用第三方Cookie时iframe能否访问自身的localStorage？

该报错的核心原因是现代浏览器的隐私拦截规则：当用户禁用第三方Cookie、或者浏览器开启默认跨站隐私保护时，所有跨站iframe（也就是和父页面域名不属于同一个站点的iframe）的本地存储权限（包含localStorage、sessionStorage、IndexedDB等）会被默认禁用，和是否访问父页面存储无关。
可用解决方案如下：

• 配置Storage Access API权限
  首先在iframe标签上添加allow="storage-access"属性声明存储权限需求，之后在iframe内部的代码中，绑定用户交互事件（比如点击、输入，避免被浏览器拦截静默请求）调用document.requestStorageAccess()接口，接口返回Promise，权限请求通过后即可正常访问iframe自身的localStorage。注意该方案要求父页面和iframe都必须使用HTTPS协议。
• 配置同根域名消弭跨站属性
  如果业务允许，可将父页面和iframe的域名调整为同一个根域名下的不同子域名，比如父页为a.example.com、iframe为b.example.com，之后在父页面和iframe的代码中都加入document.domain = 'example.com'的配置，即可让两者被浏览器识别为同站上下文，不会触发第三方存储拦截规则。
• 通过postMessage委托父页面存储
  兼容性最高的方案，不需要额外申请权限：iframe需要读写存储时，通过postMessage向父页面发送读写请求，父页面完成本地存储操作后再将结果返回给iframe。
  示例代码：
  iframe侧发送存储请求：

  // 发送存储请求
  parent.postMessage({
    action: 'setItem',
    key: 'userInfo',
    value: JSON.stringify({id:1, name:'test'})
  }, 'https://父页面的正式域名')
  // 监听父页面返回的结果
  window.addEventListener('message', (e) => {
    if(e.origin !== 'https://父页面的正式域名') return
    if(e.data.action === 'setItemSuccess') {
      // 处理存储成功逻辑
    }
  })
  

  父页面侧处理请求：

  window.addEventListener('message', (e) => {
    if(e.origin !== 'https://iframe的正式域名') return
    if(e.data.action === 'setItem') {
      localStorage.setItem(e.data.key, e.data.value)
      e.source.postMessage({action: 'setItemSuccess'}, e.origin)
    }
    // 同理可扩展getItem、removeItem等逻辑
  })
  

• 内存存储替代持久化存储
  如果仅需要临时存储数据、刷新页面后数据丢失不影响业务，可直接在iframe内部用全局变量或者Map对象来存储数据，不需要调用localStorage接口。

内容的提问来源于stack exchange，提问作者Bruno Cunha