foren/sea-scavenger (#46)

* bare bones code for now

* created flask server

* added first riddle

* squid

* worked on treasure!!!

* added whale and removed jellyfish and dolphin

* finished challenge!!!

* i think i make dockerfile and chall.yaml right? please help i think

* solve.txt

* quick fix

* dockerfile appears to be okay

* fix extra space in file path

* hints!!!

* Update sea-scavenger/chall.yaml

Co-authored-by: mudasir  <[email protected]>

* Update sea-scavenger/resources/clam.js

Co-authored-by: mudasir  <[email protected]>

* Update sea-scavenger/resources/treasure.js

Co-authored-by: mudasir  <[email protected]>

* switch hint to description

* Update clam.js

* Update solve.txt

---------

Co-authored-by: mudasir <[email protected]>

sea-scavenger/Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.12
+
+WORKDIR /app
+
+ADD . /app
+
+RUN pip install flask
+
+EXPOSE 4321
+
+CMD ["python", "server.py"]

sea-scavenger/chall.yaml

@@ -0,0 +1,20 @@
+name: Sea Scavenger
+categories:
+  - foren
+  - webex
+tags:
+  - beginner
+value: 25
+flag: bcactf{b3t_y0u_d1dnt_f1nd_th3_tre4sur3_t336e3}
+description: |
+  Take a tour of the deep sea! Explore the depths of webpage secrets and find the hidden treasure. Pro tip: Zoom out!
+hints:
+  - Press F12 or Ctrl+Shift+I on Windows (Cmd+Option+I on Mac OS) to launch DevTools
+  - Some parts have hints in the console
+deploy:
+  web:
+    build: .
+    expose: 4321/tcp
+authors:
+  - pinuna27
+visible: true

sea-scavenger/resources/clam.js

@@ -0,0 +1,7 @@
+document.cookie = "flag part 3:=dnt_f1n";
+
+window.onbeforeunload = function() {
+    document.cookie = "flag part 3:=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+};  
+
+console.log("Hint: how do websites remember you? Where do websites store things?")

sea-scavenger/resources/shipwreck.js

@@ -0,0 +1,2 @@
+console.log("Hint: Check the response headers");
+console.log("Also make sure to check \"/shipwreck\"");

sea-scavenger/resources/squid.js

@@ -0,0 +1 @@
+console.log("You found it! Here's the second part of the flag: \"t_y0u_d1\"");

sea-scavenger/resources/treasure.js

@@ -0,0 +1,3 @@
+console.log("Hint: what's robots.txt?");
+console.log("Another hint: I don't think the robots found the root! Check under /treasure");
+console.log("Also- this one isn't just about clicking around...");

sea-scavenger/resources/treasure/robots.txt

@@ -0,0 +1,3 @@
+You found the rest of the flag!
+
+_t336e3}

sea-scavenger/resources/whale.js

@@ -0,0 +1 @@
+// Part 5 of the flag: "e4sur3"

sea-scavenger/server.py

@@ -0,0 +1,42 @@
+from flask import Flask, render_template, send_from_directory, request, make_response
+
+app = Flask(__name__)
+
+app.static_folder = 'resources'
+
+@app.route('/')
+def home():
+    return render_template('sea.html')
+
+@app.route('/shark')
+def shark():
+    return render_template('shark.html')
+
+@app.route('/squid')
+def squid():
+    return render_template('squid.html')
+
+@app.route('/clam')
+def clam():
+    return render_template('clam.html')
+
+@app.route('/shipwreck')
+def shipwreck():
+    response = make_response(render_template('shipwreck.html'))
+    response.headers['Flag_Part_4'] = 'd_th3_tr'
+    return response
+
+@app.route('/whale')
+def whale():
+    return render_template('whale.html')
+
+@app.route('/treasure')
+def treasure():
+    return render_template('treasure.html')
+
+@app.route('/treasure/robots.txt')
+def static_from_root():
+    return send_from_directory(app.static_folder, request.path[1:])
+
+if __name__ == '__main__':
+    app.run(debug=True)

sea-scavenger/solve.txt

@@ -0,0 +1,15 @@
+pretty self explanatory...
+
+just scroll through the page and find the images and click on each one
+it gives you a hint as to where to find the segments of the flag in the devtools
+
+part 1: html of shark in notFlagPartTrust div
+part 2: console of squid
+part 3: cookies of clam
+part 4: network of shipwreck, response headers of shipwreck
+part 5: sources of whale, static then whale.js
+final part: go to treasure, navigate to https://_________.___/treasure/robots.txt
+
+piece it together and there you go!
+
+i hope this is easy enough for everyone to do

sea-scavenger/templates/clam.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sea Creature: Clam</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            height: 100vh;
+            background: linear-gradient(to bottom, #000066 0%, #000000 100%);
+            color: #ffffff;
+            font-family: Arial, sans-serif;
+        }
+
+        .container {
+            text-align: center;
+            padding: 50px;
+        }
+
+        .riddle {
+            font-size: 24px;
+            margin-top: 50px;
+        }
+
+        .back-link {
+            display: block;
+            margin-top: 50px;
+            font-size: 18px;
+            text-decoration: underline;
+            color: lightblue;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <img class="clam-image" src="{{ url_for('static', filename='clam.png') }}" alt="Clam Image">
+        <div class="riddle">
+            <p>Clams are shaped like a specific sweet treat when they are closed...</p>
+        </div>
+        <a class="back-link" href="{{ url_for('home') }}">Back to the Depths of the Sea</a>
+    </div>
+
+    <script src="{{ url_for('static', filename='clam.js') }}"></script>
+</body>
+
+</html>

sea-scavenger/templates/sea.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Depths of the Sea</title>
+    <style>
+        body {
+            background: linear-gradient(to bottom, #000066 0%, #000000 100%);
+            color: #ffffff;
+            font-family: Arial, sans-serif;
+            position: relative;
+            height: 8000px;
+            width: 7400px;
+            overflow: auto;
+        }
+
+        h1 {
+            color: #66ccff;
+        }
+
+        img {
+            position: absolute;
+            width: 200px;
+        }
+
+        #shark {
+            top: 10%;
+            left: 1200px;
+        }
+
+        #squid {
+            top: 30%;
+            right: 1400px;
+        }
+
+        #clam {
+            top: 50%;
+            left: 2600px;
+        }
+
+        #shipwreck {
+            top: 70%;
+            right: 2800px;
+        }
+
+        #whale {
+            top: 90%;
+            left: 1000px;
+        }
+
+        #treasure {
+            top: 7800px;
+            left: 6600px;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>Welcome to the Depths of the Sea</h1>
+    </header>
+    <main>
+        <p>Explore the mysteries of the deep sea...</p>
+        <a href="{{ url_for('shark') }}"><img id="shark" src="{{ url_for('static', filename='shark.png') }}"
+                alt="Shark Image"></a>
+        <a href="{{ url_for('squid') }}"><img id="squid" src="{{ url_for('static', filename='squid.png') }}"
+                alt="Squid Image"></a>
+        <a href="{{ url_for('clam') }}"><img id="clam" src="{{ url_for('static', filename='clam.png') }}"
+                alt="Clam Image"></a>
+        <a href="{{ url_for('shipwreck') }}"><img id="shipwreck" src="{{ url_for('static', filename='shipwreck.png') }}"
+                alt="Shipwreck Image"></a>
+        <a href="{{ url_for('whale') }}"><img id="whale" src="{{ url_for('static', filename='whale.png') }}"
+                alt="Whale Image"></a>
+        <a href="{{ url_for('treasure') }}"><img id="treasure" src="{{ url_for('static', filename='treasure.png') }}"
+                alt="Treasure Image"></a>
+    </main>
+</body>
+
+</html>

sea-scavenger/templates/shark.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sea Creature: Shark</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            height: 100vh;
+            background: linear-gradient(to bottom, #000066 0%, #000000 100%);
+            color: #ffffff;
+            font-family: Arial, sans-serif;
+        }
+
+        .container {
+            text-align: center;
+            padding: 50px;
+        }
+
+        .riddle {
+            font-size: 24px;
+            margin-top: 50px;
+        }
+
+        .back-link {
+            display: block;
+            margin-top: 50px;
+            font-size: 18px;
+            text-decoration: underline;
+            color: lightblue;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <img src="{{ url_for('static', filename='shark.png') }}" alt="Shark Image">
+        <div class="riddle">
+            <p>Sharks swim really fast, especially through the HTML sea!</p>
+        </div>
+        <div class="notFlagPartTrust">
+            <!-- You found the shark! Part 1 of the flag: "bcactf{b3" -->
+        </div>
+        <a class="back-link" href="{{ url_for('home') }}">Back to the Depths of the Sea</a>
+    </div>
+</body>
+
+</html>

sea-scavenger/templates/shipwreck.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sea: Shipwreck</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            height: 100vh;
+            background: linear-gradient(to bottom, #000066 0%, #000000 100%);
+            color: #ffffff;
+            font-family: Arial, sans-serif;
+        }
+
+        .container {
+            text-align: center;
+            padding: 50px;
+        }
+
+        .riddle {
+            font-size: 24px;
+            margin-top: 50px;
+        }
+
+        .back-link {
+            display: block;
+            margin-top: 50px;
+            font-size: 18px;
+            text-decoration: underline;
+            color: lightblue;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <img class="shipwreck-image" src="{{ url_for('static', filename='shipwreck.png') }}" alt="Shipwreck Image">
+        <div class="riddle">
+            <p>Looks like this ship lost its network connections with the rest of the world...</p>
+        </div>
+        <a class="back-link" href="{{ url_for('home') }}">Back to the Depths of the Sea</a>
+    </div>
+
+    <script src="{{ url_for('static', filename='shipwreck.js') }}"></script>
+</body>
+
+</html>