什么是同源策略--详解

概念

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。如果缺少了同源策略浏览器的安全使用会受到很大的影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

那么这种约定是什么样的呢？

域是什么

前面说，同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，那么域是什么？

在同源策略中，如果两个URL具有相同的协议（protocol），主机（host）和端口号（port），则它们被视为同源（origin）。域也就代表了为一个一组协议，主机和端口号组成。

网站资源都有域的概念，浏览器加载一个站点时，首先加载这个站点的首页，一般是index.html或者index.php等。页面加载，如果仅仅是加载一个index.html页面，那么该页面里面只有文本，最终浏览器只能呈现一个文本页面。丰富的多媒体信息无法在站点上面展现。

那么我们看到的各类元素丰富的网页是如何在浏览器端生成并呈现的？其实，index.html在被解析时，浏览器会识别页面源码中的img，script等标签，标签内部一般会有src属性，src属性一般是一个绝对的URL地址或者相对本域的地址。浏览器会识别各种情况，并最终得到该资源的唯一地址，加载该资源。具体的加载过程就是对该资源的URL发起一个获取数据的请求，也就是GET请求。各种丰富的资源组成整个页面，浏览器按照html语法指定的格式排列获取到各类资源，最终呈现一个完整的页面。因此一个网页是由很多次请求，获取众多资源形成的，整个浏览器在一次网页呈现中会有很多次GET请求获取各个标签下的src资源。

抓包一个网页呈现过程，会发现大量的加载css、js和图片类资源的get请求。

观察其中的请求目的地址，可以发现有两类，一个是本站的IP地址，这是本站的空间地址，即向本站自身请求资源，一般来说这个是必须的，访问资源由自身托管。另外一类是访问非本站的网段拉取数据。这类数据不是托管站内的，是在其他站点的。浏览器在页面呈现的过程，拉取非本站的资源，这就称“盗链”

准确的说，只有某些时候，这种跨站访问资源，才被称为盗链。假设B站点作为一个商业网站，有很多自主版权的图片，自身展示用于商业目的。而A站点，希望在自己的网站上面也展示这些图片，直接使用：<img src="http://b.com/photo.jpg"/>。通过

这样，大量的客户端在访问A站点时，实际上消耗了B站点的流量，而A站点却从中达成商业目的。从而不劳而获。这样的A站点着实令B站点不快的。那么如何禁止此类问题呢？

HTTP协议和标准的浏览器对于解决这个问题提供便利，浏览器在加载非本站的资源时，会增加一个头域，头域名字固定为：Origin?Referer?(这里其实我也不是很清楚)。
而在直接粘贴地址到浏览器地址栏访问时，请求的是本站的该url的页面，是不会有这个referer这个http头域的。使用Chrome浏览器的调试台，打开network标签可以看到每一个资源的加载过程，下面这个图是我自己做的一个商城项目（springBoot+Vue）首页的资源加载请求截图：

查看了别的博主说的，他的意思是Host指的是目的地址，Origin是源地址即ip+port（标志着这是一个跨域请求），Referer只是用来向目的地址说明自己的URL信息的。

我的项目中get_all_goods请求是从前端向后端发的一个数据请求，请求了接口，由于跨域了，我做了一个服务器代理，这个网页在浏览器中的请求详情如下图：

 查看了别的博主说的，他的意思是Host指的是目的地址，Origin是源地址即ip+port（标志着这是一个跨域请求），Referer只是用来向目的地址说明自己的URL信息的。

博主原话如下：

1、Host
表示当前请求要被发送的目的地，说白了就是当前请求发送到哪里，host代表的是接收这个请求的目的地的host，仅包括域名和端口号，如test.pay.com:8090。在任何类型请求中，request都会包含此header信息。

2、Origin
表示当前请求资源所在页面的协议和域名，用来说明请求从哪里发起的，如http://test.my.com，
特别注意：
这个参数一般只存在于CORS跨域请求中，普通请求没有这个header！
如果有Origin参数，我们可以看到response有对应的header：Access-Control-Allow-Origin

3、Referer
表示当前请求资源所在页面的完整路径：协议+域名+查询参数（注意不包含锚点信息），如http://test.my.com/p/GHB2021081702-001/index.html?a=1&b=2，所有类型的请求都包含此header。
原文链接：https://blog.csdn.net/xiaolinlife/article/details/119825880

按照这个博主的意思，也就是说，这个Origin标签正是为了告诉请求响应者（被拉取资源的服务端），本次请求的引用页是谁，资源提供端可以分析这个引用者是否“友好”，是否允许其“引用”，对于不允许访问的引用者，可以不提供图片，这样访问者在页面上就只能看到一个图片无法加载的浏览器默认占位的警告图片，甚至服务端可以返回一个默认的提醒勿盗链的提示图片。

一般的站点或者静态资源托管站点都提供防盗链的设置，也就是让服务端识别指定的Origin，在服务端接收到请求时，通过匹配Origin与配置，对于指定放行，对于其他Origin视为盗链。

根据上述内容，我们可总结出来跨域访问原理。

跨域访问原理

JS脚本在浏览器端发起的请求其他域（名）下的网站数据的HTTP请求。

这里要与Origin区分开，Origin是浏览器的行为，所有浏览器发出的请求都不会存在安全风险。而由网页加载的脚本发起请求则会不可控，甚至可以截获用户数据传输到其他站点。Origin方式拉取其他网站的数据也是跨域，但是这个是由浏览器请求整个资源，资源请求到后，客户端的脚本并不能操纵这份数据，只能用来呈现。但是很多时候，我们都需要发起请求到其他站点动态获取数据，并将获取到底数据进行进一步的处理，这也就是跨域访问的需求。

 JSONP跨域原理

jsonp的实现原理为：虽然浏览器限制了页面直接向非同源的服务器发送ajax请求，但是并没有限制页面向非同源的服务器请求JS脚本，就像我们可以使用标签请求任意域上图片一样。

ajax详解1

ajax详解2

<script type="text/javascript" src="http://api.com/jsexample.js"></script>

当使用jsonp方式来实现跨域请求时，需要服务端进行配合。因为一般使用ajax请求从服务端返回的数据都是json对象，但是我们需要的是JS脚本，这就需要服务端将返回的数据形式变成JS脚本形式，所以jsonp是一种约定，是前后端为了实现跨域达成的一种协议。

加载过来的脚本中如果有定义的函数或者接口，可以在本地使用，这也是我们用得最多的脚本加载方式。但是这个加载到本地脚本是不能被修改和处理的，只能是引用。

跨域的产生原因及解决方案

同源策略作用举例

 下面举一个例子说明针对接口的请求没有同源策略会怎么样？

cookie大家应该知道，一般用来处理登录等场景，目的是让服务端知道谁发出的这次请求。如果你请求了接口进行登录，服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中，服务端就能知道这个用户已经登录过了。知道这个之后，我们来看场景：
1.某11到了，于是打开了买买买网站www.maimaimai.com，然后登录成功，然后准备一番剁手操作。
2.期间你的好朋友突然给你发了一个你懂得的网站链接www.nidongde.com，一脸yin笑地跟你说：“你懂的”，你毫不犹豫打开了。
3.你饶有兴致地浏览着www.nidongde.com！由于没有同源策略的限制，它向www.maimaimai.com发起了请求！前面我们说过“服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中”，这样一来，这个不法网站就相当于登录了你的账号，可以为所欲为了！

如上图所示，跨域访问限制的作用流程大致如下：

1、 浏览器发送跨域请求
2、 接收response数据
3、 检查响应头
（1）如果响应头中没有允许跨域访问的配置，则不加载，并报出响应异常
（2）如果响应头中有允许跨域访问的设置，正常加载数据

即，同源策略并不是浏览器不让请求发出去、或者后端拒绝返回数据。实际情况是请求正常发出去了，后端也正常相应了，只不过数据到了浏览器后浏览器不去作用加载而是丢弃了。