WreckCTF_2022 - web - sources - writeup
description
click to spin, search for the flag!
sources.challs.wreckctf.com
writeup
After going to the link https://sources.challs.wreckctf.com/ I can get the first part of the flag by looking at the HTML code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<img src="image.png" />
<div></div>
</body>
</html>
<!-- flag part 1: flag{bd6a9e3f -->
|
The first part of our flag is flag{bd6a9e3f
After looking at the file https://sources.challs.wreckctf.com/style.css
I get the second part of the flag!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| html, body {
margin: 0;
height: 100%;
}
body {
display: grid;
place-items: center;
}
img {
height: 30%;
user-select: none;
}
div {
position: absolute;
width: 100%;
height: 100%;
}
/* flag part 2: 1690f7ab */
|
So the second part of the flag is 1690f7ab
By looking at the file https://sources.challs.wreckctf.com/script.js I found the third part of the flag:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| (async () => {
await new Promise((res) => window.addEventListener('load', res))
const state = {
velocity: 0,
angle: 0,
time: undefined,
}
const element = document.querySelector('img')
const animate = (current) => {
if (state.time === undefined) state.time = current
const delta = current - state.time
state.angle = (state.angle + state.velocity * delta / 1000) % 360
element.style.transform = `rotate(${state.angle}deg)`
state.time = current
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
window.addEventListener('click', () => {
state.velocity += 10;
})
setInterval(() => {
state.velocity = Math.max(0, state.velocity - 1)
}, 100)
})()
// flag part 3: b8445c0e}
|
So the third part of the flag is b8445c0e}.
After piecing it together the final flag is: flag{bd6a9e3f1690f7abb8445c0e}
