Created an isomorphic wrapper for DOMPurify #400

kkomelin · 2020-03-18T15:31:37Z

Hey guys,

The issue is not typical, so excuse me for not following the issue template.

I don't have proper words to thank you for your work on the library. It's probably one of the most important projects in the JS ecosystem, even if some people don't know about it yet.

While working with DOMPurify in Next.js (with and without SSR), I noticed that it needs some additional initialization logic for server-side code (sort of a fake DOM tree). To simplify the initialization and make it universal on both frontend and backend, I've created an isomorphic wrapper https://github.com/kkomelin/isomorphic-dompurify

I would appreciate your feedback on the project and it would be an honor for me if it could give ideas on how to make DOMPurify itself even better.

Thanks,
Konstantin

cure53 · 2020-03-18T15:41:22Z

Haha, this is cool, thanks for pointing this out :D

kkomelin · 2020-03-19T07:05:44Z

@cure53 You're welcome.

karlhorky · 2023-03-07T18:00:48Z

For usage of DOMPurify in Next.js Server Components without the wrapper package isomorphic-dompurify, here is a demo of a simple version:

Using dompurify with SSR or Server Component fails with webpack error vercel/next.js#46893 (comment)

Mainly the code is this:

import DOMPurify from "dompurify";
import { JSDOM } from "jsdom";

export default function Home() {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: DOMPurify(new JSDOM("<!DOCTYPE html>").window).sanitize(
          "<img src=x onerror=alert(1)//>"
        ),
      }}
    />
  );
}

There is also some needed webpack configuration to fix the issues with bundling jsdom and canvas, also described in the issue above.

@cure53 maybe this recipe above would be good to add to the readme for Node.js and Next.js users? I was looking for an example of how to use it with Node.js and ended up looking at the source of isomorphic-dompurify.

kkomelin · 2023-03-07T18:19:47Z

@karlhorky Thanks. If the webpack configuration is adjusted for better bundling of jsdom/canvas as you suggested, will isomorphic-dompurify suit you? Because it does pretty much the same things which you illustrated in your code example.

karlhorky · 2023-03-07T18:24:17Z

If the webpack configuration is adjusted for better bundling of jsdom/canvas as you suggested, will isomorphic-dompurify suit you?

No, I personally think isomorphic-dompurify should be deprecated with a notice on how to achieve the same thing using the main dompurify library (3.5m weekly downloads vs 300k for isomorphic-dompurify).

I think this because:

What happens if you're unavailable in the future to maintain the library?
What happens if your supply chain security is not as strong as the dompurify library?
Other security concerns about the wrapper package...

If the wrapper can be done with a few lines of code in a project, I think the wrapper package should not exist.

Alternative: it could be absorbed into the DOMPurify repo itself (eg. as a separate import path dompurify/isomorphic or separate official package eg. @dompurify/isomorphic) if @cure53 is willing to maintain that, so that it can be maintained and enjoy the security benefits of the more popular package / ecosystem.

kkomelin · 2023-03-07T18:44:40Z

@karlhorky Thank you for your opinion. I can't agree with it but I respect it.

People use packages because they make people's work simpler. It doesn't really matter how much code is inside. There are some tiny packages in JS ecosystem which are popular enough.
As for your security concerns, such as what happens if I'm unavailable, I can also address this question to any opensource project maintainer. if anything happens tomorrow with any of us, the community will pick the project up and create a fork.
As for myself, I normally apply dompurify updates the same week they are released.
As for other hypothetical security concerns which are not based on anything, let's leave them unaddressed.
@cure53 and I already thought about merging the isomorphic-dompurify code into dompurify and decided not to proceed with it. But please let us know if you'd like to help with it.

karlhorky · 2023-03-07T19:01:19Z

1. People use packages because they make people's work simpler. It doesn't really matter how much code is inside. There are some tiny packages in JS ecosystem which are popular enough.
2. As for your security concerns, such as what happens if I'm unavailable, I can also address this question to any opensource project maintainer. if anything happens tomorrow with any of us, the community will pick the project up and create a fork.

Indeed, small packages + unavailable maintainers are not normally a problem - the community heals - but dompurify is a library that deals with security, so all security concerns are heightened with this.

kkomelin · 2023-03-07T19:08:50Z

@karlhorky ,

Indeed, small packages + unavailable maintainers are not normally a problem - the community heals - but dompurify is a library that deals with security, so all security concerns are heightened with this.

Makes sense. If you help dompurify work server-side out of the box, I will deprecate the isomorphic-dompurify project. No problem at all.

cure53 closed this as completed Mar 22, 2020

vhscom mentioned this issue May 27, 2022

Support for Node and TypeScript #691

Closed

kkomelin mentioned this issue Mar 7, 2023

Can't resolve 'canvas' on next.js serverless app kkomelin/isomorphic-dompurify#54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Created an isomorphic wrapper for DOMPurify #400

Created an isomorphic wrapper for DOMPurify #400

kkomelin commented Mar 18, 2020 •

edited

Loading

cure53 commented Mar 18, 2020 •

edited

Loading

kkomelin commented Mar 19, 2020

karlhorky commented Mar 7, 2023 •

edited

Loading

kkomelin commented Mar 7, 2023

karlhorky commented Mar 7, 2023 •

edited

Loading

kkomelin commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023

kkomelin commented Mar 7, 2023 •

edited

Loading

Created an isomorphic wrapper for DOMPurify #400

Created an isomorphic wrapper for DOMPurify #400

Comments

kkomelin commented Mar 18, 2020 • edited Loading

cure53 commented Mar 18, 2020 • edited Loading

kkomelin commented Mar 19, 2020

karlhorky commented Mar 7, 2023 • edited Loading

kkomelin commented Mar 7, 2023

karlhorky commented Mar 7, 2023 • edited Loading

kkomelin commented Mar 7, 2023 • edited Loading

karlhorky commented Mar 7, 2023

kkomelin commented Mar 7, 2023 • edited Loading

kkomelin commented Mar 18, 2020 •

edited

Loading

cure53 commented Mar 18, 2020 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

kkomelin commented Mar 7, 2023 •

edited

Loading

kkomelin commented Mar 7, 2023 •

edited

Loading