浏览器跨域

Posted 2022-06-30 qiyangliu

浏览器同源策略：同源指协议、域名、端口皆相同

使用同源策略的原因：出于安全考虑，主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】

=>跨域主要时为了阻止用户读取到另一个域下的内容

请求跨域的结果是，请求被发送出去了，但是相应被浏览器拦截了。

跨域的几种方式：

• JSONP（JSON with Padding）
• CORS（跨域资源共享）
• postMessage
• document.domain

1、JSONP：JSONP是JSON的一种使用模式

　　原理：利用<script>标签没有跨域限制的漏洞，通过<script>指向ige需要访问的地址并提供一个回调函数来接收数据

1 <script src="http://domain/api?param1=a&parma2=b&callback=jsonp"></script>
2 <script>
3     function jsonp(data)
4 
5     
6 </script>

　　缺点：仅限于get请求

　　数据接收原理：jsonP本质上是通过将情趣模拟为<script>加载，通常带有其他参数和一个callback函数名，然后服务器根据接收到的参数里的回调函数名如　　 callback(data...)，拼装数据导函数里，然后脚本加载成功，执行本地同名回调函数，从而达到跨域。

2、CORS（跨域资源共享）

　　CORS需要浏览器和后端同时支持

　　浏览器会自动进行CORS通信，实现CORS通信的关键是通过后端，只要后端实现了CORS，就实现了跨域

　　服务端设置Access-Control-Allow-Origin就可以开启CORS，该属性表示哪些域名可以访问资源，若设置通配符则表示所有网站都可以访问资源

3、postMessage

　　常用于获取嵌入页面中的第三方页面的数据，一个页面发消息，另一个页面判断来源并接收消息

　　1）发送端：

　　window.parent.postMessage(‘message‘,‘http://test.com‘);

　　2）接收端

　　var mc = new MessageChannel();

　　mc.addEventListener(‘message‘,event=>

　　　　var origin = event.origin || event.originalEvent.origin;

　　　　if(origin == ‘http://test.com‘)

　　　　　　console.log(‘验证通过‘);

　　　　

　　);

4、document.domain

　　只能用于主域名相同的情况下，如a.test.com和b.test.com

　　著需要给页面添加document.domain = ‘test.com‘，表示主域名相同即可