Ionic Capacitor访问含自定义标签HTML时抛出ERR_BLOCKED_BY_ORB错误

问题原因 #

这个错误是Chrome 116及以上版本引入的**Origin Restricted Blobs (ORB)**安全机制导致的。ORB会严格限制跨源Blob/资源的访问，当内容播放器加载包含自定义HTML标签的跨源内容时，若不符合ORB的安全判定规则，就会被拦截。

解决方案 #

• 调整内容加载方式
  如果播放器是通过URL.createObjectURL()生成Blob URL来加载HTML内容的，改成直接用iframe加载原始内容URL，或者确保内容的源与播放器所在页面同源。ORB对同源内容的限制会宽松很多。同时检查自定义标签依赖的脚本、样式是否来自跨源，这类嵌套资源也容易触发ORB拦截。

• 临时调试关闭ORB（仅用于排查）
  在Chrome地址栏输入chrome://flags/#origin-restricted-blas，将该选项设置为Disabled，重启浏览器后测试。注意这只是临时排查手段，生产环境不能依赖，会降低安全性。

• 配置服务器CORS策略
  如果自定义HTML内容来自你可控的服务器，配置正确的CORS响应头：

  • 设置Access-Control-Allow-Origin为播放器所在的域名（或特定允许的源）
  • 确保自定义元素定义脚本、关联资源的CORS头也配置到位，让ORB认可资源的安全性。

• 使用Trusted Types包装内容
  若播放器是动态注入HTML内容到页面，用Trusted Types API创建可信HTML，避免ORB拦截：

  if (window.trustedTypes && trustedTypes.createPolicy) {
    const playerPolicy = trustedTypes.createPolicy('player-content-policy', {
      createHTML: (content) => {
        // 这里可添加内容过滤/验证逻辑，确保内容安全
        return content;
      }
    });
    // 用可信HTML注入到播放器容器
    const safeHTML = playerPolicy.createHTML(yourContentHTML);
    document.getElementById('player-container').innerHTML = safeHTML;
  }
  

• 检查自定义元素规范合规性
  确保自定义标签符合Web Components规范：

  • 正确使用customElements.define()注册元素
  • 元素定义过程中不加载未授权的跨源资源
    不合规的自定义元素加载逻辑也可能触发ORB的安全拦截。

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