Using Cors Headers with CSS Background-Image

HTML/CSS problem: background image is not loading due to Cross-Origin Read Blocking issue

The error message says that the MIME type is text/html which means that the server is claiming it is an HTML document.

Since you are requesting the image from Github, this is probably because it is an HTML document (possibly one designed to include an <img> element to show an image stored in a repository).

You need to use the URL of an actual image.

Can I force the browser to include the Origin header?

The Fetch standard states under which conditions compliant browsers add an Origin header to a request:

1. the request’s response tainting is cors, or
2. the request’s mode is websocket, or
3. the request’s method is neither GET nor HEAD.

For subresource loads like styles and scripts,

1. the request's response tainting is basic (not cors), and
2. the request’s mode is no-cors (not websocket), and
3. the request's method is GET.

Therefore, none of the sufficient conditions are fulfilled for an Origin header to be attached to the requests of interest to you. Short of forcing your users to rely on a non-compliant browser, you cannot force the Origin header to be attached to the requests of interest to you.

---

The Referer header is unreliable, because a document can, via a strict Referrer policy, suppress it in requests it sends.

---

You may want to consider relying on Fetch Metadata request headers (the Sec-Fetch-Site header, in particular) but, at the time of writing this answer, they're only supported in Chromium and Firefox.

Why are cross-origin Image requests blocked by Cytoscape.js but not by d3.js?

In your specific example, if you set the crossOrigin to anonymous it does not work, but if you don't set it (i.e it is null), then it works.

By default Cytoscape.js sets the crossOrigin field of images to anonymous see the doc. There is no way of setting it to null.

But if you still want, you can play with the source code: setting the crossOrigin field to null here will display this specific image.

In this JsFiddle, if you set the origin to null it works, but setting it to anonymous does not work.

P.S: if you want, you can also run your snippets and analyze the response and request headers in the Network tab of Developer tools. In Firefox, you can edit the header, resend the request, and see how it affects the response.

CORS on Image Not Working

Yes I feel your pain coz I have gone through the same problem. Can you see Mozilla Developer Center

and follow the instruction because i solve the problem using the method described here. Especially using following code

// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

JavaScript Image blocked by CORS

CORS permission for images requires BOTH the server and the browser to do something.

First the browser must request CORS permission.

You do this by setting the crossOrigin on the image. Example

const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://somesite.com/someimage.jpg"

Note there are 3 valid values for crossOrigin.

1. undefined

   this means the browser will not request CORS permissions and not check the headers. Even if the server sends the headers you will still get security errors depending on what you try to do with the image if it is from another domain. This is the default.

2. 'use-credentials'

   this means the browser will send extra info (cookies, etc...) to the server so it can use to decide whether or not to give permission.

3. anything else

   you can put "" or "anonymous" or "foobarmoo" or anything. If it's not undefined and it's not "use-credentials" then it's this 3rd version. It means ask for blanket CORS permission as in without any extra info.

Second the server must send the correct headers.

If you control the server you need to configure it to send the correct headers. Every server is different (apache, nginx, caddy, etc...). Each server is different and if you want to know how to configure that particular server you should look it up in the docs for that server or ask a specific question for that server.

Most servers do not send CORS headers by default. Also most 3rd party sites do not send CORS headers for images. 3 exceptions are imgur, github pages, and flickr (though sadly not stack.imgur at least as of July 2018). If you're trying to access images from random servers on the net you're out of luck except to contact their customer support and ask them to please add the headers.

In your case you're accessing an image on AWS. The server on AWS is not sending the CORS headers. Your solutions are (a) reconfigure AWS to send CORS headers if you have control of the server there (b) ask whoever controls that server to add the CORS headers (c) realize you can't do what you want without (a) or (b).

Here's a demonstration: We'll try to load your image, one image from imgur (which does set the cors headers) and another imgur but not set crossOrigin to show that BOTH setting crossOrigin AND receiving cors headers is required.

loadAndDrawImage("https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png", "anonymous");loadAndDrawImage("https://i.imgur.com/fRdrkI1.jpg", "anonymous");loadAndDrawImage("https://i.imgur.com/Vn68XJQ.jpg");
function loadAndDrawImage(url, crossOrigin) {  const img = new Image();  img.onload = function() {     log("For image", crossOrigin !== undefined ? "WITH" : "without", "crossOrigin set:", url);    try {      const ctx = document.createElement("canvas").getContext("2d");      ctx.drawImage(img, 0, 0);      ctx.getImageData(0, 0, 1, 1);      success("canvas still clean:", url);    } catch (e) {      error(e, ":", name);    }    log(" ");  };  img.onerror = function(e) {    error("could not download image:", url);    log(" ");  };  if (crossOrigin !== undefined) {    img.crossOrigin = crossOrigin;  }  img.src = url;}
function logImpl(color, ...args) {  const elem = document.createElement("pre");  elem.textContent = [...args].join(" ");  elem.style.color = color;  document.body.appendChild(elem);}
function log(...args) {  logImpl("black", ...args);}
function success(...args) {  logImpl("green", ...args);}
function error(...args) {  logImpl("red", ...args);}

pre { margin: 0; }

<pre>check headers in devtools
</pre>

Why CORS on Images with HTML Canvas?

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

Source: MDN

---

Related Topics