什么是跨域,为什么浏览器会禁止跨域,及其引起的发散性学习

浏览器的跨域问题以及解决方案
浅谈CSRF攻击方式
参考了上面的大神们的文章,以下是自己的总结。

1、什么是跨域

跨域的产生来源于现代浏览器所通用的‘同源策略’,所谓同源策略,是指只有在地址的:
1. 协议名
2. 域名
3. 端口名
均一样的情况下,才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问,就称为跨域。

2、为什么浏览器会禁止跨域

跨域的访问会带来许多安全性的问题,比如,cookie一般用于状态控制,常用于存储登录的信息,如果允许跨域访问,那么别的网站只需要一段脚本就可以获取你的cookie,从而冒充你的身份去登录网站,造成非常大的安全问题,因此,现代浏览器均推行同源策略。

3、如何解决跨域访问问题

跨域一般有以下几种方式:

同浏览器不同窗口实现跨域:
  • 通过设置window.name,再访问其他网页,就可以获取到window.name属性,只要在其他网页监听window.name属性的变化即可实现跨域的消息传递。
  • 在一级域名相同,二级域名不相同的情况下,可以通过将window.domain设置为相同,比如在http://aaa.next.com/index.html中执行window.domain = 'next',在http://bbb.next.com/index.html也执行window.domain = 'next',此时这两个不同的源之间就可以互相访问了。
  • 使用HTML5新提供的postMessage api也可以实现跨域,在此不做详述,直接搬运代码:
/* 子窗口 */
window.onmessage = function(e) {  
  if (e.origin !== 'http://bbb.com') return;  
  var payload = JSON.parse(e.data);  
  switch (payload.method) {  
    case 'set':  
      localStorage.setItem(payload.key, JSON.stringify(payload.data));  
      break;  
    case 'get':  
      var parent = window.parent;  
      var data = localStorage.getItem(payload.key);  
      parent.postMessage(data, 'http://aaa.com');  
      break;  
    case 'remove':  
      localStorage.removeItem(payload.key);  
      break;  
  }  
};  
/* 父窗口 */
var win = document.getElementsByTagName('iframe')[0].contentWindow;  
var obj = { name: 'Jack' };  
// 存入对象  
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');  
// 读取对象  
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");  
window.onmessage = function(e) {  
  if (e.origin != 'http://aaa.com') return;  
  // "Jack"  
  console.log(JSON.parse(e.data).name);  
};  
AJAX跨域
  • JSONP

JSONP是通过在script标签中访问不同域的URL实现跨域:

function addScriptTag(src) {  
  var script = document.createElement('script');  
  script.setAttribute("type","text/javascript");  
  script.src = src;  
  document.body.appendChild(script);  
} 
window.onload = function () {  
  addScriptTag('http://example.com/ip?callback=foo');  
}
function foo(data) {  
  console.log('Your public IP address is: ' + data.ip);  
};

这里的callback参数可以指定JSONP请求的回调,请求接收到的数据可以在回调函数的第一个参数中取到。
JSONP只能发送GET请求,作为跨域方式来说受到的限制比较多,如今适用性不是很广。

  • WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

由于这是一种特殊的跨域方式,在此不做详细说明。

  • CORS

CORS全称cross-origin resource sharing,意为跨站点资源共享,是w3c官方推荐的一种跨域方案,目前所有浏览器对其兼容性都表现良好,而且支持所有的请求方式,可以预见是未来最为广泛使用的跨域方案。

在支持CORS方案的浏览器中发送AJAX请求,请求地址为目标域的绝对路径时,请求头中会带有一个字段:withCredentials: true,这个字段会让浏览器发送身份信息到服务端,如SSL、cookie等。与此同时,在服务端中设置响应头中的Access-Control-Allow-Origin: *,则可以实现一个跨域请求。

注意:在实际使用中,最好对Access-Control-Allow-Origin进行指定域名的设置,如:Access-Control-Allow-Origin: www.test.com。如果使用Access-Control-Allow-Origin: *,则会允许所有来源进行跨域访问,这会带来比较大的安全问题。

4、使用cdn服务托管静态资源带来的跨域问题

使用cdn托管服务的时候,由于域名不同,加载某些静态资源的时候会出现跨域报错的情况,这个问题阿里云的帮助文档给出了解决方案:CDN支持cors(跨域)配置的步骤与注意事项

解决的方案其实也是使用CORS的原理,可以配置响应头字段Access-Control-Allow-Origin(用于指定允许跨域的域名)与Access-Control-Allow-Methods(指定允许跨域的请求类型)。

5、CSRF攻击

既然说到跨域,那就要说一下实现非法跨域导致的安全问题,CSRF攻击。

CSRF攻击,全称cross-site request forgery,即跨站点请求伪造。这篇文章对CSRF攻击做了详细的介绍:浅谈CSRF攻击方式

下图简单的阐述了CSRF攻击的思想:
这里写图片描述

  • 7
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值