解决申请开发者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时如何描述的
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;
    }
  }
}

加载成功:
在这里插入图片描述

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>