Gatsby 5 - No longer able to retrieve script src's from getPostBodyComponents in onPreRenderHTML

[lewiscarvillesputnik]

Since the introduction of the ServerSliceRenderer in Gatsby 5 it appears the method for rendering the core Gatsby scripts via the onPreRenderHTML API has changed.

Previously I could retrieve the following scripts from the getPostBodyComponents in gatsby-ssr:

• webpack-runtime-*.js
• app-*.js

I would filter these scripts from getPostBodyComponents() and reuse them in a custom script for performance benefits.

let scripts = [];
scripts = getPostBodyComponents().filter(assets => assets.props.src);

const filteredJS = getPostBodyComponents()
  .filter(assets => assets.props.src !== scripts[0]?.props.src) // webpack-runtime-*.js
  .filter(assets => assets.props.src !== scripts[1]?.props.src); // app-*.js

filteredJS.push(
  <script
    key="scripts"
    dangerouslySetInnerHTML={{
      __html: `Custom script to make use of ${scripts[0]?.props.src} and ${scripts[1]?.props.src}`,
    }}></script>,
);

replacePostBodyComponents(filteredJS);

In Gatsby 5 however, these scripts no longer appear in getPostBodyComponents(). From what I can tell those scripts are being generated through the new slice API.

console.log(getPostBodyComponents());

Gatsby 5 Log
The inline script here is used for CDATA.

  ...
  {
    '$$typeof': Symbol(react.element),
    type: 'script',
    key: 'script-loader',
    ref: null,
    props: { id: 'gatsby-script-loader', dangerouslySetInnerHTML: [Object] },
    _owner: null
  },
  {
    '$$typeof': Symbol(react.element),
    type: [Function: ServerSliceRenderer],
    key: null,
    ref: null,
    props: { sliceId: '_gatsby-scripts' },
    _owner: null
  },

Gatsby 4 Log

  ...
  {
    '$$typeof': Symbol(react.element),
    type: 'script',
    key: 'script-loader',
    ref: null,
    props: { id: 'gatsby-script-loader', src: '/webpack-runtime-34d5ba44143482c1839e.js' },
    _owner: null
  },
  {
    '$$typeof': Symbol(react.element),
    type: 'script',
    key: 'script-loader',
    ref: null,
    props: { id: 'gatsby-script-loader', src: '/app-5b308a89c35f3562f13c.js' },
    _owner: null
  }

Is there any way I can retrieve the script src like was possible in Gatsby 4?

[LekoArts]

I would filter these scripts from getPostBodyComponents() and reuse them in a custom script for performance benefits.

What script and what performance benefit?

Is there any way I can retrieve the script src like was possible in Gatsby 4?

No, I can't think of a way to access that anymore

[lewiscarvillesputnik]

I'd remove the webpack-runtime-*.js and app-*.js scripts from being rendered in the HTML. I'd then insert a custom inline script which would load the webpack-runtime and app scripts after a user event had taken place, such as a mousemove, click, scroll, keydown, etc. This prevents the browser from having to execute that script during the initial load.

This technique pretty much guarantees top mobile pagespeed scores (100/100) as the test no longer picks up the existence of the app.js file, which in my project sits at 66kb and often gets flagged by Google as containing unused JS.

[JerzyDamian]

I would filter these scripts from getPostBodyComponents() and reuse them in a custom script for performance benefits.

What script and what performance benefit?

Is there any way I can retrieve the script src like was possible in Gatsby 4?

No, I can't think of a way to access that anymore

So we have the answer why 'gatsby-plugin-csp' is not working correctly anymore :) Because of what you've mentioned, there are hashes that are not listed inside CSP directives by the plugin. And it is beacuse (like you've mentioned), plugin is not able to get 'app-*.js' inside 'onPreRenderHTML', compute hashes and put them into CSP directives. It is very bad.

It should be treated like security-bug...

[Plummat]

Lewis, did you ever figure this out for v5? I'm in same scenario as you

[lewiscarvillesputnik]

In a way. I switched to Next.js and did a similar process there. Although... this is only possible with the page router method and not with the app router.

[LekoArts]

When this first was brought up we actually looked into what it would take to support the access to this again. It would take some effort and we're not sure about the benefit of it. As per @mlgualtieri recommendation he only lists third-party resources in CSP, not e.g. the ones from Gatsby.

So can you please elaborate why you'd need to list Gatsby's script for CSP.

[travjenkins]

Personally - I would like this as an easy way to inject some attributes on the script tags. This is helpful for integrating with Osano for cookie consent.

[Plummat]

trav, did you find a way to access it?

[travjenkins]

Nope. There was no way we could so we ended up changing providers.

[JustFly1984]

I had to move to vite/remix all my apps, cos CSP is not supported by gatsbyjs, and gatsby-plugin-csp is broken.