initial commit

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

@@ -0,0 +1,174 @@
+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

backend/lessons/configs/phishing-email-basics.yaml

@@ -0,0 +1,117 @@
+lessonKey: "phishing-email-basics"
+title: "Phishing Email Detection Basics"
+description: "Learn to identify common phishing tactics in emails and protect yourself from email-based attacks"
+difficultyLevel: "beginner"
+estimatedDuration: 15
+module: "phishing-email-basics"
+
+steps:
+  - id: "intro"
+    type: "content"
+    title: "What is Phishing?"
+    content: |
+      Phishing is a type of cyber attack where attackers impersonate legitimate organizations
+      to steal sensitive information like passwords, credit card numbers, or personal data.
+
+      Phishing emails often:
+      - Create a sense of urgency
+      - Contain suspicious links or attachments
+      - Have spelling and grammar errors
+      - Use generic greetings like "Dear Customer"
+      - Request sensitive information
+
+  - id: "example-1"
+    type: "content"
+    title: "Example Phishing Email"
+    content: |
+      **From:** security@paypa1-verify.com
+      **Subject:** Urgent: Verify Your Account Now!
+
+      Dear Valued Customer,
+
+      Your PayPal account has been temporarily suspended due to unusual activity.
+      To restore your account, please verify your information immediately by clicking
+      the link below:
+
+      [Verify Account Now]
+
+      Failure to verify within 24 hours will result in permanent account suspension.
+
+      Thank you,
+      PayPal Security Team
+
+  - id: "question-1"
+    type: "question"
+    questionType: "multiple_choice"
+    question: "What are the suspicious elements in this email? (Select all that apply)"
+    options:
+      - id: "misspelled-domain"
+        text: "The sender's domain is misspelled (paypa1 instead of paypal)"
+        isCorrect: true
+        points: 15
+      - id: "urgent-language"
+        text: "Uses urgent/threatening language to create pressure"
+        isCorrect: true
+        points: 15
+      - id: "generic-greeting"
+        text: "Uses generic greeting 'Dear Valued Customer'"
+        isCorrect: true
+        points: 10
+      - id: "requests-action"
+        text: "Requests immediate action via a link"
+        isCorrect: true
+        points: 10
+      - id: "legitimate"
+        text: "This appears to be a legitimate email"
+        isCorrect: false
+        points: 0
+    maxPoints: 50
+    feedback:
+      correct: "Excellent! You identified all the key phishing indicators."
+      partial: "Good job! You spotted some red flags, but review the email again carefully."
+      incorrect: "Not quite. Let's review the common signs of phishing emails."
+
+  - id: "question-2"
+    type: "question"
+    questionType: "single_choice"
+    question: "What should you do if you receive a suspicious email like this?"
+    options:
+      - id: "click-link"
+        text: "Click the link to verify my account"
+        isCorrect: false
+        points: 0
+      - id: "reply-email"
+        text: "Reply to the email asking if it's legitimate"
+        isCorrect: false
+        points: 0
+      - id: "delete-report"
+        text: "Delete the email and report it as phishing"
+        isCorrect: true
+        points: 25
+      - id: "forward-friends"
+        text: "Forward it to friends to warn them"
+        isCorrect: false
+        points: 0
+    maxPoints: 25
+    feedback:
+      correct: "Perfect! Deleting and reporting phishing emails is the right approach."
+      incorrect: "That's not safe. Never click links or reply to suspicious emails. Delete and report them."
+
+  - id: "question-3"
+    type: "question"
+    questionType: "free_text"
+    question: "Describe at least three things you should check before clicking a link in an email."
+    validationRules:
+      - type: "contains_keywords"
+        keywords: ["sender", "domain", "url", "link", "https", "hover", "address", "spelling", "grammar"]
+        minMatches: 3
+      - type: "min_length"
+        value: 50
+    maxPoints: 25
+    feedback:
+      correct: "Great answer! You understand the importance of verifying emails before taking action."
+      incorrect: "Consider checking the sender's email address, hovering over links to see the real URL, and looking for HTTPS."
+
+scoring:
+  passingScore: 70
+  maxTotalPoints: 100

backend/lessons/configs/sql-injection-shop.yaml

@@ -0,0 +1,143 @@
+lessonKey: "sql-injection-shop"
+title: "SQL Injection Attack - Online Shop Demo"
+description: "Learn how SQL injection vulnerabilities work through a realistic online shop scenario"
+difficultyLevel: "intermediate"
+estimatedDuration: 20
+module: "sql-injection-shop"
+
+steps:
+  - id: "intro"
+    type: "content"
+    title: "What is SQL Injection?"
+    content: |
+      SQL Injection is one of the most dangerous web application vulnerabilities. It occurs when an attacker can insert malicious SQL code into a query, allowing them to:
+
+      • Access unauthorized data
+      • Modify or delete database records
+      • Bypass authentication
+      • Execute administrative operations
+
+      In this lesson, you'll explore a vulnerable online shop to understand how SQL injection works and why proper input validation is critical.
+
+  - id: "shop-demo"
+    type: "interactive"
+    title: "Vulnerable Online Shop"
+    interactiveComponent: "SQLShopDemo"
+    content: |
+      Below is a simplified online shop with a product search feature. The search functionality is vulnerable to SQL injection.
+
+      Try searching for normal products first, then experiment with SQL injection techniques.
+
+  - id: "question-1"
+    type: "question"
+    questionType: "multiple_choice"
+    question: "Which of the following search inputs could be used to exploit SQL injection?"
+    options:
+      - id: "normal-search"
+        text: "laptop"
+        isCorrect: false
+        points: 0
+      - id: "single-quote"
+        text: "' OR '1'='1"
+        isCorrect: true
+        points: 15
+      - id: "union-select"
+        text: "' UNION SELECT username, password FROM users--"
+        isCorrect: true
+        points: 15
+      - id: "drop-table"
+        text: "'; DROP TABLE products--"
+        isCorrect: true
+        points: 10
+    maxPoints: 40
+    feedback:
+      correct: "Correct! These inputs manipulate the SQL query structure."
+      incorrect: "Review the demo. SQL injection exploits use special characters like quotes and SQL keywords."
+
+  - id: "detection"
+    type: "content"
+    title: "How SQL Injection Works"
+    content: |
+      A vulnerable query might look like:
+
+      SELECT * FROM products WHERE name LIKE '%[USER_INPUT]%'
+
+      When a user searches for "laptop", the query becomes:
+      SELECT * FROM products WHERE name LIKE '%laptop%'
+
+      But if they enter "' OR '1'='1", it becomes:
+      SELECT * FROM products WHERE name LIKE '%' OR '1'='1%'
+
+      The OR '1'='1' condition is always true, so ALL products are returned!
+
+      More dangerous attacks can extract data from other tables or even delete data.
+
+  - id: "question-2"
+    type: "question"
+    questionType: "single_choice"
+    question: "What is the BEST way to prevent SQL injection vulnerabilities?"
+    options:
+      - id: "input-filtering"
+        text: "Filter out dangerous characters like quotes and semicolons"
+        isCorrect: false
+        points: 0
+      - id: "parameterized-queries"
+        text: "Use parameterized queries (prepared statements)"
+        isCorrect: true
+        points: 30
+      - id: "stored-procedures"
+        text: "Only use stored procedures for database access"
+        isCorrect: false
+        points: 0
+      - id: "input-length"
+        text: "Limit the length of user inputs"
+        isCorrect: false
+        points: 0
+    maxPoints: 30
+    feedback:
+      correct: "Excellent! Parameterized queries separate SQL code from user data, making injection impossible."
+      incorrect: "While filtering helps, parameterized queries are the gold standard. They ensure user input is always treated as data, never as SQL code."
+
+  - id: "mitigation"
+    type: "content"
+    title: "Preventing SQL Injection"
+    content: |
+      Best practices to prevent SQL injection:
+
+      1. **Parameterized Queries** (Most Important)
+         • Use prepared statements with bound parameters
+         • Never concatenate user input into SQL strings
+
+      2. **Input Validation**
+         • Validate data types (numbers, emails, etc.)
+         • Use allowlists for expected values
+
+      3. **Least Privilege**
+         • Database accounts should have minimal permissions
+         • Read-only accounts for read operations
+
+      4. **Web Application Firewalls**
+         • Can detect and block SQL injection attempts
+         • Should be used as an additional layer, not primary defense
+
+      5. **Regular Security Audits**
+         • Code reviews and penetration testing
+         • Automated vulnerability scanning
+
+  - id: "question-3"
+    type: "question"
+    questionType: "free_text"
+    question: "In your own words, explain why parameterized queries prevent SQL injection."
+    validationRules:
+      keywords:
+        required: ["parameter", "data", "separate"]
+        partialCredit: 10
+      minLength: 50
+    maxPoints: 30
+    feedback:
+      correct: "Great explanation! You understand that parameterized queries keep SQL structure separate from user data."
+      incorrect: "Think about how parameterized queries treat user input differently than string concatenation. Key concepts: separation of code and data."
+
+scoring:
+  passingScore: 70
+  maxTotalPoints: 100