Using dompurify with SSR or Server Component fails with webpack error #46893

karlhorky · 2023-03-07T17:42:42Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.2.4-canary.5
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/angry-thunder-s7tvqk?file=%2Fapp%2Fpage.tsx

To Reproduce

Open the CodeSandbox above, main code is this in app/page.tsx

import DOMPurify from "dompurify";

export default function Home() {
  return (
    <div
      dangerouslySetInnerHTML={{
        // 💥 Error: dompurify__WEBPACK_IMPORTED_MODULE_1___default(...).sanitize is not a function
        __html: DOMPurify.sanitize("<img src=x onerror=alert(1)//>"),
      }}
    />
  );
}

Observe the error message below

Error: dompurify__WEBPACK_IMPORTED_MODULE_1___default(...).sanitize is not a function

This kind of works in the pages/ directory (the image appears in the browser), although still throws an error while rendering in SSR.

Describe the Bug

It seems that the dompurify library does not support Node.js usage out of the box.

One recommendation from Stack Overflow is to use isomorphic-dompurify (300k weekly downloads vs 3.5m for dompurify)

Expected Behavior

dompurify works out of the box with Next.js and Node.js

Related issues

How to sanitize HTML for passing it to 'dangerouslySetInnerHTML' #2711

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

karlhorky · 2023-03-07T17:45:50Z

Looking into the isomorphic-dompurify library, it uses jsdom internally to construct a DOM and pass the window object to the DOMPurify function.

So it seems like something like this should work:

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

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

And indeed, then we get new error messages:

Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/.../node_modules/jsdom/lib/jsdom'
> Build error occurred

This can be tracked down to here:

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

Where there is no concrete solution, but it seems like canvas is a required dependency, so would be good to install it.

Then after installing canvas, another error message - this one seems similar to what happened with #46493 :

error - ./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/canvas/build/Release/canvas.node
./node_modules/canvas/lib/bindings.js
./node_modules/canvas/index.js
./node_modules/jsdom/lib/jsdom/utils.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

So maybe it needs something to be marked as externals in the webpack config.... 🤔 eg. like this:

next.config.js

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    config.externals = [...config.externals, "canvas"];
    return config;
  },
};

Tried adding canvas first, and got some other errors:

warn  - ./node_modules/debug/src/node.js
Module not found: Can't resolve 'supports-color' in '/project/sandbox/node_modules/debug/src'

Import trace for requested module:
./node_modules/debug/src/node.js
./node_modules/debug/src/index.js
./node_modules/http-proxy-agent/dist/agent.js
./node_modules/http-proxy-agent/dist/index.js
./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js
./node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/buffer-util.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx
warn  - ./node_modules/debug/src/node.js
Module not found: Can't resolve 'supports-color' in '/project/sandbox/node_modules/debug/src'

Import trace for requested module:
./node_modules/debug/src/node.js
./node_modules/debug/src/index.js
./node_modules/http-proxy-agent/dist/agent.js
./node_modules/http-proxy-agent/dist/index.js
./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js
./node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/buffer-util.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx
wait  - compiling /_error (client and server)...
warn  - ./node_modules/debug/src/node.js
Module not found: Can't resolve 'supports-color' in '/project/sandbox/node_modules/debug/src'

Import trace for requested module:
./node_modules/debug/src/node.js
./node_modules/debug/src/index.js
./node_modules/http-proxy-agent/dist/agent.js
./node_modules/http-proxy-agent/dist/index.js
./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js
./node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/buffer-util.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

./node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in '/project/sandbox/node_modules/ws/lib'

Import trace for requested module:
./node_modules/ws/lib/validation.js
./node_modules/ws/lib/receiver.js
./node_modules/ws/wrapper.mjs
./node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js
./node_modules/jsdom/lib/jsdom/browser/Window.js
./node_modules/jsdom/lib/api.js
./app/page.tsx

So maybe jsdom is required too? Eg. this config:

next.config.js

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    config.externals = [...config.externals, "canvas", "jsdom"];
    return config;
  },
};

After restarting the dev server and reloading the page, this works! (image is supposed to be broken)

karlhorky · 2023-03-07T17:56:38Z

TLDR version: To use dompurify with Next.js and Node.js, install jsdom and canvas to construct a window object and pass to the DOMPurify() function:

CodeSandbox Demo: https://codesandbox.io/p/sandbox/lingering-river-j5fpi7?file=%2Fapp%2Fpage.tsx

karlhorky · 2023-03-07T17:57:54Z

@timneutkens @ijjk would you accept a PR for adding canvas and jsdom as externals to the webpack default externals opt-out list serverComponentsExternalPackages?

karlhorky · 2023-03-07T18:57:16Z

cc @JesseKoldewijn, in case this approach is accepted by the team and you want to get another PR in for Next.js!

JesseKoldewijn · 2023-03-07T19:00:09Z

What seems to be the package that throws up? Canvas or jsdom?

JesseKoldewijn · 2023-03-07T19:00:56Z

As in, from what I understand after reading through this issue it seems like canvas is supposed to be a peer dep. of jsdom.

JesseKoldewijn · 2023-03-07T19:21:26Z

Ill take a look into it in a sec. Currently omw home🤙

JesseKoldewijn · 2023-03-07T21:12:17Z

Hey sorry, something came up regarding my grandpa that got incurable sick about 2 weeks ago (or rather we found out about it last week). I'll take a look tomorrow at work at this current issue and will keep y'all in the loop. Sorry for the delay.

karlhorky · 2023-03-10T09:25:06Z

@JesseKoldewijn no worries, just when you get a chance. The packages canvas and jsdom should be added to the list, for the reasons described above (they cannot be bundled).

JesseKoldewijn · 2023-03-10T09:32:25Z

has that already be done? or shall I do that for y'all

karlhorky · 2023-03-10T09:42:17Z

Hasn't been done yet, nope! If you want to get another PR in, go ahead :)

JesseKoldewijn · 2023-03-10T09:44:05Z

Will do! 👍

#46990) fixes #46893 ### What? fixing compile issue reguarding the dompurify package. ### Why? To allow the usage of dompurify ### How? Added jsdom and canvas to the external packages list which are used by dompurify and throw errors if not added to this list.

karlhorky · 2023-03-12T10:24:16Z

Thanks for the PR and merge @JesseKoldewijn @ijjk ! 🙌 From a first look, seems like [email protected] is working:

CodeSandbox demo: https://codesandbox.io/p/sandbox/quirky-gagarin-speccj?file=%2Fapp%2Fpage.tsx

karlhorky · 2023-03-12T10:32:22Z

One thing that is kind of unusual to me is this extra wait - compiling /_error (client and server)... in the output (second to last line below), even though an error does not appear on the screen or in the logs (maybe this is filtered out somehow or hidden during client rendering?)

$ yarn dev
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
event - compiled client and server successfully in 963 ms (262 modules)
wait  - compiling...
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 1038 ms (451 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 151 ms (452 modules)

If I remove the DOMPurify(new JSDOM(..., then the error goes away...

JesseKoldewijn · 2023-03-12T10:39:03Z

I've also seen that error compile pop up when using framer motion presence (the page transition component) so I'm not really sure where that _error compile wait comes from.

karlhorky · 2023-03-12T10:40:03Z

ohh 🙈 It's the XSS payload <img src=x onerror=alert(1)//> lol

This can also be reproduced without DOMPurify, like this:

export default function Home() {
  return <img src="x" />;
}

The 404 will cause the error page to be rendered:

JesseKoldewijn · 2023-03-12T19:19:58Z

Ah gotcha

github-actions · 2023-04-12T00:03:31Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

karlhorky added the bug Issue was opened via the bug report template. label Mar 7, 2023

This was referenced Mar 7, 2023

Created an isomorphic wrapper for DOMPurify cure53/DOMPurify#400

Closed

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

Open

JesseKoldewijn mentioned this issue Mar 10, 2023

fix: added jsdom & canvas to the external packages list - fixes #46893 #46990

Merged

kodiakhq bot closed this as completed in #46990 Mar 10, 2023

DuCanhGH mentioned this issue Mar 15, 2023

Fix(typedRoutes): fixed files from directories other than pages and app getting into Route #47184

Merged

github-actions bot locked as resolved and limited conversation to collaborators Apr 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using dompurify with SSR or Server Component fails with webpack error #46893

Using dompurify with SSR or Server Component fails with webpack error #46893

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023

karlhorky commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

karlhorky commented Mar 10, 2023

JesseKoldewijn commented Mar 10, 2023

karlhorky commented Mar 10, 2023

JesseKoldewijn commented Mar 10, 2023

karlhorky commented Mar 12, 2023

karlhorky commented Mar 12, 2023

JesseKoldewijn commented Mar 12, 2023

karlhorky commented Mar 12, 2023

JesseKoldewijn commented Mar 12, 2023

github-actions bot commented Apr 12, 2023

Using dompurify with SSR or Server Component fails with webpack error #46893

Using dompurify with SSR or Server Component fails with webpack error #46893

Comments

karlhorky commented Mar 7, 2023 • edited Loading

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Related issues

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

karlhorky commented Mar 7, 2023 • edited Loading

karlhorky commented Mar 7, 2023 • edited Loading

karlhorky commented Mar 7, 2023

karlhorky commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

JesseKoldewijn commented Mar 7, 2023

karlhorky commented Mar 10, 2023

JesseKoldewijn commented Mar 10, 2023

karlhorky commented Mar 10, 2023

JesseKoldewijn commented Mar 10, 2023

karlhorky commented Mar 12, 2023

karlhorky commented Mar 12, 2023

JesseKoldewijn commented Mar 12, 2023

karlhorky commented Mar 12, 2023

JesseKoldewijn commented Mar 12, 2023

github-actions bot commented Apr 12, 2023

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading

karlhorky commented Mar 7, 2023 •

edited

Loading