1 同源策略
浏览器的同源策略 - Web 安全 | MDNdeveloper.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
同源策略是一种重要的安全机制,它限制一个源加载的文档或脚本如何与另一个源的资源进行交互。
同源政策是网站安全的基础。https://domain-a.com只能访问自己网站里的资源(图片、影片、节目码等),不允许网站https://domain-b.com来访问。想要访问跨来源资源必须在某些特定情况下才被允许。
源的定义
如果两个 URL 的协议、端口(如果有指定的话)和主机都相同的话,则这两个 URL 是同源的。这个方案也被称为“协议/主机/端口元组”,或者直接是“元组”。(“元组”是指一组项目构成的整体,具有双重/三重/四重/五重等通用形式。)
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:
| URL | 结果 | 原因 |
|---|---|---|
| http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
| http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
| https://store.company.com/secure.html | 失败 | 协议不同 |
| http://store.company.com:81/dir/etc.html | 失败 | 端口不同(http:// 默认端口是 80) |
| http://news.company.com/dir/other.html | 失败 | 主机不同 |
同源政策是浏览器专属,所以才会发生用postman可以获取 API 响应但放到网站上就会失败的情况。
2 CROS
跨源资源共享(CORS) - HTTP | MDNdeveloper.mozilla.org/zh-CN/docs/Web/HTTP/CORS
CORS 翻译成中文就是跨网域资源共享,所以你可以用我的资源我也可以用你的
为什么会有CORS
同源政策虽然不错,因为他阻止了一些恶意的脚本攻击,但总不会每个跨网域都是恶意的;也可能没有一间公司拥有所有的资源,有时还是必须串接第三方资源,例如Facebook API、Google Map、政府发布的公开API等。
跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。
跨源 HTTP 请求的一个例子:运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。即在a域名上请求b域名的资源。
出于安全性,浏览器限制脚本内发起的跨源 HTTP 请求。例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。
如果服务器不允许跨域,则能在浏览器开发者工具中看到以下报错
上面这些报错要解决需要在web服务器端加上相关的响应头配置,如Access-Control-Allow-Origin = http://localhost:8000表示运行http://localhost:8000跨源请求本机的资源。Access-Control-Allow-Origin = *表示server端接收所有的跨源请求。
3 Access-Control-Allow-Private-Network
https://wicg.github.io/private-network-access/
最近环境进行了一波迁移,迁移后发现通过web不能正常上传文件到服务器上了。F12检查报错如下。The request client is not a secure context and the resource is in more-private address space private。并且显示是cors error
一番调查发现原因是因为在CORS-RFC1918中规定了local、private、public三个地址空间。不同地址空间之间访问会被认为是跨域。在我的环境中server端网段为172.x.x.x属于private空间,请求server资源的client端地址为6.x.x.x为public空间。因此会报错跨域。local、private地址范围如下,其余都属于public地址空间。
google浏览器一向对安全限制较为严格,因此最新版本都启用了对跨地址空间访问的检查。firefox浏览器不存在该问题。
要解决这个问题有三种方法
- google浏览器中访问以下地址,关闭掉相关检测,重启浏览器
chrome://flags/#block-insecure-private-network-requests
2. server端和请求server端的节点都启用https
3. server端加上Access-Control-Allow-Private-Network: true的响应字段,允许跨地址空间访问