same-origin policy 和 cross-origin resource sharing(CORS)

最新推荐文章于 2025-06-05 02:16:04 发布
最新推荐文章于 2025-06-05 02:16:04 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29454347/article/details/98096890
本文深入解析同源策略的原理与应用，探讨浏览器如何保障网页安全，防止跨站请求伪造。同时，详述CORS机制，解释如何通过设置HTTP头部实现跨域资源共享，涵盖预检请求、响应头及常见问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 同源策略和cors的信息量太多。网络上很少有全面总结的文章。学习同源策略最大的收获是，之前忽略了浏览器在安全中的重要性，总以为安全主要靠服务端。浏览器（协议规范）和服务端都非常重要。

 

host和domain

host

https://url.spec.whatwg.org/#concept-host

domain

https://url.spec.whatwg.org/#concept-domain

 根据以上的定义，domain是“域名“，比如baidu.com，host可以是domain，或者ip地址，或者opaque host。

显然对于大部分开发情况，domain等于host，就是一个域名

 

opaque host

资料甚少，参考https://github.com/w3c/wpub/issues/321

比如file://这种host就是opaque host的一种，与常见的domain不一样。不太需要关注。

 

origin的定义

源的定义：

https://html.spec.whatwg.org/multipage/origin.html#concept-origin

基本上可以理解为

协议(http/https/...) + host(domain) + port

只能3者都一样，才叫同源。

x.baidu.com 与 y.baidu.com  就不是同源。

 

同源策略

同源策略是互联网安全的基石。一个浏览器tab打开了源A，另一个tab打开了源B，源A的tab不能访问到源B tab的数据，包括cookie数据和dom数据。浏览器提供了这样的安全保障。

但是HTML除了cookie和dom，还有：

  • JavaScript
  • img，vedio
  • css
  • 跨域请求（源A向源B请求数据）
  • document.domain API可以修改当前页面的domain

违反了同源策略的访问，统称为跨域访问

详细的定义可以查阅：

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

 

跨域访问

按照MDN的说法：

  • 跨域写请求一般是被允许的（比如form提交）（这里的“被允许”只是浏览器不会主动阻止这次请求）
  • 跨域embed一般是被允许的（同上）
  • 跨域读请求一般是不允许的（浏览器和服务端都有安全措施）。于是有一些人鸡贼的想用embed来做跨域的读。

 

CORS

cross-origin resource sharing. 通过JS脚本来发起请求（AJAX或者fetch API， 与AJAX大同小异）

在互联网上，有的服务端愿意开放自己的数据，有的不愿意

CORS规范了不同情况下浏览器和服务端的行为。

详细说明：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

 

CORS与origin请求头

在CORS的说明中，“简单”请求不会触发CORS预检测机制。

要求“简单”请求的请求头只能有以下类型

 

 但是浏览器发现一个请求是跨域请求时，一定会在请求中加入头部

origin

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin

服务端可以根据这个头部做出相应处理。没法用脚本阻止浏览器添加此头部。

 

CORS与预检测请求

不是“简单”请求的脚本跨域请求，都是预检测请求。浏览器会执行预检测机制。

预检测机制会先用option method请求服务器，看服务端是否支持当前origin的跨域请求.

不管是简单请求还是预检测请求，涉及到的http头部常见的有：

Access-Control-Allow-Origin
允许跨域访问的域
Access-Control-Max-Age
在多长的时间内，跨域访问不再需要预检测机制
Access-Control-Allow-Headers
允许跨域时含有这些请求header

 

不管是简单跨域请求还是预检测跨域请求，都会发送http请求到服务端。

收到服务端返回后，如果：

  1. 返回头没有任何跨域相关的header，视为不允许跨域
  2. 返回头中有跨域相关的header，且允许此次跨域，一切正常。
  3. 返回头中有跨域相关的header，且不予许此次跨域，浏览器报错

即使是被服务端的返回header拒绝跨域请求，通过fiddler抓包，可以看到整个http请求是已经完成的，数据body也都传输到了浏览器。

 

Chrome浏览器的“Provisional headers are shown”

如下图，一些请求在chrome调试器中看到请求头被标上了"provisional headers are shown", 直译就是“显示的是临时的请求头”

出现这个提示最常见的情况下数据有缓存，不过也有其他情况：

  1. 浏览器装了广告拦截插件，广告请求被拦截了
  2. 一个请求还没完成被用户取消了
  3. 服务端长时间没反应，超时了

还要一种情况与跨域有关。在跨域预处理中，会先发送options请求，但是如果服务端不能正确处理options请求，会导致请求超时，出现这个警告。

通过chrome自带插件可以查看chrome的log，看看发生了什么。

chrome://net-export/

 

对embed的疑问

同源策略中提到一个概念叫embed cross-origin。对于这些访问，浏览器就“友好”多了。

 

那么像上面说的，有人在下面的src中填入一个原本会被CORS阻挡住的连接，是不是就能跳过CORS的限制？

<img src="">

过了浏览器还有服务端。

一般服务端默认都有如下配置：

  • 将png,gif,js, css这些可公开的数据, 允许任何人任何方式访问
  • 其他后缀的访问，比如XXX.do, XXX.jsp，哪怕用embed的方式请求，也会被服务端拦截，拒绝访问。CSRF就是手段之一。

注意：

跨域相关的返回header，比如access-control-allow-origin，对embed请求无效。这也是JSONP技术出现的原因。

 

图片被盗链

如果img没有CORS的限制，是不是我可以去随意用img标签盗链别人的图片贴在我自己的网站上？

当然不。如果一个站点不想被别人盗链图片，他就会在服务端里设置：

对于script，png，gif等embed请求，统统检测请求者的referer（为什么不是检测origin？因为img不是脚本跨域请求，浏览器不会自动给这次请求加origin请求头）。

这些embed请求，浏览器都会自动加上referer请求头。

不过referer涉及到了用户的浏览记录隐私，使用下面的标签可以让浏览器不加referer请求头。

<meta name="referrer" content="no-referrer">

为了防止盗链，服务端的逻辑可以是：

先保证自己站点的embed请求都有referfer。服务端再检测所有请求的referer，如果没有referer或者referer不对，都拦截。

图片盗链还有另外一种思路：图片都使用随机名字，并且定期更改。

crossorigin属性

<img>， <script>  等标签有一个crossorigin属性

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

加上这个标签，把embed请求变成CORS请求。

谁会这么做呢？要知道CORS比embed有更多的约束。

当然是合法的访问者愿意这么做啦。

服务端不提供embed方式的图片数据，访问者统统要用CORS的方式，并且服务端配置了跨域origin的白名单。

 

JS与crossorigin

embed方式引入的跨域脚本，如果有异常，不会在window.onerror 中抛出。这是出于安全考虑。

因为按照同源策略，脚本是可以访问到本地的同源数据（cookie等）。

如果想要这些异常信息，需要用crossorigin属性，走CORS请求。

 

document.domain的修改

api document.domain支持修改当前doucment的domain值。由于同源的判断是基于这个domain属性的，因此修改有如下的限制：

这段话提到了一个概念：effective domain

https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain

 

iframe

iframe也收到同源策略的保护

iframe是embed的一种，因此需要服务端做iframe的安全配置。

参考：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options 

access-control-allow-origin 返回header对于iframe无效（ifram也是embed的一种）

 

window.open

window.open 方法可以打开一个新的tab，并放回一个window对象。不过这个window对象也受同源策略的保护。

跨域脚本只允许访问该对象中的部分属性和部分方法。

 

具体参考：

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Cross-origin_script_API_access\

 

不允许用脚本修改的请求header

最重要的是origin和referer，是不能通过脚本修改的。

https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%A6%81%E6%AD%A2%E4%BF%AE%E6%94%B9%E7%9A%84%E6%B6%88%E6%81%AF%E9%A6%96%E9%83%A8

 

CORB

https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

尹星明
关注
理解同源（Same-Origin Policy）和跨域(CORS)
python_neophyte的博客
09-02 2228
写在前面 本文作为我这几天阅读相关文章的一个小结。 什么是浏览器的同源策略？ 同源策略是浏览器的一种为了保护用户信息安全而制订的安全策略。 为什么要有同源保护？ 既然是一种安全策略，那肯定是没有它的时候，会有安全问题，也就是说，没有它 = 不安全，有它 = 有了基本的安全保障，下面为了解释没有同源保护存在时可能出现的安全问题，先解释cookie。 什么是cookie？ 学习web开发的朋友，或者cs从业人员肯定都知道cookie这个东西的存在。简单来说，它是用户的一个会员卡，就好像在现实生活中，去超市（超市
前端报错`Cross-Origin Request Blocked`的CORS配置指南
shejizuopin的博客
05-18 1163
在前端开发中，Cross-Origin Request Blocked错误是由于浏览器的同源策略阻止跨域请求所致。本文通过优快云技术社区的实战案例，总结了解决该错误的实用技巧。CORS（跨域资源共享）允许服务器声明哪些源可以访问其资源。常见错误包括缺少CORS头、预检请求失败和携带Cookie不生效。解决方案包括在服务器端设置正确的CORS头、处理OPTIONS请求、确保前后端配置正确，以及使用前端代理服务器。通过这些方法，开发者可以有效解决跨域问题，提升开发效率。
跨域资源共享
Spontaneous_0的博客
02-03 1161
跨域资源共享
同源策略（Same-Origin Policy）
qq_74114417的博客
12-14 3080
同源策略是Web浏览器的一种安全机制，用于限制来自不同源的文档或脚本如何与另一个源的资源进行交互。这种策略有助于防止恶意网站读取另一个网站的敏感数据，例如用户的登录凭据或私人信息。通过确保只有来自相同源的脚本才能访问和操作DOM、发送AJAX请求或读取Cookie等，同源策略为Web应用程序提供了基本的安全保障。Web内容的源由用于访问它的URL的方案（协议）、主机名（域名）和端口定义。即源由协议、域名和端口组成。在页面中通过 about:blank 或 javascript:；
Cross-Origin-Opener-Policy header has been ignored…
最新发布
weixin_46084533的博客
06-05 1112
下面分别针对这两类问题给出解决思路和操作步骤。
30 分钟理解 CORB 是什么
weixin_34130389的博客
08-23 533
写在前面 前些日子在调试 bug 的时候，偶然发现这么一个警告： Cross-Origin Read Blocking (CORB) blocked cross-origin response www.chromium.org/ with MIME type text/html. See www.chromestatus.com/feature/562… for more details. 我...
【HTTP完全注解】又跨域了？一文解释清楚跨源资源共享（cors）
汪啊汪
03-13 2299
wangjunliang.com需要请求访问wangawang.com的内容，由于同源机制的存在， XMLHttpRequest（XHR）或 Fetch API是不允许发起跨域的请求的，当然我们可以通过代理或Jsonp的方式来解决，但每次搭建代理过于麻烦并且维护成本很大，而Jsonp呢？的资源，并发起的是简单请求，此时请求只要满足了服务端相关CORS的响应标头配置，请求则能正常访问资源，以下为客户端与服务器端交互示例。（预检请求）的响应的缓存时间，对于简单的跨源请求的缓存策略通常由HTTP缓存头部（如。
CORS跨域资源共享(一)：模拟跨域请求以及结果分析，理解同源策略【享学Spring MVC】
架构师：通透，才能写出好代码！
09-20 3605
前言 在我们日常的项目开发时使用AJAX，传统的Ajax请求只能获取在同一个域名下面的资源，但是HTML5打破了这个限制，允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的，比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执行或渲染。主要原因还是出于安全考虑，浏览器会限制脚本中发起的跨站请求。(同源策略， 即JavaScript或Co...
什么是同源策略（Same-Origin Policy）？它对 AJAX 有什么影响？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-30 734
引言同源策略基本概念定义作用基本规则对 AJAX 的影响为什么 AJAX 受限于同源策略AJAX 请求失败的示例解决方案示例一：JSONP（JSON with Padding）示例二：CORS（Cross-Origin Resource Sharing）示例三：设置 CORS 响应头示例四：使用 Fetch API示例五：使用代理服务器实际工作中的使用技巧技巧一：正确设置 Access-Control-Allow-Origin技巧二：处理预检请求技巧三：使用代理服务器。
已解决：No 'Access-Control-Allow-Origin'跨域问题
08-19
CORS（Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头部来告诉浏览器允许一个域上的网页访问另一个域上的资源。 在Tomcat服务器的`conf/web.xml`配置文件中，你可以添加以下CORS Filter配置： ``...
Allow-Control-Allow-Origin_1_0_3_0.crx.zip
01-20
CORS（Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头来告诉浏览器允许一个域上的网页访问另一个域上的资源。在服务器端，通过设置响应头 "Access-Control-Allow-Origin"，可以指定哪些来源的请求...
[http] 同源策略 与 CORS
aefg95955的博客
08-21 162
同源策略 如果协议，端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。 相对 http://store.company.com/dir/page.html 同源检测的示例: URL 结果 原因 http://store.company.com/dir2/other.html 成功 dir2/other.html http://store.comp...
跨域访问技术CORS(Cross-Origin Resource Sharing)简介
weixin_34302798的博客
04-07 779
为什么要用CORS？ CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 首先需要明白什么是Same-origin Policy呢？ 　　简单地说，在一个浏览器中访问的网站不能访问另一个网站中的数据，除非这两个网站具有相同的O...
同源策略与跨越及解决方案,JSONP技术,跨域资源共享CORS,代理服务器技术
qq_63322025的博客
09-21 345
同源策略与跨越及解决方案,JSONP技术,跨域资源共享CORS,代理服务器技术
新的跨域策略：COOP、COEP
奇舞周刊
09-02 1505
Web 资源可组合性是 Web 的非常强大的一项能力，你可以轻而易举的加载来自不同来源的资源来增强网页的功能，例如：font、image、video 等等。这些服务非常强大，也很方便，但...
什么是浏览器同源策略（Same-Origin Policy）？
xingyu_qie的专栏
08-06 2093
协议：如httphttps。域名：如。端口：如80（http 默认端口）或443（https 默认端口）。如果两个 URL 的协议、域名和端口都相同，则它们被认为是同源的。和是同源的。和不是同源的（不同的协议）。和不是同源的（不同的域名）。和不是同源的（不同的端口）。浏览器同源策略是 Web 安全的重要基石，尽管有时候它可能会限制开发者的操作，但其存在的主要目的是为了保护用户免受潜在的安全威胁。
# CROS（cross origin resource share）跨域请求解决方案
weixin_38410609的博客
12-12 233
在做项目时，我们经常会遇到跨域的问题。什么是跨域？如何解决？这是我们应该了解并且掌握的一个知识点。下面的图就是我们经常在浏览器会遇到的报错信息。已拦截跨源请求：同源策略禁止读取位于 http://localhost:63110/system/dictionary/all 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin' ）。状态码：200。
新的跨域策略：使用COOP、COEP为浏览器创建更安全的环境
Yvette Lau的专栏
08-05 913
Web 资源可组合性是 Web 的非常强大的一项能力，你可以轻而易举的加载来自不同来源的资源来增强网页的功能，例如：font、image、video 等等。这些服务非常强大，也很方便，但...
JavaScript 中的 Window.open() 用法详解
热门推荐
孙悟空
05-30 4万+
本文介绍了如何使用Window.open()方法，列举了该方法中各个参数的含义，以及如何在当前窗口、新窗口、独立窗口打开地址
nginx strict-origin-when-cross-origin 如何处理
11-15
`nginx strict-origin-when-cross-origin` 是 Nginx 中的一个配置选项，它用于处理跨域资源共享（Cross-Origin Resource Sharing, CORS）。这个指令用于控制服务器如何在响应来自不同源（origin）的请求时应用同源策略（Same-Origin Policy）。当浏览器发送跨域请求时，`strict-origin` 指令会限制响应头中的 `Access-Control-Allow-Origin` 设置为只允许请求的原始来源。 启用 `strict-origin-when-cross-origin` 后，如果请求是一个标准的跨域请求（即，它不包含 `Origin` 请求头），Nginx 将仅允许响应给同源的请求。然而，如果是通过 `POST`, `PUT`, `PATCH` 或者 `DELETE` 等需要身份验证的 HTTP 方法进行的跨域请求，并且包含了有效的 `Origin` 请求头，那么 `Access-Control-Allow-Origin` 就会被设置为请求头中的 `Origin` 值，实现了更宽松的安全策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值