同源策略与跨域

目录

一、同源策略

二、Ajax跨域

1、JSONP跨域

2、proxy代理跨域

3、Cookie同源策略

---

一、同源策略

●同域/同源：指两个站点具有相同的协议、域名和端口。

  例：下列站点是否与http：//www.test.com同域名：

https://www.test.com      ————>不同域，因为协议不同
http://lib.test.com       ————>不同域，因为域名不同
http://test.com           ————>不同域，因为域名不同
http://www.test.com:8080  ————>不同域，因为端口号不同
http://www.test.com/demo/ ————>同域

●同域策略（Same Origin Policy）：

是Web层面上的安全策略，是浏览器的一个安全功能，它可以有效的保障用户计算机的本地安全和Web安全。同源策略规定不同域的客户端脚本在没有明确授权的情况下，不能读写对方资源。

也有不受同源策略限制的情况，比如页面中的链接，重定向以及表单提交是不会受到同源策略限制的。嵌入到Web页面中的<script src="...">、</script>、<img>、<link>、<iframe>等标签都可以加载跨域资源，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

●例：如果没有同源策略的话，当你通过浏览器登录淘宝站点的同时打开了一个恶意网站的页面，该恶意网站的JavaScript脚本就可以跨域读取你的淘宝站点数据。这就导致了用户隐私信息泄露等问题的发生。

二、Ajax跨域

Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，且XMLHttpRequest是一个纯粹的JavaScript对象，可以在后台进行交互过程，用户不宜察觉。

1、JSONP跨域

原理：<script>标签可以加载跨域的JavaScript脚本，并且被加载的脚本和当前文档属于同一个域，因此在文档中可以调用/访问脚本中的数据和函数。那么。我们只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。

JSONP就是通过<script>标签的跨域能力实现跨域数据的访问。请求动态生成的Javascript脚本同时带一个callback函数名作为参数，当这段脚本被加载到本地文档时，callback函数就被调用。

2、proxy代理跨域

原理：因为同源策略是浏览器实现的，如果请求不是从浏览器发出的，就不存在跨域问题了。

步骤：把访问其他域的请求替换为本域的请求->本域的请求由服务器端的动态脚本负责转发实际的请求。

●各种服务器的Reverse Proxy功能就可以很方便的实现请求的转发，如Apache mod_proxy板块。

●例：为了从http://localhost:8080访问http://localhost:8081/api可以将请求发往http://localhost:8080/api，再利用Apache服务器的Reverse Proxy功能做如下配置：

ProxyPass /api http://localhost:8081/api

3、Cookie同源策略

原理：Cookie中的同源只关注域名，忽略协议和端口号。因此http://localhost:8080和http://localhost:8081是同源的。