-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcannon-ball.html
More file actions
272 lines (232 loc) · 15 KB
/
cannon-ball.html
File metadata and controls
272 lines (232 loc) · 15 KB
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cannon Ball - Instruo CTF 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
* { font-family: 'IBM Plex Mono', monospace; }
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
}
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.content-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 2rem;
}
pre { background: #1e1e1e !important; border-radius: 0.5rem; padding: 1rem; overflow-x: auto; }
code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-size: 0.875rem; }
pre code { background: transparent; padding: 0; }
</style>
</head>
<body class="antialiased">
<nav class="glass fixed w-full z-50 top-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="../index.html" class="flex items-center space-x-2">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
<span class="text-white text-xl font-bold">Instruo CTF</span>
</a>
</div>
<a href="../index.html" class="text-white hover:text-gray-200 px-3 py-2 text-sm font-medium">Back to Home</a>
</div>
</div>
</nav>
<div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<div class="glass rounded-2xl p-8 mb-8">
<div class="flex items-center space-x-3 mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<h1 class="text-4xl font-bold text-white">Cannon Ball</h1>
</div>
<div class="flex flex-wrap gap-3">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white">Web</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-600 text-white">Steganography</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-600 text-white">Medium</span>
</div>
</div>
<div class="content-section">
<h2 class="text-2xl font-bold mb-4">Challenge Information</h2>
<ul class="space-y-2">
<li><strong>Challenge Name:</strong> Cannon Ball</li>
<li><strong>Category:</strong> Web, Steganography</li>
<li><strong>URL:</strong> <a href="https://cannon-ball-three.vercel.app/" class="text-blue-600 hover:underline">https://cannon-ball-three.vercel.app/</a></li>
<li><strong>Description:</strong> "There is something wrong with this website, but I can't put a finger on it."</li>
<li><strong>Flag:</strong> <code class="text-green-600">EOF{F0und_!t}</code></li>
</ul>
</div>
<div class="content-section">
<h2 class="text-2xl font-bold mb-4">Solution Methodology</h2>
<h3 class="text-xl font-semibold mb-3 mt-4">Phase 1: Initial Website Reconnaissance</h3>
<p class="mb-3"><strong>Step 1: Fetch and Analyze HTML</strong></p>
<pre><code class="language-bash">curl -s https://cannon-ball-three.vercel.app/ > page.html
cat page.html | grep -i "EOF\|flag\|hidden"</code></pre>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4 mt-4">
<p class="font-semibold mb-2">Key Findings:</p>
<ul class="list-disc list-inside text-sm space-y-1">
<li>HTML comment: <code><!--RCnYi2VTt9yXtWnnmzOPL--></code></li>
<li>Low opacity image element with id <code>f00lish-stuff</code> (opacity: 0.01)</li>
<li>Another image with id <code>secret-stuff</code> (opacity: 0.2)</li>
</ul>
</div>
<p class="mb-3"><strong>Step 2: Check for Hidden Elements</strong></p>
<pre><code class="language-bash">grep -E "opacity|display.*none|visibility.*hidden" page.html</code></pre>
<p class="mb-3"><strong>Discovery:</strong> Multiple elements with very low opacity values designed to be nearly invisible.</p>
<h3 class="text-xl font-semibold mb-3 mt-6">Phase 2: JavaScript Analysis</h3>
<p class="mb-3"><strong>Step 3: Download and Analyze JavaScript Files</strong></p>
<pre><code class="language-bash"># Find JavaScript bundles
curl -s https://cannon-ball-three.vercel.app/ | grep -o '_next/static/chunks/[^"]*\.js' | head -5
# Download main page JavaScript
curl -s https://cannon-ball-three.vercel.app/_next/static/chunks/app/page-3e3e016d861d1eb2.js > page.js
# Search for interesting strings
strings page.js | grep -i "EOF\|flag\|secret"</code></pre>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
<p class="font-semibold mb-2">Findings:</p>
<ul class="list-disc list-inside text-sm space-y-1">
<li>References to <code>/flag.zip</code></li>
<li>References to <code>/target_hit.mp3</code></li>
<li>References to <code>/secrets.txt</code></li>
</ul>
</div>
<h3 class="text-xl font-semibold mb-3 mt-6">Phase 3: Hidden Resources Discovery</h3>
<p class="mb-3"><strong>Step 4: Download Hidden Files</strong></p>
<pre><code class="language-bash"># Download the hidden resources
curl -s https://cannon-ball-three.vercel.app/flag.zip > flag.zip
curl -s https://cannon-ball-three.vercel.app/target_hit.mp3 > target_hit.mp3
curl -s https://cannon-ball-three.vercel.app/secrets.txt > secrets.txt
# Check file types
file flag.zip target_hit.mp3 secrets.txt</code></pre>
<p class="mb-3"><strong>Results:</strong> All three files contain base64-encoded data URIs!</p>
<p class="mb-3"><strong>Step 5: Decode Base64 Data</strong></p>
<pre><code class="language-bash"># Decode flag.zip content
cat flag.zip | cut -d',' -f2 | base64 -d
# Output: https://nothing-2-see-here.vercel.app/</code></pre>
<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-4">
<p class="font-semibold text-green-700">🎯 Discovery: A hidden secondary website!</p>
</div>
<pre><code class="language-bash"># Decode secrets.txt to get image
cat secrets.txt | cut -d',' -f2 | base64 -d > secrets.jpg
file secrets.jpg
# Output: JPEG image data
# Decode target_hit.mp3 to get another image
cat target_hit.mp3 | cut -d',' -f2 | base64 -d > target.png
file target.png
# Output: PNG image data</code></pre>
<h3 class="text-xl font-semibold mb-3 mt-6">Phase 4: Secondary Site Investigation</h3>
<p class="mb-3"><strong>Step 6: Analyze the Hidden Site</strong></p>
<pre><code class="language-bash"># Fetch the hidden site
curl -s https://nothing-2-see-here.vercel.app/ > page2.html
# Check HTML comment
grep -o '<!--[^>]*-->' page2.html
# Output: <!--c1SDEePUGiYnO0EAUsgjk--></code></pre>
<p class="mb-3"><strong>Step 7: Extract Secrets Image and OCR</strong></p>
<pre><code class="language-bash"># Run OCR on secrets.jpg
tesseract secrets.jpg stdout</code></pre>
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
<p class="font-semibold mb-2">OCR Output:</p>
<pre class="text-sm mt-2">HAVE YOU LOOKED AT EVERYTHING CLOSELY?
SORRY, THAT WAS A STRANGE THING TO ASK</pre>
<p class="text-sm mt-2"><strong>Hint Interpretation:</strong> Need to examine all resources more carefully!</p>
</div>
<h3 class="text-xl font-semibold mb-3 mt-6">Phase 5: Image Steganography</h3>
<p class="mb-3"><strong>Step 8: Use Zsteg on PNG</strong></p>
<pre><code class="language-bash"># Install zsteg (if not installed)
gem install zsteg
# Run zsteg on the target.png
zsteg target.png</code></pre>
<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-4">
<p class="font-semibold text-green-700 mb-2">🎉 SUCCESS! Flag found in LSB:</p>
<pre class="text-sm mt-2">b1,r,lsb,xy .. text: "EOF{F0und_!t}"
b1,rgb,lsb,xy .. text: "EOF{F0und_!t}EOF{F0und_!t}"
b1,rgba,lsb,xy .. text: "EOF{F0und_!t}EOF{F0und_!t}EOF{F0und_!t}EOF{F0und_!t}"</pre>
<p class="text-sm mt-2">Flag found in the <strong>Least Significant Bit (LSB)</strong> of the PNG image!</p>
</div>
</div>
<div class="content-section">
<h2 class="text-2xl font-bold mb-4">Key Insights</h2>
<h3 class="text-xl font-semibold mb-3">Challenge Design</h3>
<p class="mb-3">This challenge combined multiple techniques:</p>
<ol class="list-decimal list-inside space-y-2 mb-4">
<li><strong>Web Reconnaissance:</strong> Finding hidden resources through HTML/JS analysis</li>
<li><strong>Base64 Encoding:</strong> Multiple layers of base64-encoded data URIs</li>
<li><strong>Multi-Stage Puzzle:</strong> First site leads to second site</li>
<li><strong>Visual Misdirection:</strong> Low opacity elements and misleading game interface</li>
<li><strong>Steganography:</strong> Final flag hidden in image LSB data</li>
</ol>
<h3 class="text-xl font-semibold mb-3 mt-6">The "Something Wrong"</h3>
<p class="mb-3">The challenge description said "something is wrong with this website":</p>
<ul class="list-disc list-inside space-y-2 mb-4">
<li><strong>Hidden elements</strong> with very low opacity (0.01, 0.2)</li>
<li><strong>Encoded resources</strong> disguised as different file types</li>
<li><strong>Secondary site</strong> hidden in base64 data</li>
<li><strong>Flag in steganography</strong> rather than in the game itself</li>
</ul>
<h3 class="text-xl font-semibold mb-3 mt-6">Why the Game Was a Decoy</h3>
<p class="mb-3">The website appeared to be a physics-based cannon game, but:</p>
<ul class="list-disc list-inside space-y-2">
<li>The actual challenge wasn't about solving the physics problem</li>
<li>The game was designed to distract from the hidden resources</li>
<li>The "Nice try man!" message when hitting the target was intentional misdirection</li>
</ul>
</div>
<div class="content-section">
<h2 class="text-2xl font-bold mb-4">Tools Used</h2>
<h3 class="text-lg font-semibold mb-2">Web Analysis</h3>
<ul class="list-disc list-inside space-y-1 mb-4">
<li><code>curl</code> - Download web resources</li>
<li><code>grep</code> - Search for patterns</li>
<li><code>strings</code> - Extract readable strings</li>
</ul>
<h3 class="text-lg font-semibold mb-2">Decoding</h3>
<ul class="list-disc list-inside space-y-1 mb-4">
<li><code>base64</code> - Decode base64-encoded data</li>
<li><code>cut</code> - Extract base64 from data URIs</li>
</ul>
<h3 class="text-lg font-semibold mb-2">Image Analysis</h3>
<ul class="list-disc list-inside space-y-1">
<li><code>file</code> - Identify file types</li>
<li><code>tesseract</code> - OCR for reading image text</li>
<li><code>zsteg</code> - <strong>Critical:</strong> Extract LSB steganography from PNG</li>
<li><code>exiftool</code> - EXIF metadata examination</li>
</ul>
</div>
<div class="content-section">
<h2 class="text-2xl font-bold mb-4">Complete Solution Summary</h2>
<pre><code class="language-bash"># 1. Download and analyze main page
curl -s https://cannon-ball-three.vercel.app/ > page.html
# 2. Extract hidden resources
curl -s https://cannon-ball-three.vercel.app/flag.zip > flag.zip
curl -s https://cannon-ball-three.vercel.app/target_hit.mp3 > target_hit.mp3
curl -s https://cannon-ball-three.vercel.app/secrets.txt > secrets.txt
# 3. Decode flag.zip to find hidden URL
cat flag.zip | cut -d',' -f2 | base64 -d
# Output: https://nothing-2-see-here.vercel.app/
# 4. Decode target_hit.mp3 to get PNG image
cat target_hit.mp3 | cut -d',' -f2 | base64 -d > target.png
# 5. Run zsteg to extract flag from PNG
zsteg target.png
# Output: EOF{F0und_!t}</code></pre>
<p class="mt-4">This web challenge perfectly demonstrated the importance of thorough reconnaissance, not trusting the obvious interface, checking all resources including hidden ones, and using the right steganography tools. The flag <code class="text-green-600">EOF{F0und_!t}</code> celebrates the successful discovery after examining every element of both websites! 🎯</p>
</div>
</div>
</div>
<script>hljs.highlightAll();</script>
</body>
</html>