CodePen iframe内跳转Twitter返回ERR_BLOCKED_BY_RESPONSE错误如何解决

1. X（原Twitter）近期更新了反滥用跳转校验规则，对来自CodePen预览iframe嵌套环境的跳转请求做了服务端拦截，是触发ERR_BLOCKED_BY_RESPONSE报错的核心原因。
2. 调试模式下代码直接在顶层窗口运行，没有嵌套CodePen的预览iframe，请求来源不会触发X的拦截规则，因此可以正常跳转。
3. 你添加rel="noreferrer noopener"属性无效的原因是，该属性仅控制跳转时的referrer来源头和opener权限，并没有改变请求是从嵌套iframe发起的特征，仍然会被X的服务端规则识别拦截。

• 方案1：使用JavaScript触发顶层窗口跳转
  替换原生a标签的跳转逻辑，通过window.open调用顶层窗口的API发起跳转，规避iframe嵌套来源的识别：

  <a href="#" onclick="event.preventDefault(); window.open('https://twitter.com/jcubic', '_blank')">...</a>
  

• 方案2：替换跳转域名
  将链接中的twitter.com替换为X的官方新域名x.com，目前新域名的拦截规则尚未覆盖CodePen iframe来源，大部分场景下可以正常跳转。
• 方案3：增加中间跳转页
  先跳转至无嵌套限制的第三方静态页，再由静态页做重定向跳转至Twitter，完全规避嵌套iframe的来源特征。

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