feat(gatsby-plugin-manifest): add option for crossorigin in manifest (#11953)

* Add crossorigin option to gatsby-plugin-manifest

* Updated docs for add crossorigin option in manifest

* Merged requested chages

* Changed docs as per request and added a snapshot test

* Updated docs and Readme

Author: yogeshkotadiya

docs/docs/add-a-manifest-file.md

@@ -41,6 +41,10 @@ npm install --save gatsby-plugin-manifest
         // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
         display: "standalone",
         icon: "src/images/icon.png", // This path is relative to the root of the site.
+        // An optional attribute which provides support for CORS check.
+        // If you do not provide a crossOrigin option, it will skip CORS for manifest.
+        // Any invalid keyword or empty string defaults to `anonymous`
+        crossOrigin: `use-credentials`,
       },
     },
   ]

packages/gatsby-plugin-manifest/README.md

@@ -257,3 +257,33 @@ module.exports = {
   ],
 }
 ```
+
+## Enable CORS using `crossorigin` attribute
+
+Add a `crossorigin` attribute to the manifest `<link rel="manifest" crossorigin="use-credentials" href="/manifest.webmanifest" />` link tag.
+
+You can set `crossOrigin` plugin option to `'use-credentials'` to enable sharing resources via cookies. Any invalid keyword or empty string will fallback to `'anonymous'`.
+
+You can find more information about `crossorigin` on MDN.
+
+[https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
+
+```javascript:title=gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `GatsbyJS`,
+        short_name: `GatsbyJS`,
+        start_url: `/`,
+        background_color: `#f7f0eb`,
+        theme_color: `#a2466c`,
+        display: `standalone`,
+        icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        crossOrigin: `use-credentials`,
+      },
+    },
+  ],
+}
+```

packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap

@@ -163,6 +163,56 @@ Array [
 ]
 `;
 
+exports[`gatsby-plugin-manifest Adds a crossorigin attribute to manifest link tag if provided 1`] = `
+Array [
+  <link
+    crossOrigin="use-credentials"
+    href="/manifest.webmanifest"
+    rel="manifest"
+  />,
+  <link
+    href="/icons/icon-48x48.png"
+    rel="apple-touch-icon"
+    sizes="48x48"
+  />,
+  <link
+    href="/icons/icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />,
+  <link
+    href="/icons/icon-96x96.png"
+    rel="apple-touch-icon"
+    sizes="96x96"
+  />,
+  <link
+    href="/icons/icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />,
+  <link
+    href="/icons/icon-192x192.png"
+    rel="apple-touch-icon"
+    sizes="192x192"
+  />,
+  <link
+    href="/icons/icon-256x256.png"
+    rel="apple-touch-icon"
+    sizes="256x256"
+  />,
+  <link
+    href="/icons/icon-384x384.png"
+    rel="apple-touch-icon"
+    sizes="384x384"
+  />,
+  <link
+    href="/icons/icon-512x512.png"
+    rel="apple-touch-icon"
+    sizes="512x512"
+  />,
+]
+`;
+
 exports[`gatsby-plugin-manifest Adds link favicon if "include_favicon" option is not provided 1`] = `
 Array [
   <link

packages/gatsby-plugin-manifest/src/__tests__/gatsby-ssr.js

@@ -13,6 +13,11 @@ describe(`gatsby-plugin-manifest`, () => {
     headComponents = []
   })
 
+  it(`Adds a crossorigin attribute to manifest link tag if provided`, () => {
+    onRenderBody(ssrArgs, { crossOrigin: `use-credentials` })
+    expect(headComponents).toMatchSnapshot()
+  })
+
   it(`Adds a "theme color" meta tag to head if "theme_color_in_head" is not provided`, () => {
     onRenderBody(ssrArgs, { theme_color: `#000000` })
     expect(headComponents).toMatchSnapshot()

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -32,6 +32,7 @@ exports.onPostBootstrap = (args, pluginOptions) =>
     delete manifest.plugins
     delete manifest.legacy
     delete manifest.theme_color_in_head
+    delete manifest.crossOrigin
 
     // If icons are not manually defined, use the default icon set.
     if (!manifest.icons) {

packages/gatsby-plugin-manifest/src/gatsby-ssr.js

@@ -36,8 +36,10 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
       key={`gatsby-plugin-manifest-link`}
       rel="manifest"
       href={withPrefix(`/manifest.webmanifest`)}
+      crossOrigin={pluginOptions.crossOrigin}
     />
   )
+
   // The user has an option to opt out of the theme_color meta tag being inserted into the head.
   if (pluginOptions.theme_color) {
     let insertMetaTag = Object.keys(pluginOptions).includes(