跨域.md 3.9 KB
title: 跨域 author: Gamehu tags:
- 跨域 categories:
- 工作 date: 2018-08-20 10:46:00
刚好这段时间对接其他产品，刚好处理了一下跨域的问题，借此机会稍微更加了解一下跨域(Cross-origin resource sharing)。
搬运搬运...
首先什么是同源策略？
同源策略是一种Web浏览器安全性机制，旨在防止网站相互攻击。
同源策略限制一个源上的脚本访问另一源的数据。源由URI方案，域和端口号组成。
同源策略是一种限制性的跨域规范，它限制了网站与源域外部资源进行交互的能力。起源于多年前的策略是针对潜在的恶意跨域交互（例如，一个网站从另一个网站窃取私人数据）做出的响应。通常，它允许一个域向其他域发出请求，但不允许访问响应。
同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage、IndexedDB 等存储
2.) DOM查询
3.) AJAX 请求
但是有三个标签是允许跨域加载资源：
<img src=XXX>
<link href=XXX>
<script src=XXX>
常见跨域场景
URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径 允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同 不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名 不允许
跨域解决方案
1、 通过jsonp跨域 2、 iframe跨域 5、 postMessage跨域 6、 跨域资源共享（CORS） 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域
比较抱歉的是我只用过nginx代理跨域、跨域资源共享（CORS）、WebSocket协议跨域...。
什么是CORS（跨域资源共享）？
在大多数情况下，在用户浏览器中运行的脚本仅需要访问源相同的资源（请考虑首先对服务JavaScript代码的同一后端进行API调用）。因此，JavaScript通常无法访问其他来源的资源，这对安全性而言是一件好事。但是有些情况下需要跨域请求的。例如，不同系统间的一些对接。解决该问题就需要实现CORS，跨域资源共享（CORS）是一种浏览器机制，可实现对位于给定域外部的资源的受控访问。
CORS如何运作
如果不需要cookie的话，整个CORS通信过程都是浏览器自动完成的，前端不需要做额外的编码。浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，复杂请求还会多一次预检的请求，但我们是不用感知的。因此，实现CORS通信的关键是服务器开启CORS。
{% asset_img b.png %}
参考
{% blockquote KRISTOPHER SANDOVAL https://nordicapis.com/what-is-cors-cross-origin-resource-sharing/ What is CORS %} {% endblockquote %}
{% blockquote w3c https://www.w3.org/TR/2014/REC-cors-20140116/ Cross-Origin Resource Sharing %} {% endblockquote %} {% blockquote 阮一峰 https://www.ruanyifeng.com/blog/2016/04/cors.html 跨域资源共享 CORS 详解 %} {% endblockquote %}
本文引用的内容，如有侵权请联系我删除，给您带来的不便我很抱歉。