什么是同源策略
同源策略(Same origin policy)是一种约定,是由Netscape提出的一个著名的安全策略,是浏览器最核心也基本的安全功能。
同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击,所谓同源是指协议+域名+端口 三者相同,即便是两个不同的域名指向同一个ip地址,也不是同源。
什么是跨域
-
广义
- 资源跳转:a链接、重定向、表单提交
- 资源嵌入:
<link>
、<script>
、<img>
、<frame>
等DOM标签,还有样式中的background: url()
、@font-face()
等文件外链 - 脚本请求:js发起的Ajax请求、DOM和js对象的跨域操作
-
狭义
通常说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景,限制的是这几种行为:
- cookie、localStorage、sessionStorage和indexDB无法读取
- DOM和js对象无法获得
- Ajax请求不能发送
简单的说:由于浏览器的同源策略,即出现协议、域名、端口有一种不一致的情况下,就会出现跨域,属于浏览器的一种安全限制
XSS攻击
跨站脚本攻击,简单理解就是攻击者在网页中嵌入客户端脚本(例如javascript
),当用户浏览此网页时,脚本就会在浏览器上执行,比如获取用户的cookie
,导航到恶意网站,携带木马等
CSFR攻击
跨站请求伪造,简单理解就是攻击者盗用了你的身份,以你的名义发送恶意请求,比如以你的名字发送邮件、发消息、盗取你的账号、甚至用于购买商品、虚拟货币转账等等
跨域解决方案
JSONP
:一些标签比如script
、img
获取跨域资源是没有限制的,前端发送src
是一个带参数地址来实现跨域通信,缺点是只能实现get
请求- 空的
iframe + form
:实现post
请求,创建一个空的iframe
,创建form
表单,利用js
设置表单属性以及提交的值或者需要操作的函数,然后append
进iframe
不显示,执行表单提交操作,再remove
掉,达到post
请求的效果 - 跨域资源共享(
CORS
):只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置 nginx
反向代理接口跨域:在服务器上做代理,将请求转发到真正的后端域名上
参考链接
https://segmentfault.com/a/1190000015597029