同源策略


同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 ——MDN

通俗点，假如 JS 运行在源A，那么就只能获取源A的数据，不允许获取源B的数据，即不允许跨域。这就是同源策略。协议、域名、端口有任何一个不同，都被当作是不同的域

例子：

  • 假如 某钓鱼网站diaoyu.com/index.html 引用了bilibili.com/1.js
  • 那么 1.js 运行在 bilibili.com
  • 钓鱼网站从 bilibili.com 下载了 1.js ，但这和钓鱼网站没有任何关系。
  • 因此 1.js 就只能获取 bilibili.com 的数据，不能获取 qq.com 或者 baidu.com 的数据

浏览器是故意这样设计，目的是为了保护用户隐私。

什么是同源？

定义：

  • 源指的是，由 协议+域名+端口号 这些组成！
  • 同源，如果两个url的 协议、域名和端口号完全一致，那么这两个就是同源。
    • 如： http://qq.com 、 https://www.baidu.com 不同源
    • https://baidu.com 、 https://www.baidu.com 不同源
    • 必须完全一致才算同源
  • 不同源的页面之间，不准相互访问数据。

什么是跨域？

跨域指的是同源策略控制不同源之间的交互。 如果JS运行在源A里, 那么就只能获取源A的数据, 不能获取源B的数据. 即源A获取源B的数据叫做跨域.

如何解决跨域的问题？

  • 如果需要允许跨域访问，可以使用CORS来允许跨域访问。


CORS 跨域


跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种机制，该机制使用附加的 HTTP 头来告诉浏览器，准许运行在一个源上的Web应用访问位于另一不同源选定的资源。

使用方法（语法）：
只需要在响应头里写上 Access-Control-Allow-Origin:需要跨域的源就可以实现跨域了。

  1. response.setHeader('Access-Control-Allow-Origin:https','运行指定代码')

JSONP 跨域

在一些情况下，要求不允许使用 CORS 就可以跨域，在这样奇葩的要求下，就出现了 JSONP ，这是面对这种情况的解决方案。

原理
JSONP 就是利用 <script> 没有跨域限制的“漏洞”，来达到与第三方通讯的目的，这需要客户端和服务端配合。

过程

  • 客户端在HTML中动态生成 script 标签，可以通过”src”中引入请求的URL+回调函数。
  • 请求服务器返回的数据会交由回调函数处理。（实现跨域请求）
  • 服务端收到请求后，首先获取客户端要回调的函数名。
  • 生成JavaScript代码段返回给浏览器。
  • 浏览器获取到返回结果后调用回调函数完成任务。
  1. //动态生成script标签
  2. const script = document.createElement("script");
  3. //设置script的src
  4. script.src = `${url}`
  5. //使用后即销毁
  6. script.onload = () =>{
  7.     script.remove();
  8. }
  9. //把这个<script>标签放到body中
  10. document.body.appendChild(script);

优点：
使用简便，没有兼容性。
缺点：
只支持GET请求；
请求过程中可能会夹带恶意代码，可能会受到XSS攻击。

【资料来】 跨域请求之 JSONP 和 CORS 浏览器的同源策略