HTMLImageElement: crossOrigin property - Web APIs | MDN (original) (raw)

Baseline

Widely available

The HTMLImageElementinterface's crossOrigin attribute is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image.

Value

A string of a keyword specifying the CORS mode to use when fetching the image resource. If you don't specify crossOrigin, the image is fetched without CORS (the fetch no-cors mode).

Permitted values are:

anonymous

Requests by the element have theirmode set to cors and their credentialsmode set to same-origin. This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

use-credentials

Requests by the HTMLImageElement will use the cors mode and the include credentials mode; all image requests by the element will use CORS, regardless of what domain the fetch is from.

If crossOrigin is an empty string (""), the anonymous mode is selected.

Examples

In this example, a new element is created and added to the document, loading the image with the Anonymous state; the image will be loaded using CORS and credentials will be used for all cross-origin loads.

JavaScript

The code below demonstrates setting the crossOrigin property on an<img> element to configure CORS access for the fetch of a newly-created image.

const imageUrl = "clock-demo-400px.png";
const container = document.querySelector(".container");

function loadImage(url) {
  const image = new Image(200, 200);
  image.addEventListener("load", () => container.prepend(image));

  image.addEventListener("error", () => {
    const errMsg = document.createElement("output");
    errMsg.value = `Error loading image at ${url}`;
    container.append(errMsg);
  });

  image.crossOrigin = "anonymous";
  image.alt = "";
  image.src = url;
}

loadImage(imageUrl);

HTML

<div class="container">
  <p>
    Here's a paragraph. It's a very interesting paragraph. You are captivated by
    this paragraph. Keep reading this paragraph. Okay, now you can stop reading
    this paragraph. Thanks for reading me.
  </p>
</div>

CSS

body {
  font:
    1.125rem/1.5,
    Helvetica,
    sans-serif;
}

.container {
  display: flow-root;
  width: 37.5em;
  border: 1px solid #d2d2d2;
}

img {
  float: left;
  padding-right: 1.5em;
}

output {
  background: rgb(100 100 100 / 100%);
  font-family: Courier, monospace;
  width: 95%;
}

Result

Specifications

Browser compatibility

See also