【跨域】jsonp看完这篇文章就够了

jsonp是一种jQuery提供的跨域解决方案,我们今天来好好讲讲jsonp。

同源策略及限制

所有浏览器都会使用同源策略这个安全策略
所谓同源,是指协议、域名、端口号都相同。
那么,同源策略就是,一个源只能加载同源的资源。

那么同源策略有什么限制呢?

  • Cookie、LocalStorage和indexDB不同源无法读取
  • dom不同源无法获取
  • ajax不同源请求不能发送

没有同源的危险场景(CSRF攻击)

1.CSRF是什么呢?

跨站请求伪造。CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具危险性。

2.CSRF攻击的主要目的

是让用户在不知情的情况下攻击自己已登录的一个系统(类似于钓鱼)。
例如,

  • 用户当前已经登录了A网站,同时用户又在使用另外一个钓鱼网站。
  • 这个网站上面可能因为某个图片吸引你,你去点击一下,此时可能就会触发一个js的点击事件,构造一个A网站的请求。
  • 利用当前cookie中的登陆状态,让用户在不知情的情况下,帮你干一些事情。
3.防御CSRF
  • 同源检测
    在HTTP协议中,每一个异步请求都会携带两个Header,用于标记来源域名(Origin Header和Referer Header)。这两个Header在浏览器发起请求时,大多数情况会自动带上,并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名,确定请求的来源域。
  • token令牌
    CSRF 攻击之所以能够成功,是因为黑客可以完全伪造用户的请求,该请求中所有的用户验证信息都是存在于 cookie 中,因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。
    要抵御 CSRF,关键在于在请求中放入黑客所不能伪造的信息,并且该信息不存在于 cookie 之中。
    那么,我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token,来把正常的请求和攻击的请求区分开,也可以防范CSRF的攻击。

跨域的简单原理

我们新建一个web程序,里面包含demo.htmldemo.js文件如下:

//demo.html



<head>
    <title>testtitle>
    <script type="text/javascript" src="demo.js">script>
head>
<body>
body>
html>
//demo.js

alert("success");

打开demo.html会弹出success对话框。
当然,现在这种情况是同源的,我们来模拟一下非同源情况。
我们再新建一个web程序,把demo.js放到这个程序里。现在demo.html中访问demo.js就变成了下面这样:

<script type="text/javascript" src="http://localhost:xxxx/demo.js"></script>

这个时候,其实就是访问到了非同源的demo.js

你可能感兴趣的:(前端)