浅谈前端安全之跨域安全（下篇）

  上期我们介绍了XmlHttpRequest 跨域方法及可能存在的安全问题，本期我们来介绍jsonp，在jsonp开发实践中不可避免带来了一些安全问题，例如jsonp劫持和反射型xss。

一、 什么是JSONP

 JSONP(JSON with Padding) 是 json 的一种"使用模式"，

二、如何使用JSONP 跨域

（1）需要在 a.com 上包含如下前端代码示例：

<script>    //jsonp回调方法，一定要写在jsonp请求前面    function jsonp_callback(msg){       do something();//回调函数，自定义读取数据后续操作    }</script><script src ="http://b.com/getinfo?callback=jsonp_callback" type="text/javascript" ></script>

（2）b.com的服务端针对/callback接口可进行如下设置（以java代码为例）：

@RequestMapping(value="/getinfo",method=RequestMethod.GET)@ResponseBodypublic String testdemo(@RequestParam("callback") String callbackFunction){  return callbackFunction+"{"result":{"data":{"_csrf_token":"18623163885dedec5decbab1.37745340"}}};";}

上面演示的是我们自定义的callback函数下的跨域方法，一般在企业开发实践中经常需要我们自定义callback函数，当然也可以用默认的callback。

三、JSONP 开发实践中的安全问题

   1.未正确设置Content-Type 而导致的反射型XSS

    例如按照上面的跨域方式，a.com跨域请求b.com网站，http://b.com/getinfo?callback=jsonp_callback ，同时b.com返回如下json报文：

jsonp_callback({"result":{"status":{"code":11,"msg":"缺少参数:吧id或吧名称"},"data":{"_csrf_token":"18623163885dedec5decbab1.37745340"}}});

若b.com 返回头中设置的Content-Type值为如下所示

Content-Type: text/html; charset=UTF-8

则攻击者可以构造如下链接从而执行xss: http://b.com/getinfo?callback=<script>alert(1)</script>

2.JSONP劫持

JSON 劫持又为“ JSON Hijacking ”，最开始提出这个概念大概是在 2008 年国外有安全研究人员提到这个 JSONP 带来的风险。其实这个问题属于 CSRF（ Cross-site request forgery 跨站请求伪造）攻击范畴。当某网站听过 JSONP 的方式来快域（一般为子域）传递用户认证后的敏感信息时，攻击者可以构造恶意的 JSONP 调用页面，诱导被攻击者访问来达到截取用户敏感信息的目的

https://blog.knownsec.com/2015/03/jsonp_security_technic/

<script>    //jsonp回调方法，一定要写在jsonp请求前面    function jsonp_callback(msg){        alert(msg);//如果能正确弹框显示取到的_csrf_token值则表明存在劫持漏洞        do_evilSomething();//发送敏感数据    }</script><script src ="http://b.com/getinfo?callback=jsonp_callback" type="text/javascript" ></script>

document.domain、window.name、location.hash、PostMessage 

https://xz.aliyun.com/t/4470

等方式，用的比较少，就不再赘述了，如果对本文有疑问或者勘误，可在下方留言。

原文始发于微信公众号（风藤安全）：浅谈前端安全之跨域安全（下篇）