RemarkJS, <img> tag not rendered to html

So, I tried to use Github Issue as my CMS. So I render the markdown into html in this blog. But I found an issue.

When I took a screenshot from my computer, and paste it into github. It becomes <img> tag like this, instead of ![](http://your_image_url)

image

But the I found out my blog post doesn't render the <img> tag. So I try debug it.

Turns out this remarkjs omits html tag, because of security issue as mentioned in their docs

image image

The solution is to use rehype-raw to allow html inside markdown. Here's how I use it inside my code

import markdown from 'remark-parse'
import images from 'remark-images'
import markdown2rehype from 'remark-rehype'
import unified from 'unified'
import highlight from 'rehype-highlight'
import html from 'rehype-stringify'
import raw from 'rehype-raw'

...

  const reHTML = await unified()
    .use(markdown)
    .use(images)
    .use(markdown2rehype, { allowDangerousHtml: true })
    .use(raw)
    .use(highlight)
    .use(html)
    .process(post.body)

You have to be aware, there's a security issue when you allow html inside your markdown.

Improper use of rehype-raw can open you up to a cross-site scripting (XSS) attack.
Either do not combine this plugin with user content or use rehype-sanitize.

I tried to use rehype-sanitize. But it also remove the class in my html. Which breaks my code highlighting. So, for the sake of simplicity and 80/20 principle. I decided to not using rehype-sanitize for now, it's probably too much to handle security issue for just a blog like mine. I might handle it later when I have some spare time, or I might even migrate from remark to mdx. So, I'll just keep it simple for now.

Reach me on twitter @muhajirdev
This site is built with NextJS, hosted on Netlify, and uses Github Issues as CMS