前端：内嵌微信扫码登陆在chrome浏览器失败

前端：内嵌微信二维码登录。

官方文档： 关于微信快速登录功能的说明 | 微信开放文档

 按照官方文档书写后，二维码出现在了页面上。但是扫码登录时，浏览器控制台报错

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://www.xxx.xxx/' from    frame with URL "https://open.weixin.com/xxxxxxx" The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor is it processing a user gesture

大致意思是：浏览器监测到了iframe中存在不安全的链接正在尝试进行导航。

在微信扫码登陆的wxLogin.js文件中，对与iframe的处理，是没有添加上述安全问题的属性sendbox的。

sandbox包含的属性及作用：

allow-forms ：允许进行提交表单；

allow-scripts ：运行执行脚本；

allow-same-origin： 允许同域请求，比如ajax,storage；

allow-top-navigation： 允许iframe能够主导window.top进行页面跳转；

allow-popups： 允许iframe中弹出新窗口，比如,window.open,target=”_blank”；

allow-pointer-lock： 在iframe中可以锁定鼠标，主要和鼠标锁定有关。

最后在 wxLogin.js里面加上这句代码就成功了。

i.sandbox = "allow-scripts allow-top-navigation allow-same-origin"

 

---

---

Vue插件里面

打开node_modules包中找到vue-wxlogin包，进入到vue-wxlogin.vue组件，在iframe标签的sandbox属性中加上allow-same-origin再打包发布即解决问题