Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser console warnings with React and Vite #639

Open
bedwards-cms opened this issue Dec 14, 2023 · 11 comments
Open

Browser console warnings with React and Vite #639

bedwards-cms opened this issue Dec 14, 2023 · 11 comments

Comments

@bedwards-cms
Copy link

bedwards-cms commented Dec 14, 2023

The problem to solve

Lots of console warnings are being logged since adding sanitize-html to a React application running with vite.

This is details about the warning we are seeing.
https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility

Here is an example what we see in console:
image

Proposed solution

See if there is a reasonable resolution to eliminate this issue.

Alternatives

In this case, one alternative is to just switch to using domPurify

Additional context

Mention any other context or attach screenshots regarding the feature request.
Check the existing issue labels and add any you think are relevant, e.g.,
UI, UX, accessibility, security.

@boutell
Copy link
Member

boutell commented Dec 14, 2023

We don't use this module browser-side. I'm aware of some valid use cases, but it mostly makes much more sense to sanitize things in a place you can trust (e.g. on a server). So this is an area for community contributions.

@boutell
Copy link
Member

boutell commented Dec 14, 2023

Possibly it's time for a new major version that introduces a backwards compatibility break by making postcss support optional via a second, optional module. That seems to be source of just about all concerns about this. There is no mention of the fs module in sanitize-html itself.

@devCodeHub-star
Copy link

Hello @boutell

I am also getting all the warnings in my console. I have update the version from '2.7.3' to '2.12.1' but still I am getting all warnings.
image
image

Any solution ?

Thankyou

@KyleBrown-804
Copy link

This might be a dumb question but an important to ask nonetheless, if I am seeing these warnings (on a Vue/Nuxt 3 application), is there any concern about the functionality of the sanitizing working properly? As a followup and per @boutell's comment, would it be safer and better practice to move the sanitizing to an SSR context?

@boutell
Copy link
Member

boutell commented Mar 7, 2024

Really you have two options: you can sanitize the data once server side and save it in sanitized form, or you can sanitize it every time you output it on the client side. Here we prefer the former, because it is efficient and it's harder to do something unsafe, and so we don't use this module on the client side. Client side support is contributed by the community.

These warnings relate to Node.js features utilized by sanitize-html or its dependencies. Vite is telling you that it provided a simulation, but not a complete one, and there's a chance the module uses something it doesn't provide. Possibly that could be fixed by community contributors through eliminating calls to the mentioned features.

For what it's worth though, sanitize-html never does import path. It's not mentioned anywhere in the source. So it's probably a dependency of a sub-dependency, and that's a longer road tracking down the module that actually has the issue and contributing there or finding an alternative to that functionality for sanitize-html to use.

@KyleBrown-804
Copy link

Awesome, thank you for the insight 👍

@blittle
Copy link

blittle commented Mar 12, 2024

Related, but sanitize-html has problems running on cloudflare workers, which is also a server environment, but does not have Node APIs.

@boutell
Copy link
Member

boutell commented Mar 13, 2024

It sounds like this would need to be resolved upstream in postcss, so I would recommend checking into whether I'm right about that, and if so contributing to the solution there.

@vhscom
Copy link

vhscom commented Apr 24, 2024

Linking to vitejs/vite#7821

@vhscom
Copy link

vhscom commented Apr 24, 2024

Switching to DOMPurify as OP suggested resolved the wall of warnings with Vite 5. DOMPurify is DOM-only. If you're looking for an isomorphic solution in a single package, js-xss will also work when pre-rendering on the server.

raineorshine added a commit to cybersemics/em that referenced this issue May 10, 2024
Turns out that sanitize-html is primarily meant for node, not the browser. In Vite, this results in warnings about externalized node builtins.

dompurify is also 8 kB while sanitize-html was 80 kB.

See: apostrophecms/sanitize-html#639
raineorshine added a commit to cybersemics/em that referenced this issue May 11, 2024
Turns out that sanitize-html is primarily meant for node, not the browser. In Vite, this results in warnings about externalized node builtins.

dompurify is also 8 kB while sanitize-html was 80 kB.

See: apostrophecms/sanitize-html#639
@phil294
Copy link

phil294 commented Aug 5, 2024

You can use a polyfill:

https://github.com/davidmyersdev/vite-plugin-node-polyfills

// vite.config.js
plugins: [
nodePolyfills({
            include: ['process', 'tty', 'path', 'fs'],
            protocolImports: false,
        }),

Amounts to 69 KB bundle size increase / 16 KB gzipped

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants