9.0.0 break inline base64-encoded images

[justrealmilk]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

9.0.0

Link to runnable example

No response

Steps to reproduce

Attempt to display

![dreamweaver-32](data:image/png;base64,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)

with react-markdown 8.0.7 vs 9.0.0

Expected behavior

Image should display

Actual behavior

Something bad happens resulting in the src value being lost

Runtime

Node v17

Package manager

npm 8

OS

Linux

Build and bundle tools

Next.js

[ChristianMurphy]

Welcome @justrealmilk!
Sorry you ran into a spot of trouble.
Sanitizing URLs is one of the security features of react-markdown.
This is done by the urlTransform option https://github.com/remarkjs/react-markdown#options
The default sanitizer is https://github.com/micromark/micromark/tree/main/packages/micromark-util-sanitize-uri#readme which disallows the data: protocol because it is unsafe.
You are welcome to customize the sanitizer to allow unsafe URLs if you trust them

[justrealmilk]

ah dang okay thanks urlTransform={(value: string) => value}

[wooorm]

Glad it works for you. But note for future readers: This is unsafe!

[justrealmilk]

How do I make an exception/call the default function to make it more safe?

[wooorm]

Least specific to most:

• You are allowing all URLs. This is always super unsafe.
• Even if you use the safe default for all URLs except for data URLs, data URLs are super unsafe.
• If you use the defaults for everything except for images as data URLs, many image formats will be unsafe. GIFs, WebPs, and SVGs for example can include JS.

How to use the default function:

The default function is exposed and documented: https://github.com/remarkjs/react-markdown#defaulturltransformurl. Import it.
Then pass the documented urlTransform option.
Such as this pseudo code:

urlTransform(url) {
  if (someCondition) {
    return myCustomProcessing(url)
  }
  
  return defaultUrlTransform(url)
}

[szszoke]

@wooorm could you provide/link to some documentation regarding why this is unsafe?

I tried a few attacks where JS was embedded in image files but they didn't seem to work.

[ChristianMurphy]

@szszoke there are a lot of reasons why it is a bad idea.
It is also fairly well known, searching the topic turns up many resources.

A selection of them:

• https://www.thesslstore.com/blog/chrome-data-url-phishing/
• https://security.stackexchange.com/questions/94993/is-including-the-data-scheme-in-your-content-security-policy-safe
• https://www.ndss-symposium.org/wp-content/uploads/madweb2022_23003_paper.pdf

[szszoke]

Thanks! I'm not disputing that this is an issue, I just wanted to see some concrete examples.