跨域与CSRF攻击

作者：刘旭濠

跨域每个程序员都要掌握的一门知识，其实我一开始也不知道什么是跨域甚至是第一次听到好奇这是啥玩意（毕竟我还是小白一个）不过看了网上一堆资料虽然有点乱但是还是理解了一些，那么我来分享一下我的理解吧，那么什么是跨域，跨域就是指浏览器不能执行其他网站脚本，是对浏览器对JavaScript加的安全限制，为什么要限制呢，那就是怕CSRF攻击，至于CSRF攻击是什么接下来也会讲到的。
那么我就这样比较就是，如果你的a页面要获取b页面资源，但是两个页面的协议，域名，端口和子域名不同，就要进行跨域获取，这就是跨域，但是浏览器为了这个安全就限制了跨域访问，但是为什么要限制呢，之所以为什么要限制，那是因为为了安全问题，避免跨域请求可能被不法分子利用来发动CSRF攻击
那么什么CSRF攻击？
CSRF攻击就是跨站请求伪造，也称为one click attack/session riding，缩写为CSRF/XSRF，攻击者怎么进行攻击呢？就是在用户已经登录目标网站后，引诱用户访问一个攻击页面，利用网站对用户达到信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，从而达到攻击者目的
攻击的原理是这样的（大概吧）：有两个网站，其中A网站是真实受信任的网站，而B网站是危险网站。在用户登陆了受信任的A网站是，本地会存储A网站相关的Cookie，并且浏览器也维护这一个Session会话。这时，如果用户在没有登出A网站的情况下访问危险网站B，那么危险网站B就可以模拟发出一个对A网站的请求（跨域请求）对A网站进行操作，而在A网站的角度来看是并不知道请求是由B网站发出来的（Session和Cookie均为A网站的），这时便成功发动一次CSRF 攻击也达到了目的，
CSRF 攻击也可以理解为就是攻击者盗用了你的身份，然后以你的名义发送而已请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账，然后简单说就是你的个人隐私信息泄露以及财产安全。所以大多数浏览器进行了跨域请求限制，这是从浏览器层面上的对 CSRF 攻击的一种防御，但是需要注意的是在复杂的网络环境中借助浏览器来防御 CSRF 攻击并不足够，还需要从服务端或者客户端方面入手防御，CSRF 攻击就说到这里要是想知道更详细CSRF的攻击解就去看一下这个吧https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/index.html这里面有CSRF攻击的应对之道
什么是跨域
跨域就是如是所说的就是a页面要获取b页面资源，但是两个页面的协议，域名，端口和子域名不同，就要进行跨域来获取资源。
下面表格就是，A页面与b页面限制情况

那么什么是JSONP
JSONP是（JSON with Padding的简写）是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取而JSON（JavaScript Object Notation的简写） 是一种轻量级的数据交换格式。
SONP在开放API中起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，不过有些API里没有说明，但实际上是可以使用JSONP方式调用的
在SONP跨域原理中同源策略下，某个服务器的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

然后现在来举个小例子，假如需要从服务器（http://www.a.com/user?id=123）获取数据
{“id”: 123, “name” : 小明, “age”: 17}
那使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据
foo({ “id”: 123, “name” : 小明, “age”: 17})
如果服务端考虑得更加充分，返回的数据.
try{foo({ “id”: 123, “name” : 小明, “age”: 17});}catch(e){};
这时只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo
function executeJsonp(url)
{
var eleScript = document.createElement(“script”);
eleScript.type = “text/javascript”;
eleScript.src = url;
document.getElementsByTagName(“head”)[0].appendChild(eleScript);
}
function foo(data)
{
for(var p in data)
{
console.log(data[p]);
}
}
var url = “http://www.a.com/user?id=123?callback=foo”;
executeJsonp(url)

（ps：这些网址都是假的）
要是在jQuery中通过JSONP来跨域获取数据那么它有两种方法
第一种是在ajax函数中设置dataType为’jsonp’：
$.ajax({
type: “get”,
data: “random=” + Math.random(),
url: url,
dataType: “jsonp”,
jsonp: “callback”,
success: function(data){ //处理data数据
$.each(data, function(key, val) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲myDiv").html(("#myDiv").html() + val.cvalue + “”);
});
}
});、
第二种是利用getJSON来实现，只要在地址中加上callback=?参数：
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
q: “Arsenal”
},function(tweets)
{
console.info("Twitter returned: ", tweets);
});