From 1a16600a1a78c74ee9329175c7597bf96853c3a9 Mon Sep 17 00:00:00 2001 From: Yogesh Kotadiya Date: Fri, 22 Feb 2019 20:50:30 +0530 Subject: [PATCH] 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 --- docs/docs/add-a-manifest-file.md | 4 ++ packages/gatsby-plugin-manifest/README.md | 30 +++++++++++ .../__snapshots__/gatsby-ssr.js.snap | 50 +++++++++++++++++++ .../src/__tests__/gatsby-ssr.js | 5 ++ .../gatsby-plugin-manifest/src/gatsby-node.js | 1 + .../gatsby-plugin-manifest/src/gatsby-ssr.js | 2 + 6 files changed, 92 insertions(+) diff --git a/docs/docs/add-a-manifest-file.md b/docs/docs/add-a-manifest-file.md index e6ab0773253ff..e823481d7e396 100644 --- a/docs/docs/add-a-manifest-file.md +++ b/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`, }, }, ] diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md index 02222e95ece57..86c4aa47004dc 100644 --- a/packages/gatsby-plugin-manifest/README.md +++ b/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 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`, + }, + }, + ], +} +``` diff --git a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap b/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap index f295a7f956717..8dd12bae0a008 100644 --- a/packages/gatsby-plugin-manifest/src/__tests__/__snapshots__/gatsby-ssr.js.snap +++ b/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 [ + , + , + , + , + , + , + , + , + , +] +`; + exports[`gatsby-plugin-manifest Adds link favicon if "include_favicon" option is not provided 1`] = ` Array [ { 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() diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js index 7973eb141a3f4..a153c7d288c45 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-node.js +++ b/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) { diff --git a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js b/packages/gatsby-plugin-manifest/src/gatsby-ssr.js index b62fdffc2a338..5053e167053ef 100644 --- a/packages/gatsby-plugin-manifest/src/gatsby-ssr.js +++ b/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(