azu/safe-marked

Automatically include jsdom?

mesqueeb opened this issue · 1 comments

mesqueeb commented

Hi @azu
I was intrigued by your comment here:
markedjs/marked#1519 (comment)

@UziTech Yes, I know.

I've tried to use marked@0.7 and DOMPurify, but this combination has a bit complex context.
Because, DOMPurify does not work on Node.js without jsdom.

  • marked is universal/isomophic library

  • DOMPurify is not universal/isomophic library

    • It require jsdom for Node.js

The browser enviroment does not need jsdom, but Node.js env does need jsdom.
It require a bit complex code.

if(THIS_ENV_IS_NODE){
  return marked + dompurify + jsdom
} else{
  return marked + dompurify
}

So, I've created a wrapper library for optimizing Browser and Node.js.

safe-marked is a wrapper library of marked, DOMPurify, and jsdom.
Also, safe-marked define 'browser' field in package.json for optimizing browser bundle.
The browser entry point does not include jsdom.

This wrapper aim to reduce pacakge size for browser.

  package           size      minified  gzipped
  safe-marked       90.15 KB  39.36 KB  13.82 KB (browser bundle size)
  marked@0.7.0      45.05 KB  23.87 KB  7.87 KB
  dompurify@1.0.11  45.21 KB  15.3 KB   5.99 KB
  
  # Other Markdown library  
  markdown-it@9.0.0  325.52 KB  92.69 KB  32.77 KB
  showdown@1.9.0     157.28 KB  71.06 KB  23.55 KB

Conclusion

The documentation just say following

Marked does not sanitize the output HTML. Please use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! 🚨

Afte using marked + DOMPurify, I feed that it is hard to use marked safety.
I think that we need to improve documentation about the usage of sanitizing.
Or just come back to support sanitize option...

However, The documentation is not fundamental solution.

Thanks.

📝 Note: The size of recommentation libraries :

sanitize-html is too large. insane looks like that is not maintained and have some problem.
So, I've selected DOMPurify. DOMPurify is maintained by security company.

  package               size      minified   gzipped
  dompurify@1.0.11      45.21 KB  15.3 KB    5.99 KB
  sanitize-html@1.20.1  1.02 MB   210.06 KB  64.81 KB
  insane@2.6.2          18.61 KB  4.64 KB    1.9 KB

Also, I love package size of marked ❤️

However, does safe-marked include JSDom by default? If I don't use SSR in an SPA of mine, I might not need JSDom.

azu commented

safe-marked define browser field.
In other word, safe-marked pacakge includes two type of entry point.

So, browser entrypoint does not includes jsdom. (just use marked + dompurify)

webpack support browser field and the output bundle does not includes jsdom.
https://webpack.js.org/configuration/resolve/#resolvemainfields

Does my answer make sense?

  • 👍1
  • 😄1
  • 🎉1