crossorigin="anonymous" Prevents Rendering and Canvas Access for Custom Scheme and HTTP Images on iOS 18

Question

Created 1w

Replies 2

Boosts 0

Participants 2

On iOS 18, when setting the src attribute of an <img> tag to a custom scheme (e.g., myapp://image.png) or an HTTP URL (http://example.com/image.png), if crossorigin="anonymous" is applied, the image fails to load. Additionally, images affected by this issue cannot be drawn to a <canvas>, as the browser treats them as tainted and blocks access to their pixel data.

This issue did not occur in previous iOS versions and seems to be a regression in iOS 18.

Steps to Reproduce:

Open an HTTPS-hosted H5 page in Safari on iOS 18.
Add an <img> tag with crossorigin="anonymous" and set src to either:

A custom scheme:

<img src="myapp://image.png" crossorigin="anonymous">

An HTTP URL (even from the same origin):

<img src="http://example.com/image.png" crossorigin="anonymous">

Observe that the image does not load.
Attempt to draw the image onto a <canvas> and retrieve its data:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "http://example.com/image.png"; // or "myapp://image.png"
img.onload = () => {
    ctx.drawImage(img, 0, 0);
    try {
        console.log(canvas.toDataURL()); // Expect base64 image data
    } catch (error) {
        console.error("Canvas is tainted:", error);
    }
};

Notice that the image is blocked, and any attempt to access pixel data results in a CORS error.

Expected Behavior: * The image should be displayed if it is accessible under normal CORS rules. * The <canvas> API should allow access to the image data unless explicitly blocked by the server’s CORS policy.

Actual Behavior:

The image fails to load when crossorigin="anonymous" is applied.
The <canvas> API does not allow access to the image data, treating it as tainted.
Removing crossorigin="anonymous" allows the image to display in some cases, but this is not a viable workaround when CORS enforcement is required.

Regression:

Works correctly on: iOS 17 and earlier
Broken on: iOS 18

Environment:

Device: iPhone/iPad
iOS Version: 18.0+
Browser: Safari

Suggested Fix:

Apple should investigate this regression and allow custom schemes and HTTP images to be correctly handled under CORS policies when crossorigin="anonymous" is set. If the source allows cross-origin requests, Safari should not block the image or its use in <canvas>.

Boost

Answer 1

XavierXu1Ne OP

2d

In my case, crossorigin props may lead normal image within canvas into error.

It seems like that it's not problem with Canvas, but Image DOM api? Minimum React Demo like this:

useEffect(() => {
  const image = new Image();

  image.width = 100;
  image.height = 100;

  // when you add this line, the image will load failed
  // errorMessage:  [blocked] The page at ${pageUrl} requested insecure content from ${requestUrl} This content was blocked and must be served over HTTPS.

  image.crossOrigin = 'anonymous';
  image.src = 'http://some_http_image';

  image.onload = () => {
    const conatiner = document.getElementById('container');
    conatiner.appendChild(image);
  };
}, []);

return (
  <div>
    <div id="container"></div>
  </div>
);

As webkit change in iOS18 mentioned, webkit implemented W3C standard about mixed content. Maybe this change leads to some error.

Use https image resources to replace http ones, or delete crossorigin modify could fix it.

0

Answer 2

XavierXu1Ne OP

2d

Well, it seems that webkit implemented W3C standard about Mixed Content, which marked image with crossorigin as resources that need to be blocked.

You can find more details in

https://www.w3.org/TR/mixed-content/#category-upgradeable

0