Backport the prismjs 1.27.0 upgrade to 3.x

[stof]

react-syntax-highlighter is still using refractor 3 for now. As prismjs 1.27.0 fixes an XSS vulnerability, would you agree to backport that upgrade to a 3.x version of refractor ?

[wooorm]

• Where does it say there’s a security fix?
• Could it become acceptable to a) maintain an unmaintained project, or b) switch away from an unmaintained project?

[72636c]

Here you go:

• Command Line: Escape markup in command line output PrismJS/prism#3341
• https://security.snyk.io/vuln/SNYK-JS-PRISMJS-2404333

I think many of us on 3.x haven't upgraded because our packages/tools are not ESM compatible yet. There's little I can add to the existing discourse on this subject except to say that it shouldn't be trivialised when we have major parts of the ecosystem (think Jest, TypeScript) struggling to land support.

[wooorm]

Thanks

• TS + ESM should be mostly fine!
• At some point, you should probably switch to something other than Jest. There are better maintained and faster alternatives out there. See also fix: jest-circus shares events among imports #11483 jestjs/jest#11529 (comment).
• I’m not saying things are trivial. I hope you understand that me maintaining multiple release lines isn’t either. That will stop at some point.
• This misses the point that react-syntax-highlighter isn’t maintained.

[wooorm]

Released!

[stof]

@wooorm I'm not using react-syntax-highlighter myself. I'm using Storybook, which uses react-syntax-highlighter

[stof]

And thanks for this backport.

[wooorm]

Perhaps you can ask Storybook folks, though?

[okonet]

Storybook will most probably switch from react-syntax-highlighter to something else in the future since we ran into other blockers with it: storybookjs/storybook#18090

[wooorm]

I don’t exactly get what’s going on there, but it seems to reference Prism actually running in the browser? I don’t think this package, nor react-syntax-highlighter, cause that?
Can you point me to the exact problem there?

[okonet]

Hmm, I don't know where the "real" Prism JS came from but it was a race condition caused by it for sure. I could spend more time investigating the dependency problem for sure.

[okonet]

I see the dependency here: /~https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/package.json and Storybook is using it here: /~https://github.com/storybookjs/storybook/blob/ca2441260bdf2eaf29e6cf58d34bde60856ca7e9/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx. So I'm also not sure how it's possible since /~https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/prism-light.js not importing it.

[wooorm]

There is some code to prevent Prism from doing weird stuff:

refractor/lib/core.js

Lines 40 to 56 in c5744cb

	const ctx =
	typeof globalThis === 'object'
	? globalThis
	: // @ts-expect-error
	typeof self === 'object'
	? // @ts-expect-error
	self
	: // @ts-expect-error
	typeof window === 'object'
	? // @ts-expect-error
	window
	: typeof global === 'object'
	? global
	: {}
	/* eslint-enable no-undef */
	const restore = capture()

.
It could be that that’s not working (on a past version?)?

[okonet]

Yeah it seem like it. There is another approach which I really like: /~https://github.com/FormidableLabs/prism-react-renderer/blob/master/patches/prismjs%2B1.26.0.patch

Essentially it removes unused code instead of working around it. It also cuts the bundle size quite significantly.

Maybe this approach could be considered in this repo as well?

[wooorm]

Landed that idea, thanks!
react-syntax-highlighter isn’t maintained actively though. You might still want to do that in house (and also potentially switch to lowlight/starry-night/etc)