remark-react: allowDangerousHTML doesn't work

It looks like it’s not possible to get remark-react to render raw html, even when passing the allowDangerousHTML flag through to mdast-util-to-hast.

For example, attempting to add this unit test fails:

diff --git a/test/index.js b/test/index.js
index d6cb228..22d347e 100644
--- a/test/index.js
+++ b/test/index.js
@@ -121,6 +121,19 @@ versions.forEach(function(reactVersion) {
       'passes toHast options to inner toHAST() function'
     )
 
+    t.equal(
+      React.renderToStaticMarkup(
+        remark()
+          .use(reactRenderer, {
+            createElement: React.createElement,
+            toHast: {allowDangerousHTML: true}
+          })
+          .processSync('<strong>raw</strong> html').contents
+      ),
+      '<p><strong>raw</strong> html</p>',
+      'renders raw html when specified'
+    )
+
     fixtures.forEach(function(name) {
       var base = path.join(root, name)
       var input = fs.readFileSync(path.join(base, 'input.md'))

with the error:

not ok 6 renders raw html when specified
  ---
    operator: equal
    expected: '<p><strong>raw</strong> html</p>'
    actual:   '<p>raw html</p>'

Is there a different expected configuration to be able to support raw HTML inputs?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

For those, who is looking for a way to use html tags in markdown with remark-parse, I leave this recipe here. Thanks to @ChristianMurphy for his suggestion. I’ve made just couple improvements:

Module rehype-dom-parse leads to error: document is not defined. So I replace it with rehype-parse.
Extract rehypeParser from handler, so it’s created only once.
Also notice about sanitize: false

You can try this snippet in console:

var unified = require('unified')
var remark = require('remark-parse')
var remark2react = require('remark-react');
var ReactDOMServer = require('react-dom/server');
var rehype = require('rehype-parse')

const sample = `
markdown is here
<div style="color:gray;">
text <a href="#">link</a>
</div>
`

const rehypeParser = unified().use(rehype, { fragment: true });

const parser = unified()
  .use(remark)
  .use(remark2react, {
    toHast: {
      handlers: {
        html: (h, node) => 
          // process raw HTML text into HAST so react remark can process it
          rehypeParser.parse(node.value).children
      }
    },
    sanitize: false
  });

const result = parser.processSync(sample)
const html = ReactDOMServer.renderToStaticMarkup(result.contents)
console.log(html)

output:

<p>markdown is here</p>
<div style="color:gray">
text <a href="#">link</a>
</div>

maestrow on Jun 3, 2020

@Hamms what I’ve been using is the toHast option https://github.com/remarkjs/remark-react#optionstohast

With:

// allow inline html to be rendered as React VDOM
import rehype from 'rehype-dom-parse';

// ....
     .use(remarkReact, {
          toHast: {
            handlers: {
              html: (h, node) =>
                // process raw HTML text into HAST so react remark can process it
                unified()
                  .use(rehype, { fragment: true })
                  .parse(node.value).children
            }
          }
        }
      )

ChristianMurphy on Apr 11, 2019

I guess I’m still confused about the intent of this library, then.

The readme implies that the purpose is to be able to render markdown safely, with the features of hast-util-sanitize. But as it’s built, the only nodes that end up in the tree that gets sent to hast-util-sanitize are either those specifically by remark - which are already safe - or raw nodes which may contain something unsafe but which are entirely removed by hast-util-sanitize (and also by hast-to-hyperscript), making the existence of sanitization in this project both redundant and misleading.

Is the point of this to provide a MDAST renderer that doesn’t allow raw html at all, or is it to provide one that only renders sanitized HTML?

Hamms on Apr 19, 2019