谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address

news2025/1/22 18:56:29

快速解决:
在这里插入图片描述

======================================================
最近在测试http服务时,谷歌浏览器报了以下错误

“The request client is not a secure context and the resource is in
more-private address space ‘local’”.

从报错信息来看,“不安全的请求方请求了更私有的本地资源”
对于该错误,其实已经在几个月前就已经遇到过,当时对于此的解决方式是修改谷歌浏览器的设置以关闭该检查。
如今,这个错误又一次出现,并且当初修改设置的方式已经不再可行,所以需要寻找其他方法。
这篇博文将分析该错误的原因与相关解决方案。

原因:

谷歌浏览器的更新

Chrome安全更新:

从 Chrome 94 开始阻止来自不安全公共网站的私有网络请求。
在 Chrome 98 中。
●Chrome会在私有网络子资源请求之前发送预检请求。
● 预检失败只在DevTools中显示警告,不影响私人网络请求。
● Chrome收集兼容性数据,并向受影响最大的网站伸出援手。
● Google 预计这将与现有网站广泛兼容。 最早在Chrome 101中全面部署

可以看到,从94版本开始,谷歌针对不安全网站访问私有网络进行了更新,阻止这种访问更私有资源的请求。同时,在进行私有网络资源请求前,还会先发送OPTIONS预检请求。
那么谷歌浏览器的这个更新,是基于什么呢?PNA(Private Network Access) 规范。对于不满足PNA的请求,谷歌浏览器会提示跨域错误

专用网络访问

这里发一下专用网络访问草案的网址:

https://wicg.github.io/private-network-access/#intro

读了文档,大致了解到:PNA是对“公网”访问“私网”进行限制,以提高安全性,防止一些攻击。
文档中对于混合内容、Websocket等各个形式下的措施都有说明。

每个 IP 地址都属于一个 IP 地址空间,该空间可以是一个 三个不同的值: 本地:包含本地 仅限主机。换句话说,每个地址的目标都不同
装置。 私有:包含 仅在当前网络中有意义的地址。在其他 单词,其目标因网络位置而异的地址。 公共:包含所有
其他地址。换句话说,目标相同的地址 IP 网络上的全球所有设备。 为方便起见,我们还定义了以下术语: 本地地址是 IP 地址空间为本地的
IP 地址。 专用地址是 IP 地址空间为私有的 IP 地址。 公共地址是 IP 地址空间为公共的 IP 地址。

文档中,对ip分了三个等级:公共的->私有的->本地的
公共性高的在访问低的时,都属于PNA的内容。以下形式都属于访问“更私有”的ip:
公共ip访问私有ip或者本地ip。
私有ip访问本地ip。

在这里插入图片描述
从这可以了解到,非安全的公共上下文请求专用地址的资源,会有安全问题。http网站请求本地服务,对浏览器来说就是不安全的公网访问本地的资源,所以会被拦截。
在这里插入图片描述
谷歌98版本之后,网站对私有服务发出请求前,浏览器都会自动发出一个“预检请求”,如果服务不认识预检请求,就不会正确返回,浏览器便会拦截所有预检请求不通过的请求。同时报跨域的错误。“preflight fail”。对于预检请求通过的请求,将能正常发送出去。
如果有遇到预检问题的小伙伴,需要服务端来进行支持。
即服务端对OPTION请求进行返回,同时添加“Access-Control-Allow-Private-Network: true”返回头。

解决方案

升级https

最好的解决方式当然是升级“安全的上下文”。同时对于https的升级,还有以下几种情况:
1.http网站访问私有ip服务端,需要客户端和服务端都升级为https协议。
2.http网站访问本地,即http://localhost,服务器可以配置TLS升级https,但是如果是本地服务,难道每个电脑都要单独配置个https服务器吗?并不,这种情况只需要升级网站为https即可。

PNA中,对于https网站发送http请求这种混合内容有单独的描述:
在这里插入图片描述
但是需要注意,这里有一个问题:谷歌浏览器的升级,是支持https中请求htttp://localhost这种混合内容的请求的。而对于其他没有使用该政策的浏览器,https中发出http这种混合内容的请求会被禁止发送。所以如果针对谷歌浏览器的这种应用场景进行了升级,那么其他不支持的浏览器在使用时会出现问题。

同时由于该混合内容的支持,其实第一个应用场景也可以是在https网站和私有ip服务端之间增加一个本地服务,通过https请求本地服务,再由本地服务转发到私有ip服务器上来解决,不过这样的话需要在每个使用的机器上都安装一个本地服务。

禁用设置

对于谷歌浏览器版本在94~101之间的,可以通过修改浏览器设置来使得http网站发出的对私有资源的请求可以成功发送。
设置方式:

在浏览器输入:chrome://flags/#block-insecure-private-network-requests
将Block insecure private network requests.项的Default改为Disabled,重启浏览器即可
(注意:仅支持94~101版本,此后的版本可能已经禁用了该设置)
实际测试中,我将谷歌版本更新到最新版本108.0.5359.95版本,此版本该设置已经弃用
在这里插入图片描述
Edge版本为107.0.1418.62 仍然有该设置
在这里插入图片描述

更新:
Edge版本108.0.1462.42 此项设置已被关闭
在这里插入图片描述

所以可能此项设置直到107版本依然可以使用。

2023.01.11 更新:
突然发现不是该项设置被关闭了,而是有的版本直接输入或者第一次输入chrome://flags/#block-insecure-private-network-requests找不到。
需要先在浏览器地址栏输入:chrome://flags进入flags页面
然后在Search中输入Block insecure private network requests
在这里插入图片描述
这样就能设置该选项了

更换浏览器

除了上面的方法,也可以更换非谷歌内核的浏览器,比如IE11、火狐浏览器、QQ浏览器等。

其他方法:

除了以上方法,在Chrome108中还可以如此设置:
修改注册表:计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome
新增一个字符串值,InsecurePrivateNetworkRequestsAllowed 值为1

PS:此项设置也用于禁用preflight预检请求
在这里插入图片描述
也有另一个flag可用于设置预检请求是否发送
以及:
设置chrome://flags/#unsafely-treat-insecure-origin-as-secure,改为enable,把不安全来源视为安全。
设置ip,以逗号分隔http://example.com,http://要访问本地的页面,并重启chrome。

PS:此项设置后,不会阻止设置的http页面,但是会照常发送preflight预检请求,所以后端服务需要处理好预检请求的回复。对OPTIONS请求给予允许的回包

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

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

相关文章

API接口开发其实特简单,Python Flask Web 框架教程来了

大家好,日常工作中,无论你是数据工程师、数据挖掘工程师,甚至数据分析人员,都不可避免的与他人进行数据交互,API接口提供数据是最常见的形式。 今天我给大家分享 Python Flask Web 框架教程,共计10个部分&…

Vue面试题你知道多少

✅作者简介:大家好我是hacker707,大家可以叫我hacker,新星计划第三季python赛道Top1🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:带你玩转Vue 💬推荐一款模拟面试、刷题神器&…

前端401错误 解决方法:响应拦截器

目录 1.该问题出现的原因 2.处理401问题的解决方案原理 3.使用响应拦截器解决问题 1.该问题出现的原因 在前后端分离项目中,最常见的是前端点击登录后,后端返回token字符串,这个token可以看作是一个“令牌”,就比如你去酒店办理…

Vue实战【调整Vue-element-admin中的菜单栏,并添加顶部模块菜单栏】

目录🌟前言🌟小伙伴们先看🌟实现思路🌟具体代码🌟最后🌟前言 因为最近在整合公司的项目,需要把所有系统里的功能集成到一个项目里,这样就导致菜单栏目录会特别的多,不便…

【JavaScript】手撕前端面试题:事件委托 | 判断URL是否合法 | 全排列

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

【Axure】Axure RP 9下载、安装、授权、汉化

目录一、Axure RP 9 下载二、Axure RP 9 安装三、Axure RP 9 授权四、Axure RP 9 汉化一、Axure RP 9 下载 1、Axure RP 9 下载地址:https://www.axure.com/release-history/rp9 2、其他版本下载地址 ①登录axure官网:https://www.axure.com/ ②拉到最下面找到相关…

很好看的爱心表白代码(动态)

分享几个好看的爱心表白代码❤️爱心代码❤️(C语言)❤️流动爱心❤️(htmlcssjs)❤️线条爱心❤️(htmlcssjs)❤️biu表白爱心❤️(htmlcssjs)❤️matlab爱心函数❤️(需…

Vue3+TS+Vite 入门指南

最近尝试上手 Vue3TSVite,对比起 Vue2 有些不适应,但还是真香~ 上手前先说下 Vue3 的一些变化吧~ Vue3 的变化 Vue3 带来的变化主要有以下几个方面: 使用层面 对比起 Vue2 启动速度快很多,新项目从 1s 升级到不到 500msvite.co…

Element-UI新手学习记录(一)

Layout 布局 通过基础的 24 分栏,迅速简便地创建布局。 span的作用 一行默认24个span,属性放在el-col中决定此元素占据多少span gutter属性 放在el-row中,给各个块之前设置间隔,但是是割的代码块的宽度。 offset属性 放在el…

小程序页面之间数据传递的四种方法

近期再使用小程序开发的时候遇到小程序页面和页面之间的数据传递问题。总结一下大致有以下几种方式实现页面数据传递。 最常见的就是路由传参,使用场景主要是页面汇总的少量数据的传递。以下都以Tarovue示例,原生、react或者uniapp同理,替换…

Pinia(二)了解和使用Store

Store Store 是保存状态(state)和业务逻辑的实体, store 不应该与我们的组件绑定. 换句话说, store 就是全局状态.store 有三个关键概念, 分别是 state, getters 和 actions, 这与 Vue 组件中的 data, computed 和 methods 是相对应的概念. 定义 store 通过 defineStore 函数…

Vue页面路由参数的传递和获取

文章目录1. 通过动态路由参数传递2. 通过query字符串传递3. props 隐式传递vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说较安全,同时地址栏中的地址也相对较短 它必须是先定义后使用,一般用…

关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】

目录问题描述原因分析问题解决总结今天在迁移旧项目时,出现了如下错误提示: Refused to display in a frame because it set X-Frame-Options to SAMEORIGIN问题描述 当前项目是一个生产环境正常运行的项目,由于我们要迁移服务器并且部署 k…

Pro2:修改div块的颜色

什么是JavaScript?实现目标实现代码实现效果实现方法💛作者主页:静Yu 🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者 💛社区地址:前端知识交…

html里面使用axios发送请求

html里面使用axios 效果展示&#xff1a; 代码展示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name…

Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本

前期回顾 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用_js斗地主_0.活在风浪里的博客-CSDN博客JS 实现 斗地主网页游戏https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501 通用版后台管理系统&#xff0c;如果…

前端vben框架中表格table问题汇总

1.template中的代码 <BasicTable register"registerTable" :canResize"false"><!-- 表格左边的插槽 --><template #tableTitle><div class"btn-group"><a-buttonghosttype"primary"preIcon"ant-desi…

【vue】vue脚手架以及vite介绍

内容一、VUECLI二、关于cli的原理三、vite四、使用vite五、vite处理css、less、postcss、ts六、vite对vue的支持&#xff1a;七、预打包&#xff1a;八、关于vite打包九、真实项目中不会一直使用npx的十、ESBuild十一、vite脚手架&#xff0c;一、VUECLI 先安装这个工具&#…

基于AI分词模型,构建一个简陋的Web应用

文章目录前言1. 效果展示2. 应用设计3. 实现3.1. lac分词模型的服务化部署3.2 使用Flask构建app4. 小结前言 内容纯属个人经验&#xff0c;若有不当或错误之处&#xff0c;还请见谅&#xff0c;欢迎指出。 文中大致介绍了&#xff0c;如何快捷地使用PaddleHub服务化部署一个简…

vue 时间格式总结及转换

vue框架中我们常常用el-date-picker标签来显示和选择时间&#xff0c;那么&#xff0c;常见的时间的格式包含年-月-日&#xff08;yyyy-MM-dd&#xff09;、年-月-日 时-分-秒&#xff08;yyyy-MM-dd HH-mm-ss&#xff09;、标准时间格式以及时间戳。那么今天我们就来总结一下常…