Brief Intro to Digital Forensics

Activity Overview

Objective: Identify hidden clues in the webpage's source code and metadata using developer tools.

Tools Needed: A modern web browser and a text editor. Optionally, use an online metadata extractor (e.g., exif.tools).

Instructions

  1. Open the Webpage: Load this page in your browser.
  2. View the Source Code: Right-click and select “View Page Source” (or press Ctrl+U/Cmd+U) and look for HTML comments or meta tags with hidden clues.
  3. Inspect Hidden Elements: Use “Inspect Element” (F12/Cmd+Option+I) to check the DOM for elements that might be hidden with CSS (e.g., using display: none;).
  4. Analyze Metadata: Check for unusual meta tags or comments that contain clues. If you find an image, download it and use an online EXIF metadata extractor.
  5. Answer the Questions:
    • What hidden comment or message did you find in the source code?
    • Which meta tag reveals an extra clue?
    • Is there an element hidden via CSS? What does it say?
    • How might these techniques be applied in real digital forensic investigations?
  6. Discuss Your Findings: Share your observations!

Sample HTML Code Excerpt

Below is a snippet of the code containing hidden clues. Try to find these clues by viewing the source or using developer tools.

<!-- Hidden Clue: The secret code is DF2025 -->
<meta name="forensics-clue" content="Investigate further: Check the hidden text on the page.">

<style>
  .hidden {
    display: none;
  }
</style>

<!-- Another hidden comment: Look at the developer tools for extra hints! -->
<p class="hidden">Secret Message: The investigation never ends!</p>

Additional Challenge

Examine the Image for Hidden Clues. Forensic Investigation Image

Instructions

  1. Download the Image: Right-click on the image above and save it.
  2. Analyze EXIF Metadata: Use an online tool like:
  3. Find Hidden Information:
    • Check for timestamps, GPS data, or comments.
    • Look for hidden clues in metadata fields.
  4. Share Your Findings