Backport the prismjs 1.27.0 upgrade to 3.x

[Christophe Coevoet]

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 ?

[Titus]

• 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?

[Ryan Ling]

Here you go:

• 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.

[Titus]

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 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.

[Titus]

Released!

[Christophe Coevoet]

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

[Christophe Coevoet]

And thanks for this backport.

[Titus]

Perhaps you can ask Storybook folks, though?

[Andrey Okonetchnikov]

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

[Titus]

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?

[Andrey Okonetchnikov]

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.

[Andrey Okonetchnikov]

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.

[Titus]

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?)?

[Andrey Okonetchnikov]

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?

[Titus]

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)