解决申请开发者office E5中无法发送手机验证码，reCaptcha加载失败

关于申请开发者office E5中无法发送手机验证码的解决方案

注册过程

这是我的亲身经历，可能对其他情况会不一样

第一次注册到验证手机号时，点击发送代码死活没有反应，打开开发者工具的network一栏发现没有任何请求发出

但是发现了有些资源请求失败，其中就包括reCaptcha，打开百度一搜，大部分帖子说需要开魔法才能加载出来，于是我打开魔法重新加载

又到了验证手机号的阶段，发现仍然无法加载，网络中有这样的信息

加载失败原因

查询得知，为了防止网站被xss攻击，浏览器有非常严格的内容加载策略Content-Security-Policy（csp）

W3对csp的描述
MegaCorp Inc 的开发人员希望保护自己免受跨站点脚本攻击。他们可以通过确保其受信任的 CDN 是脚本可以加载和执行的唯一来源来降低脚本注入的风险。此外，他们希望确保没有插件可以在其页面的上下文中执行。以下政策具有这种效果：
Content-Security-Policy: script-src https://cdn.example.com/scripts/; object-src ‘none’

或者看这个[Content-Security-Policy]
(https://www.jianshu.com/p/528b6be7661c)

总之，csp策略阻止了reCaptcha的加载，我们看看申请E5网页的csp时如何描述的

可以看到有一大堆，但是可能正巧没有reCaptcha的网址，那我们添加上就好了

解决过程

我从百度上找到了一个方法，按他教程设置后

Google 人机验证(reCaptcha)无法显示解决方案(可解决大多数 CSP 问题)

设置成功后仍然无法加载出验证，网页右下角多出了个白条。同时，一段时间后，提示加载验证失败

打开控制台，发现reCaptcha仍然被csp阻止了

那我们就去加一个csp
打开Header Editor，编辑csp那条

输入新的代码

let rt = detail.type;
if (rt === 'script' || rt === 'stylesheet' || rt === 'main_frame' || rt === 'sub_frame') {
  for (let i in val) {
    if (val[i].name.toLowerCase() === 'content-security-policy') {
      let s = val[i].value;
      s = s.replace(/googleapis\.com/g, '$& https://gapis.geekzu.org');
      //把这里的https://recaptcha.net改成https://www.recaptcha.net
      s = s.replace(/recaptcha\.google\.com/g, '$& https://www.recaptcha.net');
      //把这里的https://recaptcha.net改成https://www.recaptcha.net
      s = s.replace(/google\.com/g, '$& https://www.recaptcha.net');
      s = s.replace(/gstatic\.com/g, '$& https://*.gstatic.cn');
      val[i].value = s;
    }
  }
}

改完后，问题成功解决

解决方案

首先按照Google 人机验证(reCaptcha)无法显示解决方案(可解决大多数 CSP 问题)的解决办法走一遍

这时便无需魔法即可打开reCaptcha

如果你仍然无法加载出来reCaptcha，就修改Header Editor中的csp规则，将如下代码粘贴进去即可

let rt = detail.type;
if (rt === 'script' || rt === 'stylesheet' || rt === 'main_frame' || rt === 'sub_frame') {
  for (let i in val) {
    if (val[i].name.toLowerCase() === 'content-security-policy') {
      let s = val[i].value;
      s = s.replace(/googleapis\.com/g, '$& https://gapis.geekzu.org');
      //把这里的https://recaptcha.net改成https://www.recaptcha.net
      s = s.replace(/recaptcha\.google\.com/g, '$& https://www.recaptcha.net');
      //把这里的https://recaptcha.net改成https://www.recaptcha.net
      s = s.replace(/google\.com/g, '$& https://www.recaptcha.net');
      s = s.replace(/gstatic\.com/g, '$& https://*.gstatic.cn');
      val[i].value = s;
    }
  }
}

加载成功：