跨域的那些事儿
来源:互联网 发布:淘宝小商品拍摄技巧 编辑:程序博客网 时间:2024/06/03 17:03
前言
接触前端工作也有些年头了,却一直对跨域这个词不太清楚,恰逢工作调查机会,看到一篇好文讲解的很透彻。转载过来,与己方便,与人方便。
造成跨域的两种策略
浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:
- DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
- XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。
为什么要有跨域限制
了解完跨域之后,想必大家都会有这么一个思考,为什么要有跨域的限制,浏览器这么做是出于何种原因呢。其实仔细想一想就会明白,跨域限制主要是为了安全考虑。
AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:
用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识。
用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
http://evil.com向http://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。
银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。
而且由于Ajax在后台执行,用户无法感知这一过程。
DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:
做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com。
把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.com的dom节点,就可以拿到用户的输入了,那么就完成了一次攻击。
所以说有了跨域跨域限制之后,我们才能更安全的上网了
跨域的解决方式
跨域资源共享
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。 对于这个方式,阮一峰老师总结的文章特别好,希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。
这里我就简单的说一说大体流程。
对于客户端,我们还是正常使用xhr对象发送ajax请求。
唯一需要注意的是,我们需要设置我们的xhr属性withCredentials为true,不然的话,cookie是带不过去的哦,设置: xhr.withCredentials = true;对于服务器端,需要在 response header中设置如下两个字段:
Access-Control-Allow-Origin: http://www.yourhost.com
Access-Control-Allow-Credentials:true
这样,我们就可以跨域请求接口了。
jsonp实现跨域
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
这么说比较模糊,我们来看个例子:
// 定义一个fun函数function fun(fata) { console.log(data);};// 创建一个脚本,并且告诉后端回调函数名叫funvar body = document.getElementsByTagName('body')[0];var script = document.gerElement('script');script.type = 'text/javasctipt';script.src = 'demo.js?callback=fun';body.appendChild(script);
jsonp实现跨域
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
这么说比较模糊,我们来看个例子:
// 定义一个fun函数function fun(fata) { console.log(data);};// 创建一个脚本,并且告诉后端回调函数名叫funvar body = document.getElementsByTagName('body')[0];var script = document.gerElement('script');script.type = 'text/javasctipt';script.src = 'demo.js?callback=fun';body.appendChild(script);
返回的js脚本,直接会执行。所以就执行了事先定义好的fun函数了,并且把数据传入了进来。
fun({"name": "name"})
当然,这个只是一个原理演示,实际情况下,我们需要动态创建这个fun函数,并且在数据返回的时候销毁它。
因为在实际使用的时候,我们用的各种ajax库,基本都包含了jsonp的封装,不过我们还是要知道一下原理,不然就不知道为什么jsonp不能发post请求了~
服务器代理
浏览器有跨域限制,但是服务器不存在跨域问题,所以可以由服务器请求所要域的资源再返回给客户端。
服务器代理是万能的。
document.domain来跨子域
对于主域名相同,而子域名不同的情况,可以使用document.domain来跨域 这种方式非常适用于iframe跨域的情况,直接看例子吧 比如a页面地址为 http://a.yourhost.com b页面为 http://b.yourhost.com。 这样就可以通过分别给两个页面设置 document.domain = http://yourhost.com 来实现跨域。 之后,就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。
使用window.name进行跨域
window.name跨域同样是受到同源策略限制,父框架和子框架的src必须指向统一域名。window.name的优势在于,name的值在不同的页面(或者不同的域名),加载后仍然存在,除非你显示的更改。并且支持的长度达到2M.
//a页面的代码<script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = iframe.contentWindow.name; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe);</script>
//b页面代码<script type="text/javascript"> window.name = "hello";</script>
location.hash跨域
location.hash方式跨域,是子框架具有修改父框架src的hash值,通过这个属性进行传递数据,且更改hash值,页面不会刷新。但是传递的数据的字节数是有限的。
//a页面的代码<script type="text/javascript"> iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { if(state === 1) { var data = window.location.hash; console.log(data); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } else if(state === 0) { state = 1; iframe.contentWindow.location = 'http://m.zhuanzhuan.58.com:8887/b.html'; } }; document.body.appendChild(iframe);</script>
//b页面代码<script type="text/javascript"> parent.location.hash = "world";</script>
使用postMessage实现页面之间通信
信息传递除了客户端与服务器之前的传递,还存在以下几个问题:
- 页面和新开的窗口的数据交互。
- 多窗口之间的数据交互。
- 页面与所嵌套的iframe之间的信息传递。
window.postMessage是一个HTML5的api,允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了,具体可以参照MDN。
补充: 其实还有一些方法,比如window.name和location.hash。就很适用于iframe的跨域,不过iframe用的比较少了,所以这些方法也就有点过时了。
实际情况下,一般用cors,jsonp等常见方法就可以了。不过遇到了一些非常规情况,我们还是需要知道有更多的方法可以选择的
以上便是这次的文章分享了,可以给作者留言相互学习。也可以关注他的个人博客 https://wangningbo93.github.io/。
- 跨域的那些事儿
- angular中的作用域的那些事儿
- 明朝的那些事儿
- Oracle 的那些事儿
- VC++的那些事儿
- 游戏的那些事儿
- 编译器的那些事儿
- 找工作的那些事儿
- 北爱尔兰的那些事儿
- 数组的那些事儿~
- 密码的那些事儿
- poi的那些事儿
- Format的那些事儿
- 线程的那些事儿
- platform的那些事儿
- JDBC的那些事儿~~~
- SEO的那些事儿
- OpenCV的那些事儿
- Redis的持久化机制RDB与AOF
- shell 脚本编程学习(五) 输入输出重定向和环境变量
- JS中-==-与-===
- ArcGIS BLOB—大二进制类型
- 准备好智能照明2.0了吗?---凯利讯半导体
- 跨域的那些事儿
- 高性能Web架构
- js正则表达式写法
- BackgroundWorker线程控件用法
- androidstudio 卡顿编译慢的解决方法总结
- 鼠标移动到物体上,利用label和box来显示提示框的区别
- C#重载运算符必须静态吗? 为什么必须是静态的?
- JS数组
- shell 脚本编程学习(六) 函数