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

news2024/11/15 23:34:12

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

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

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

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再打包发布即解决问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2067013.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无需多部备用机,云手机方便又便宜!

云手机,是云计算技术的又一创新应用,它通过在云服务器上虚拟出带有原生安卓操作系统的手机实例,为用户提供了一种全新的手机使用体验。无需携带多部手机,只需通过云手机,便可轻松实现多账号管理、应用运行及数据存储等…

用这个项目管理工具创建管理表,轻松实现项目管理!

在项目管理中,时间表不仅仅是一个简单的计划工具,而是确保项目按时完成的关键 许多项目经理和团队成员在推进项目时,常常因为缺乏明确的时间表而陷入混乱,导致进度拖延、资源浪费,甚至项目失败。 那么,如何…

无人机遥控器里的接收器工作原理解析!

无人机遥控器中的接收器工作方式主要基于无线信号传输技术 信号发射 遥控器上的发射器将用户的操作指令(如推动操纵杆的动作)转化为无线电信号。这些信号通过特定的频率(如常用的2.4GHz)在空气中传输。 信号接收 无人机上的接…

2024.8.23(docker)

一、打包传输 1、打包 [rootdocker ~]# docker save -o centos.tar centos:latest [rootdocker ~]# ls 2、删除镜像 [rootdocker ~]# docker ps -all CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 372f7f49e6df …

固废检测算法实际应用方案固废检测算法源码解析

固废检测算法是利用机器视觉和深度学习技术,对地面上的垃圾进行自动识别、分类和定位的一种算法。这类算法在环境管理、智慧城市、自动化清洁等领域具有广泛的应用前景。以下是对固废检测算法的详细介绍: 一、算法原理 固废检测算法主要基于深度学习和计…

小米14的射频芯片高通SDR753全景图

这周末,除非外面下钞票,否则谁也拦不住我玩《黑神话悟空》(附:两款可以玩转悟空的显卡推荐) 天玑助力联发科力压高通~探秘MTK 5G旗舰智能手机SoC芯片——MT6989(天玑9300) 原创 芯愿景软件 集成电路大数据平台 2024年05月08日 19:18 北京 封装图(正面) 封装图

第21周:中文文本分类-Pytorch实现

目录 前言 一、前期准备 1.1 数据示例 1.2 文本分类的流程图 1.3 导入所需库 1.4 加载数据 二、数据预处理 2.1 构建词典 2.2 生成数据批次和迭代器 三、模型构建 3.1 搭建模型 3.2 初始化模型和超参数定义 3.3 训练函数与评估函数定义 四、训练模型 4.1 拆分数…

整合sentinel遇到的小问题

1.运行jar包 ,端口为默认8080 正确命令 java -Dserver.port8090 -Dcsp.sentinel.dashboard.server127.0.0.1:8090 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.6.jar -D这些指令要在 -jar前面 在宝塔部署时,直接复制到运行命令后…

深入探索分布式任务调度框架:MySQL实现高效锁机制

本文主要介绍项目中怎么使用 MySQL 实现分布式锁的 背景 假如我们现在要做一个高性能、可扩展的分布式任务调度框架,要怎么设计呢?下面是我之前自己设计的一个架构图。 为了方便后续的分布式锁的设计,我们大致描述下各个角色都做了哪些事情…

搭建springboot项目,并解决项目出现红色J问题

搭建springboot的2种方式 搭建springboot项目有多种方式,这里简单介绍2种,看您使用哪个更方便。 第一种:在idea里创建 第二种,在官网创建下载 spring官网地址:https://start.spring.io/ 解决项目出现红J问题 搭建好…

【OpenHarmony】openharmony移植到RK3568------获取源码编译OpenHarmony源码

一、源码获取 源码获取有好几种方式,在这里直接在镜像网站下载源码,点击下面连接下载全量版本的OpenHarmony4.1 https://repo.huaweicloud.com/openharmony/os/4.1-Release/code-v4.1-Release.tar.gz 将源码放到自己建立的目录下解压,我放…

[JavaEE] 工作流- Activiti7 框架详解

目录 1、Activiti介绍 1.1、BPMN设计器 1.2、常见流程符号 1.2.1、事件event 1.2.2、活动activiti 1.2.3、流向flow 2、入门案例 2.1、需求说明 2.2、初始环境 2.2.1、添加依赖 2.2.2、添加配置 2.2.3、添加引导类 2.2.4、启动项目 2.2.5、表结构 2.2.6、常见ap…

【解析几何笔记】5.仿射坐标系与二阶行列式

5.仿射坐标系与二阶行列式 5.1 定义 【定义1.2】空间中一点 O O O与三个不共面向量 e 1 , e 2 , e 3 \pmb{e}_{1},\pmb{e}_{2},\pmb{e}_{3} e1​,e2​,e3​一起构成空间的一个仿射标架,记作 [ O ; e 1 , e 2 , e 3 ] [O;\pmb{e}_{1},\pmb{e}_{2},\pmb{e}_{3}] [O;…

Android CCodec Codec2 (三)C2Param - Ⅰ

在Codec2框架中,对组件的配置(Setting)、微调(Tuning)以及组件回传的信息(Info)都是通过参数的形式进行传递的。无论是简单参数(只包含一个值)还是复杂参数(包…

HEIC批量格式转化JPG怎么转?这四种方法很好用

HEIC批量格式转化JPG怎么转?随着智能手机技术的不断发展,HEIC(High Efficiency Image Container)作为一种高效的图像压缩格式,逐渐被广泛应用于iOS设备中。然而,由于HEIC格式的兼容性问题,许多非…

Echarts 散点图的 tooltip 自定义formatter方法(展示X、Y、value之外的数据)

1.效果展示,如图,tooltip的构成是指标名实际值【目标值】 2.后端的数据结构 3.完整代码:主要就是将需要展示的字段数据拼好放到tooltipInfo里 initLeftEcharts() {const now new Date();const year now.getFullYear();const month …

oracle共享池(shared pool):一、工作原理、组成部分 二、软硬解析过程

文章目录 oracle整体结构图共享池(shared pool)shared pool的作用shared pool的组成查询 shared pool 各组成部分大小硬解析和软解析 oracle整体结构图 共享池(shared pool) shared pool的作用 1、 将 sql 语句解析成执行计划 …

统一服务入口-Gateway(一)

目录 1.网关介绍 1.1含有问题 1.2什么是API网关 网关核心功能: 2.Spring Cloud Gateway 2.1什么是Spring Cloud Gateway 2.2快速上手 2.2.1创建网关项目 2.2.2引入网关依赖 2.2.3添加Gateway的路由配置 2.2.4测试 2.3Predicate 2.3.1Predicate的其他写…

[数据集][目标检测]电力场景红外图像输电线路绝缘子检测数据集VOC+YOLO格式1846张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):1846 标注数量(xml文件个数):1846 标注数量(txt文件个数):1846 标注…

《大模型应用开发极简入门》-当有了一个大模型,你需要知道的几件事情

从某种意义上来说,大模型(LLM-Large language model)也是一个任人打扮的小姑娘,你可以对她进行课程教学(即微调)、可以告诉她一些问题的应对办法(即提示工程)、还可以带上一部计算器…