前端:内嵌微信二维码登录。
官方文档: 关于微信快速登录功能的说明 | 微信开放文档
按照官方文档书写后,二维码出现在了页面上。但是扫码登录时,浏览器控制台报错
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再打包发布即解决问题