HTMLImageElement: crossOrigin property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The crossOrigin property of the HTMLImageElement interface is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image. It reflects the <img> element's crossorigin content attribute.

Value

A string whose value is one of anonymous or use-credentials. For their meanings, see the HTML crossorigin attribute reference.

Examples

Setting the crossorigin attribute

In this example, a new <img> 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.

js
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("/shared-assets/images/examples/balloon.jpg");

HTML

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

css
body {
  font:
    1.125rem/1.5 "Helvetica",
    "Arial",
    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 New", monospace;
  width: 95%;
}

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Nov 7, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLImageElement: crossOrigin property

In this article

Value

Examples

Setting the crossorigin attribute

JavaScript

HTML

CSS

Result

Specifications

Browser compatibility

See also

Help improve MDN