medienkompetenz-lernplattform/backend/lessons/configs/browser-in-browser-attack.yaml

lessonKey: "browser-in-browser-attack"
title: "Browser-in-the-Browser (BitB) Attack"
description: "Learn to identify sophisticated phishing attacks that mimic legitimate browser windows"
difficultyLevel: "advanced"
estimatedDuration: 25
module: "browser-in-browser-attack"

steps:
  - id: "intro"
    type: "content"
    title: "What is Browser-in-the-Browser?"
    content: |
      Browser-in-the-Browser (BitB) is an advanced phishing technique that creates a fake browser window inside a webpage. It's designed to trick users into thinking they're interacting with a legitimate OAuth/SSO login popup.

      Why it's dangerous:
      • Looks identical to real browser popup windows
      • Shows a fake address bar with HTTPS lock icon
      • Mimics trusted services (Google, Microsoft, Facebook)
      • Can steal credentials even from security-aware users
      • Bypasses traditional phishing detection

      This attack gained prominence in 2022 and has been used in targeted attacks against organizations.      

  - id: "how-it-works"
    type: "content"
    title: "How the Attack Works"
    content: |
      Traditional OAuth Flow:
      1. User clicks "Sign in with Google" on a website
      2. Browser opens a REAL popup to google.com
      3. User enters credentials on Google's actual site
      4. Google redirects back with authentication token

      BitB Attack Flow:
      1. User clicks "Sign in with Google" on malicious site
      2. Site creates a FAKE popup using HTML/CSS/JavaScript
      3. Fake popup shows fake address bar displaying "accounts.google.com"
      4. User enters credentials on attacker's fake page
      5. Attacker captures credentials and simulates success

      The entire "browser window" is actually just HTML elements styled to look like a browser!      

  - id: "bitb-demo"
    type: "interactive"
    title: "Interactive BitB Demo"
    interactiveComponent: "BitBDemo"
    content: |
      Below you'll see two login scenarios. One uses a REAL browser popup (secure), and one uses a BitB attack (malicious).

      Can you identify the fake? Pay close attention to the details!      

  - id: "question-1"
    type: "question"
    questionType: "multiple_choice"
    question: "What are the key indicators that can help identify a Browser-in-the-Browser attack?"
    options:
      - id: "https-lock"
        text: "The presence of HTTPS and a lock icon in the address bar"
        isCorrect: false
        points: 0
      - id: "window-behavior"
        text: "The popup window cannot be dragged outside the main browser window"
        isCorrect: true
        points: 20
      - id: "inspect-element"
        text: "Right-clicking allows you to 'Inspect Element' on the address bar"
        isCorrect: true
        points: 20
      - id: "domain-name"
        text: "The domain name shown in the address bar"
        isCorrect: false
        points: 0
    maxPoints: 40
    feedback:
      correct: "Excellent! Real browser windows can be moved anywhere and their UI cannot be inspected as HTML elements."
      incorrect: "Think about what differentiates a real browser window from HTML/CSS elements on a webpage. The lock icon and domain can both be faked!"

  - id: "detection-techniques"
    type: "content"
    title: "Detecting BitB Attacks"
    content: |
      How to spot a Browser-in-the-Browser attack:

      1. **Try to Drag the Window**
         • Real popups can be dragged outside the browser
         • Fake popups are trapped within the main window

      2. **Check if Address Bar is Selectable**
         • Real address bars: text is selectable
         • Fake address bars: usually just an image or styled div

      3. **Right-Click the Address Bar**
         • Real browser: no "Inspect Element" option
         • Fake browser: shows HTML inspection menu

      4. **Look for Pixel-Perfect Details**
         • Fake windows may have slight styling differences
         • Shadow effects, fonts, or spacing might be off

      5. **Check Your Browser's Task Bar**
         • Real popups appear as separate windows in taskbar
         • Fake popups don't create new window entries

      6. **Use Browser Extensions**
         • Some extensions can detect fake browser UI      

  - id: "question-2"
    type: "question"
    questionType: "single_choice"
    question: "A website asks you to 'Sign in with Microsoft' and a popup appears. What is the SAFEST approach?"
    options:
      - id: "trust-https"
        text: "Check for HTTPS in the address bar and proceed if present"
        isCorrect: false
        points: 0
      - id: "test-window"
        text: "Try to drag the popup outside the browser window to verify it's real"
        isCorrect: true
        points: 35
      - id: "check-domain"
        text: "Carefully read the domain name to ensure it's Microsoft's real domain"
        isCorrect: false
        points: 0
      - id: "close-and-manual"
        text: "Close the popup and manually navigate to Microsoft's site"
        isCorrect: false
        points: 10
    maxPoints: 35
    feedback:
      correct: "Perfect! Testing if the window can be dragged outside the browser is the most reliable quick check. Though manually navigating is also very safe!"
      incorrect: "While checking the domain helps, it can be faked in a BitB attack. The physical behavior of the window (can it be dragged out?) reveals the truth."

  - id: "prevention"
    type: "content"
    title: "Protecting Against BitB Attacks"
    content: |
      For Users:
      • Always test if popup windows can be moved freely
      • Use password managers (they check actual domains)
      • Enable 2FA/MFA for additional security layer
      • Be suspicious of unexpected login prompts
      • Manually navigate to sites instead of clicking links

      For Developers:
      • Educate users about OAuth popup behavior
      • Use OAuth redirect flow instead of popups when possible
      • Implement additional verification steps
      • Consider passwordless authentication methods
      • Show clear security indicators in your app

      For Organizations:
      • Train employees to recognize advanced phishing
      • Deploy anti-phishing browser extensions
      • Use hardware security keys (FIDO2/WebAuthn)
      • Monitor for suspicious authentication attempts
      • Implement conditional access policies      

  - id: "question-3"
    type: "question"
    questionType: "free_text"
    question: "Why are password managers particularly effective at protecting against BitB attacks?"
    validationRules:
      keywords:
        required: ["domain", "autofill", "real"]
        partialCredit: 8
      minLength: 40
    maxPoints: 25
    feedback:
      correct: "Excellent! Password managers check the actual domain of the page and won't autofill credentials on fake domains, even if they look legitimate."
      incorrect: "Think about how password managers verify which site they're on before filling in credentials. They check the real URL, not what's displayed visually."

scoring:
  passingScore: 75
  maxTotalPoints: 100