How do I combine markdown, remark-math with rehype-santize and rehype-raw?

[blazzy]

How do I safely combine markdown, remark-math with rehype-santize and rehype-raw?

The default schema doesn't allow for svg. Something like this keeps the SVG from being rendered.

<ReactMarkdown
  children="$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$"
  rehypePlugins=[rehypeMathJax, rehypeRaw, [rehypeSanitize, defaultSchema]],
  remarkPlugins: [RemarkMathPlugin]
/>

Maybe I could go through and whitelist the different svg elements and attributes in the rehype-sanitize schema like this:

const santizeSchema = {
  ...defaultSchema,
  tagNames: [
    ...defaultSchema.tagNames,
    'svg',
    'defs',
    'path',
    'mjx-container',
    'g',
    'rect',
    'use',
  ],
  attributes: {
    ...defaultSchema.attributes,
    span: ['style', 'className'],
    div: ['className'],
    svg: ['xmlns', 'focusable', 'width', 'height', 'style', 'role', 'viewBox', 'xmlns:xlink'],
    path: ['id', 'd'],
    'mjx-container': ['jax', 'className', 'display'],
    'g': ['stroke', 'fill', 'transform', 'stroke-width', 'data*'],
    'rect': ['width', 'height', 'x', 'y'],
    'use': ['data*', 'xlink:href', 'xlink']
  }
}

I haven't had much luck with it. The xlink:href and xmlns:xlink attributes wouldn't apply (these are probably unsafe attributes to begin with). It's also a little tedious. Is there an easier approach?

It'd also be nice to have an approach that doesn't let the user manually enter svg attributes. Ideally the remark and rehype plugins would be the only things able to put svg into the output. But I'll settle for just being able to whitelist the svg elements properly.

[wooorm]

Hi there!

SVG is quite dangerous — there are good reasons for why GitHub et all don’t allow it. Also allowing classNames everywhere opens you up to attacks.

You seem to be trying to allow basically all things in SVG which implies that you trust your content. If that’s the case, than perhaps you could skip this package?

[blazzy]

Hi wooorm,

I don't trust the content 100%, but I do intend to render any content within an iframe that points to a separate domain. It's a strategy I see sites like codesandbox and repl.it using.

Some code bock and other rendering logic I'm using sets custom class names, so I planned on whitelisting them to a finite list. I have no idea what to do to make the SVGs secure. I was hoping there was some way to allow rehype-mathjax to put together the SVGs and just trust the bits that came from it. But I can't think of a way to make that possible unless the mathjax was inserted in after the sanitize step somehow.

You're probably right and I should just skip the package. The iframe technique might be good enough. Thanks for the feedback!