同源策略

跨域方式实现原理

前后端请求经常需要跨域，拿什么是跨域，什么是同域？

同源策略

同源策略是跨越问题的源头，在客户端编程语言中，如javascript和ActionScript，同源策略是一个很重要的安全理念，他的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。如：A网站是一家银行，用户登录后又去浏览其他网站，若其他网站可读取A网站的Cookie，信息可能会泄露。若Cookie包含隐私（比如存款总额），这些可能会泄露。更可怕的是，Cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源策略的限制。由此可见，“同源策略”是必须的，否则Cookie可以共享，互联网就毫无安全可言。

同源策略是一种约定，他是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响。可以说web是创建在同源策略基础上的。浏览器只是针对同源策略的一种实现。

所谓同源是指，域名，协议，端口号都相同。

当一个浏览器的两个tab页中分别打开百度和谷歌的页面，若浏览器的百度tab执行一个脚本时检查出这个脚本是同源时才会被执行。若非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

非同源

同源策略限制内容有：

• Cookie、LocalStorage、IndexedDB 等存储性内容
• DOM 节点
• AJAX 请求发送后，结果被浏览器拦截了

补充：同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

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

• <img src=XXX>
• <link href=XXX>
• <script src=XXX>

特别说明两点：

第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

作者：浪里行舟
链接：https://juejin.im/post/5c23993de51d457b8c1f4ee1
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

跨域方式

JSONP

JSONP是JSON with Padding的简写，是应用JSON实现服务器与客户端跨域通信常用的方法，最大特点是简单实用，老式浏览器全部支持，服务器改造非常小。但是只支持get方法，且易遭受XSS攻击。

它的基本思想是，网页通过添加一个