网络安全：跨域原理及如何实现跨域

前言

我们在解决一个问题的时候应该先去了解这个问题是如何产生的，为什么会有跨域的存在呢？其实，最终的罪魁祸首都是浏览器的同源策略，浏览器的同源策略限制我们只能在相同的协议、IP地址、端口号相同，如果有任何一个不通，都不能相互的获取数据。并且，http和https之间也存在跨域，因为https一般采用的是443端口，http采用的是80端口或者其他。

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制内容有：

1.Cookie、LocalStorage、IndexedDB 等存储性内容

2.DOM 节点

3.AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源：

{img src=XXX}

{link href=XXX}

{script src=XXX}

常见的跨域场景

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：

其实，跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了，常见的9种跨域方案，主要有： 通过jsonp跨域、 document.domain + iframe跨域、 location.hash + iframe、window.name + iframe跨域、postMessage跨域、跨域资源共享（CORS）、nginx代理跨域、nodejs中间件代理跨域、WebSocket协议跨域9种，并有着各自独特的跨域原理。

一：JSONP实现跨域

原理：jsonp实现跨域的原