feat(gatsby-image): Whitelist crossorigin prop for pass through to img tag (#9758)

* Whitelisted `crossorigin` prop for pass through to `img` tag

* Updated typings.

Author: wconnorwalsh

packages/gatsby-image/README.md

@@ -315,6 +315,7 @@ You will need to add it in your graphql query as is shown in the following snipp
 | `fadeIn`               | `bool`              | Defaults to fading in the image on load                                                                                     |
 | `title`                | `string`            | Passed to the `img` element                                                                                                 |
 | `alt`                  | `string`            | Passed to the `img` element                                                                                                 |
+| `crossOrigin`          | `string`            | Passed to the `img` element                                                                                                 |
 | `className`            | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop                                                |
 | `style`                | `object`            | Spread into the default styles of the wrapper element                                                                       |
 | `imgStyle`             | `object`            | Spread into the default styles of the actual `img` element                                                                  |

packages/gatsby-image/index.d.ts

@@ -32,6 +32,7 @@ interface GatsbyImageProps {
   alt?: string
   className?: string | object
   critical?: boolean
+  crossOrigin?: string | boolean;
   style?: object
   imgStyle?: object
   placeholderStyle?: object

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -24,6 +24,7 @@ exports[`<Img /> should render fixed size images 1`] = `
       />
       <img
         alt="Alt text for the image"
+        crossorigin="anonymous"
         height="100"
         itemprop="item-prop-for-the-image"
         src="test_image.jpg"
@@ -68,6 +69,7 @@ exports[`<Img /> should render fluid images 1`] = `
       />
       <img
         alt="Alt text for the image"
+        crossorigin="anonymous"
         itemprop="item-prop-for-the-image"
         sizes="(max-width: 600px) 100vw, 600px"
         src="test_image.jpg"

packages/gatsby-image/src/__tests__/index.js

@@ -31,6 +31,7 @@ const setup = (fluid = false, onLoad = () => {}, onError = () => {}) => {
       style={{ display: `inline` }}
       title={`Title for the image`}
       alt={`Alt text for the image`}
+      crossOrigin={`anonymous`}
       {...fluid && { fluid: fluidShapeMock }}
       {...!fluid && { fixed: fixedShapeMock }}
       onLoad={onLoad}
@@ -55,12 +56,13 @@ describe(`<Img />`, () => {
     expect(component).toMatchSnapshot()
   })
 
-  it(`should have correct src, title and alt attributes`, () => {
+  it(`should have correct src, title, alt, and crossOrigin attributes`, () => {
     const imageTag = setup().querySelector(`picture img`)
     expect(imageTag.getAttribute(`src`)).toEqual(`test_image.jpg`)
     expect(imageTag.getAttribute(`srcSet`)).toEqual(`some srcSet`)
     expect(imageTag.getAttribute(`title`)).toEqual(`Title for the image`)
     expect(imageTag.getAttribute(`alt`)).toEqual(`Alt text for the image`)
+    expect(imageTag.getAttribute(`crossOrigin`)).toEqual(`anonymous`)
   })
 
   it(`should have correct placeholder src, title, style and class attributes`, () => {

packages/gatsby-image/src/index.js

@@ -98,7 +98,10 @@ const noscriptImg = props => {
   const height = props.height ? `height="${props.height}" ` : ``
   const opacity = props.opacity ? props.opacity : `1`
   const transitionDelay = props.transitionDelay ? props.transitionDelay : `0.5s`
-  return `<picture>${srcSetWebp}<img ${width}${height}${sizes}${srcSet}${src}${alt}${title}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
+  const crossOrigin = props.crossOrigin
+    ? `crossorigin="${props.crossOrigin}" `
+    : ``
+  return `<picture>${srcSetWebp}<img ${width}${height}${sizes}${srcSet}${src}${alt}${title}${crossOrigin}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
 }
 
 const Img = React.forwardRef((props, ref) => {
@@ -337,6 +340,7 @@ class Image extends React.Component {
                 title={title}
                 sizes={image.sizes}
                 src={image.src}
+                crossOrigin={this.props.crossOrigin}
                 srcSet={image.srcSet}
                 style={imageStyle}
                 ref={this.imageRef}
@@ -423,6 +427,7 @@ class Image extends React.Component {
                 height={image.height}
                 sizes={image.sizes}
                 src={image.src}
+                crossOrigin={this.props.crossOrigin}
                 srcSet={image.srcSet}
                 style={imageStyle}
                 ref={this.imageRef}
@@ -494,6 +499,7 @@ Image.propTypes = {
   alt: PropTypes.string,
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // Support Glamor's css prop.
   critical: PropTypes.bool,
+  crossOrigin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   style: PropTypes.object,
   imgStyle: PropTypes.object,
   placeholderStyle: PropTypes.object,