Android Webview中iframe加载Base64编码HTML的src属性失效问题咨询

Base64 src加载失效根源 #

• 移动端Webview对data: URI长度有严格限制，通常最大支持1~2MB，当你的Base64编码内容超过阈值后会被Webview直接拦截，无法正常加载，而Chrome桌面端无该限制因此表现正常
• 多数Webview默认安全策略禁止iframe加载data: URI资源，需要单独在Webview初始化时配置允许data: URI加载的规则，未配置时就会出现加载失败
• 低版本Android系统Webview、iOS 10以下的WKWebview本身不支持iframe src属性加载带base64的data URI，存在原生兼容缺陷

srcdoc属性下postMessage通信失效修复方案 #

srcdoc加载的iframe默认源为about:srcdoc，跨源校验逻辑和普通iframe不同，按以下步骤配置即可正常通信：

• 父级React应用监听message事件时，将about:srcdoc或null加入源校验白名单，不要只校验你的React应用域名：

window.addEventListener('message', (event) => {
  // 兼容srcdoc的源，也可额外加消息体约定字段校验提升安全性
  if (event.origin === 'about:srcdoc' || event.origin === 'null') {
    // 正常处理消息逻辑
    console.log('收到iframe消息：', event.data)
  }
})

• iframe内部发送postMessage时，目标源指定为父页面实际域名或者'*'即可，不需要匹配iframe自身的srcdoc源：

// iframe内部调用代码
parent.postMessage({ type: 'test', data: '消息内容' }, '*')
// 若已知父页面域名，建议替换为具体域名提升安全性，例如'https://你的React应用地址'

• 若使用iOS WKWebview，需要在Webview配置项中开启allowFileAccessFromFileURLs和allowUniversalAccessFromFileURLs权限，避免跨源规则拦截postMessage调用。

备选方案 #

如果以上方案都不满足你的场景，可选择更稳妥的实现方式：

• 不需要上下文隔离的场景下，直接通过React的dangerouslySetInnerHTML属性把HTML内容插入到当前页面的DOM节点中，完全规避iframe的各类兼容问题
• 将HTML内容写入本地临时文件，通过本地文件路径加载iframe，绕过Base64长度限制和srcdoc的跨源问题

内容的提问来源于stack exchange，提问作者Burak Bayraktaroğlu