Gatsby: Missing `crossorigin` and `as="fetch"` attributes on linkPrefetch cause CORS/CORB issues

[dennisroethig]

Description

It seems that the latest version of Chrome (tested on v76) doesn't like the prefetch links for JSON files if they are used in combination with the assetPrefix hosted on a different domain due to CORS/CORB concerns.

e.g.

<link rel="prefetch" href="https://some.assets.cdn.com/myPage/page-data.json">

Update: Looking at /packages/gatsby/cache-dir/static-entry.js#L325-L335 it seems like this was added already any might have just been missed for parts of the code (/packages/gatsby/cache-dir/prefetch.js#L16-L35)

Steps to reproduce

As this is kind of tricky to reproduce outside of our production environment I would like to run it past you before I go the effort and try to create a fake site somewhere in our stack. If you think this is a requirement, let me know but I hope this issue and the potential fix is in line with your existing code anyway, so maybe we can just add/fix this (as I said, please let me know if this isn't enough)

Expected result

JSON files should preload without warnings/errors when <link /> is inserted in the head

Actual result

JSON files get blocked during preload when <link /> is inserted in the head

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.9.1 - ~/.nvm/versions/node/v12.9.1/bin/node
    Yarn: 1.17.3 - ~/Projects/99designs/99awards/99awards/node_modules/.bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.9.1/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.32 => 2.15.2
    gatsby-link: ^2.2.1 => 2.2.11
    gatsby-plugin-layout: ^1.1.1 => 1.1.6
    gatsby-plugin-react-helmet: ^3.1.1 => 3.1.6
    gatsby-plugin-sass: ^2.1.1 => 2.1.13
    gatsby-plugin-sharp: ^2.2.18 => 2.2.19
    gatsby-plugin-typescript: ^2.1.1 => 2.1.6
    gatsby-source-contentful: ^2.1.29 => 2.1.30
    gatsby-source-filesystem: ^2.1.4 => 2.1.19
    gatsby-transformer-remark: ^2.6.19 => 2.6.20
    gatsby-transformer-sharp: ^2.2.12 => 2.2.13
    gatsby-transformer-yaml: ^2.2.1 => 2.2.8

References

Related:

• fix(gatsby): Use anonymous requests when fetching resources
• https://github.com/gatsbyjs/gatsby/commit/cdd800f083930503df8acbc26dd631fc741d8293#diff-e5ad541d7ba3f6bf26b5132b218f2a84
• https://github.com/gatsbyjs/gatsby/commit/cdd800f083930503df8acbc26dd631fc741d8293#diff-917ba78a52f29b1a1fe42be34d81fc83

[dennisroethig]

I'm happy to look into putting up a pull request for this if there's some appetite to address it. Currently, I use a gatsby fork here that fixes it for me/us:

https://github.com/dennisroethig/gatsby/commit/b7cf48483a82409073dcec9a62f738e01622b10a

But happy to take some direction if the core team got opinions around how this should be addressed - just let me know :)

[dennisroethig]

Currently trying to reproduce it on an isolated system and I think it's somehow related to disk-cache being used by Chrome:

I'm not sure what exactly would cause different behavior, maybe some Cloudflare cache-control headers?! (keen to hear thoughts on this if anyone is across that...)

[dennisroethig]

Anyway - looking at other source files in Gatsby right now, I saw that crossorigin="anonymous" and as="fetch" get set in:

/packages/gatsby/cache-dir/static-entry.js#L327-L333

and it might have just been missed in /packages/gatsby/cache-dir/prefetch.js#L16-L35?

Any objections for me to put up a PR to add those properties in /packages/gatsby/cache-dir/prefetch.js#L16-L35 too?

[dennisroethig]

I went ahead and created a pull request here: https://github.com/gatsbyjs/gatsby/pull/17581 - Happy to update as per direction, just let me know ... didn't look too far into the test suite etc.

Thanks in advance, keen to hear everyone's thoughts! :)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!