Limits of PixiJS Loader crossorigin attribute for cross-origin images

Answer

PixiJS guarantees that the crossorigin option is assigned to the crossOrigin property of the underlying HTMLImageElement before the source is set. However, this does not guarantee a non-tainted texture. The crossorigin attribute is merely a request for CORS; the browser will still mark the image as origin-tainted if the remote server fails to return a valid Access-Control-Allow-Origin header or if the request is made from a restricted context (such as file://).

Likely Explanations and Constraints

While the Loader correctly forwards the attribute, several browser-level behaviors can override or ignore this setting:

• Server-Side Misconfiguration: If the server does not emit Access-Control-Allow-Origin, the browser ignores the crossorigin attribute and loads the image in "no-cors" mode, which taints the canvas/texture.
• Protocol Restrictions: Data URIs, Blob URLs, and file:// origins often bypass or ignore the crossOrigin property, leading to tainted results in many browser implementations.
• Credential Mismatches: If crossorigin is set to anonymous but the server requires credentials (or vice versa), the request may fail or result in a tainted resource.

Verification Steps

Since PixiJS does not provide a high-level "isTainted" property, use these methods to confirm the image status before it hits the WebGL context:

1. Direct Element Inspection: Access the internal image element to verify the attribute was applied:

   const img = loader.resources['assetName'].texture.baseTexture.resource.source;
   console.log(img.crossOrigin); // Verify this matches your expected value

2. The Canvas Taint Test: The most reliable way to check for tainting is to attempt to read the image data using a temporary 2D canvas. If the image is tainted, the browser will throw a SecurityError:

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   try {
     ctx.drawImage(img, 0, 0);
     // Attempting to read pixels triggers the security check
     ctx.getImageData(0, 0, 1, 1);
     console.log('Image is safe for WebGL');
   } catch (e) {
     console.error('Image is tainted: ' + e.message);
   }

3. Network Header Audit: Check the browser's Network tab to ensure the response header Access-Control-Allow-Origin is present and matches your origin.

Diagnostic Requirement

To determine if the issue lies with the PixiJS implementation or the server, please provide the Response Headers for the image request from your browser's Network tab.