When using rehype-sanitize, code components are not passed className

[starpit]

Without rehype-sanitize, the following markdown correctly passes the className="language-js" attribute to the code component callback:

```js
function foo() {}
```

However, when the rehype-sanitize plugin is added, the className attribute is not passed to the code component callback. Why would a rehype plugin (I thought rehype had to do with html, not plain markdown?) affect plain markdown content? And why would the language be treated as "dirty" content in need of sanitization? Thanks!

[ChristianMurphy]

@starpit that are a lot of ways remark and rehype can be combined. It's hard to offer a suggestion without knowing what you are trying and what your end goal is.
Could you share an example of what you are trying? A sandbox helps a lot. Here are some potential starters:

description	codesandbox	stackblitz
remark only (for markdown to markdown)	codesandbox	stackblitz
remark and rehype (for markdown to html)	codesandbox	stackblitz
react-markdown	codesandbox	stackblitz

and maybe some context on your goal?

[starpit]

https://codesandbox.io/s/cool-voice-68r89?file=/src/app.tsx

Is that working as intended? i.e. that inclusion of rehypeSanitize should change the className attribute of a code component?

[wooorm]

Yes, rehype-sanitize removes classes. Classes are a security vector. You can configure rehype-sanitize to allow certain things. Example: https://github.com/rehypejs/rehype-sanitize/tree/docs#example-syntax-highlighting.

[wooorm]

It’s an error because it’s an error.

There is an example of how to pass plugins with options in the react-markdown readme: https://github.com/remarkjs/react-markdown#use-a-plugin-with-options.

[starpit]

I see. Wow, this is all a lot more complex than with react-markdown v5. When I try following the array scheme, I get a runtime error:

https://codesandbox.io/s/cool-voice-68r89?file=/src/app.tsx

import _rehypeSanitize, { Options as RHSOptions } from 'rehype-sanitize'                                                         
const rhsOptions: RHSOptions = { attributes: { code: ['className'] }}                                                            
const rehypeSanitize: Options['rehypePlugins'][0] = [_rehypeSanitize, rhsOptions]                                                
const rehypePlugins: Options['rehypePlugins'] = [rehypeSanitize]   

TypeError: Cannot read properties of undefined (reading 'length'

Whereas if the rehype-sanitize options are:

const rhsOptions: RHSOptions = { attributes: { '*': ['className'] }}                                                            

then it works. I.e. replacing code: with '*':

[wooorm]

• it was not possible to sanitize HTML before
• You’re disallowing everything except for classNames on code (hence an error). The earlier mentioned shows how to extend schemas
• allowing all classes is unsafe, hence the recommendation I linked to uses:

  // List of all allowed languages:
  ['className', 'language-js', 'language-css', 'language-md']

[starpit]

It is definitely appreciated! I was expecting an html sanitizer to do a bit more of the heavy lifting at this level (e.g. redacting the dangerous portions of className, rather than removing them all).

As it stands, this will require several rounds of work on our side before we can enable the html sanitizer support. But it is a great feature to have!

[wooorm]

dangerous portions of className, rather than removing them al

Any class could be dangerous: https://github.com/ChALkeR/notes/blob/master/Improper-markup-sanitization.md#unsanitized-class-attribute. Removing all classes is the only 100% safe way.

Arguably, language-* could be allowed, if the assumption is that language-* classes are not used in client-side javascript to add event handlers, or that language-* classes are not used in CSS to create things that look like the rest of the site (as in, an .alert or .note class could look like “official” things).

Maybe that’s a fine choice to make (and much better than folks just turning sanitation (of classes) off). If so, this can be discussed in hast-util-sanitize