Access-Control-Allow-Origin Issue

[stefanhayden]

Please read the CONTRIBUTING guide before submitting an issue.

Description

I have a weird issue that when ghostery is enabled on chrome a CORS image request fails. I can repo it in our app (requires a paid subscription to get to issue) but I can't in an isolated repo or jsfiddle.

The headers for the response set on the server are

Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
Access-Control-Allow-Origin: https://www.shutterstock.com
Cache-Control: private,max-age=3600
Connection: keep-alive
Content-Disposition: attachment; filename=shutterstock_383564641.jpg
Content-Length: 3220700
Content-Type: image/jpeg
Date: Wed, 05 Dec 2018 18:28:59 GMT
Etag: "0ca4c428ed909bc4af0878b05d682b7a"
Expires: Wed, 05 Dec 2018 19:28:59 GMT
Server: nginx
Vary: Origin
X-Sstk-Trans-Id: 43ca4749-afd0-4e2b-b3fa-9539a29eaeb5
X-Stored-Location: shutterstock-media-photo-prod:15/25d/f22/80d4/3f59/383564641/huge.jpg

and I an requesting it with this setup

  const img = new Image;
  img.crossOrigin = "use-credentials";
  img.src = imageURL;

The error that appears in the console is
origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have no idea how the origin can go from https://www.shutterstock.com to null. I really wish I could repo it out side of our app but I can't seem to figure it out. I set up an express server to serve an image with the exact same headers but no luck.

Expected Behavior

a CORS download should work with ghostery on or off.

Actual Behavior

image throws error origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Steps to Reproduce

😭

Versions

8.2.6

• Browser: Chrome
• OS: OSX 10.12.6

[Aziz-Ghostery]

Hi Stefan,
What is the images(s) URL is it an HTTPS or HTTP?

[stefanhayden]

https!