Next.js: CrossOrigin attribute not added to scripts loaded by PageLoader

[jclem]

Bug report

Describe the bug

When I add the crossOrigin prop to my Head and NextScript components, I expect all scripts to have a crossOrigin attribute on them. This appears to be the case, except for scripts created by PageLoader.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Add a crossOrigin prop to Head and NextScript
2. View attributes of any script created by the PageLoader class.

Expected behavior

A crossOrigin attribute is present on scripts created by PageLoader.

Additional context

This was solved in the original crossOrigin PR, but not in the one that was merged.

[jclem]

It looks like PageLoader also does not add the nonce attribute, which I believe should be happening, as well.

[Enalmada]

I added crossOrigin to everything that had a nonce so that would explain why I missed it. I don't know what PageLoader is or how to test. If you have a reproducible case already handy can you push a fix?

[timneutkens]

I'll fix it soon, pageloader is what next/router uses to load pages when routing using next/link for example.

What happens is:

<Link href="/about">

Will onClick call

Router.push('/about')

That in turn (in reality it does more than this, but for example purposes)

PageLoader.loadPage('/about')

What loadPage does is inject a script tag:

<script src="/_next/static/<buildid>/pages/about.js" async>

about.js holds the page bundle wrapped in a function:

__NEXT_REGISTER_PAGE('/about', () => {
  // the compiled code from pages/about.js (holding Component exports) would be on this line

  return {
    comp: module.exports
  }
})

So PageLoader will wait for that function to be called and then resolve the loadPage Promise with the component

Hopefully this explains it a bit. @jclem is right in that it doesn't currently add nonce/crossOrigin, which should be fixed

[timneutkens]

@dav-is would you be able to have a look into this? It'd be a huge help. It should be relatively easy to fix by reading the crossOrigin attribute from the script tags 🤔

[dav-is]

With this change a crossOrigin config option sets the crossOrigin attribute on the proper tags.

I feel like setting crossOrigin shouldn't require a custom document so now it can be a config option. Hopefully in Next 8.0, we can set some "secure by default" breaking changes and won't even need to set this value.

As for the nonce, the nonce is stored on the server and can only be added in server side markup - by design. These script tags are added by the client, which isn't allowed to have the script nonce.

It looks like there's a script without crossOrigin added by the HMR that I can't find where the script is being added from... (this is only in dev mode though)

[timneutkens]

@dav-is which script is it? Then I can point you to it

[dav-is]

@timneutkens /_next/static/chunks/0 is the first one that shows up

[timneutkens]

Oh I see, that's most likely this: https://github.com/zeit/next.js/blob/canary/packages/next/client/next-dev.js#L5-L9

[dav-is]

It's coming from webpack's jsonp loader (only in dev mode) and can be changed with a config option and can be set here.

~I'll add it to the PR.~ I created a fresh PR for the issue.