前端:内嵌微信扫码登陆在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再打包发布即解决问题

猜你喜欢

转载自blog.csdn.net/xiaoxiong_jiaxin/article/details/141468346