js通信——同源/跨域

Posted 2023-05-06

参考技术A 同源：协议、域名、端口号都相同。
同源策略限制：从一个源加载的文档或脚本与另一个源的资源进行交互。
限制：1.cookie、localstorage、indexDB不能获取；2. ajax请求不能发送；3.DOM无法获得。

ajax 同源、fetch、webSocket 不限制同源、CORS 支持同源、不同源

跨域解决方案

什么是跨域

js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

由于浏览器的同源策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求

为什么要有跨域限制

了解完跨域之后，想必大家都会有这么一个思考，为什么要有跨域的限制，浏览器这么做是出于何种原因呢。其实仔细想一想就会明白，跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击：

1. 用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
3. http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
4. 银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
5. 而且由于Ajax在后台执行，用户无法感知这一过程。

DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：

1. 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。

所以说有了跨域跨域限制之后，我们才能更安全的上网了。

实现跨域请求的常用三种方式

• JSONP
• Nginx作反向代理
• CORS策略

1、JSONP（JSON with padding）

原理 ：

? 我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像淘宝等大型网站，肯定会将这些静态资源放入cdn中，然后在页面上连

接，如下所示，所以它们是可以链接访问到不同源的资源的。

1）<script type="text/javascript" src="某某cdn地址" ></script>

2）<link type="text/css" rel="stylesheet" href="某个cdn地址" />

3）<img src="某个cdn地址" alt=""/>

　　而jsonp就是利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个<script>标签来实现。

实现方法：

? 这里是使用ajax来请求的，看起来和ajax没啥区别，其实还是有区别的。

? ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加