Bug 247626 – Unable to render cross-origin image tag when added through fetch and javascript

• Status: NEW
• Component: DOM

[Marcos G.]

Steps to reproduce:

1) Add event listener on DOMContentLoaded
2) From event handler make fetch to same-site API, resolve promise, and create html from local script:
   <img src="https://files.collegenet.com/public/standout_prod/default/28RE8QYZ4G/organization-logo?h=standout.com&externalId=9d99a832-17f8-448e-9690-bf07927a7757" crossorigin="anonymous"> 
3) Append html to dom element.
4) Observe console errors:

> [Error] Cancelled load to https://files.collegenet.com/public/standout_prod/default/28RE8QYZ4G/organization-logo?h=standout.com&externalId=9d99a832-17f8-448e-9690-bf07927a7757 because it violates the resource's Cross-Origin-Resource-Policy response header.
> [Error] Failed to load resource: Cancelled load to https://files.collegenet.com/public/standout_prod/default/28RE8QYZ4G/organization-logo?h=standout.com&externalId=9d99a832-17f8-448e-9690-bf07927a7757 because it violates the resource's Cross-Origin-Resource-Policy response header. (organization-logo, line 0)

--------------------------------------------------------------------------------------------------------------

Expected Results: <img> tag renders. 

--------------------------------------------------------------------------------------------------------------

Notes:
* Loads as expected in firefox, chrome, edge
* Rendering the page with the <img> html snippet above (not added by javascript) below works as expected, no CORS error, img tag renders as expected
* Resizing the page sometimes renders the image it blocked earlier
* Example here: https://standout.com/login?email=test%40collegenet.com

--------------------------------------------------------------------------------------------------------------

Summary copied from Safari network tab for the html page request:

Summary
URL: https://standout.com/login?email=test%40collegenet.com
Status: 200
Source: Network
Address: ***

Request
:method: GET
:scheme: https
:authority: standout.com
:path: /login?email=test%40collegenet.com
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: ***
Host: standout.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Response
:status: 200
Accept-Ranges: none
Access-Control-Allow-Credentials: true
Cache-Control: no-store, must-revalidate
Content-Encoding: gzip
Content-Language: en-US
Content-Length: 2432
Content-Security-Policy: default-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' data: blob: https://www.google-analytics.com https://www.googletagmanager.com https://fonts.googleapis.com https://fonts.gstatic.com https://files.collegenet.com
Content-Type: text/html;charset=UTF-8
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-site
Date: Tue, 08 Nov 2022 18:51:31 GMT
Last-Modified: Mon, 31 Oct 2022 22:15:54 GMT
Server: Apache
Set-Cookie: ***
Vary: Origin,Accept-Encoding,Access-Control-Request-Method,Access-Control-Request-Headers
x-content-security-policy: frame-ancestors 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

Query String Parameters
email: [e-mail]


--------------------------------------------------------------------------------------------------------------

Summary copied from Safari network tab for the image request:

URL: https://files.collegenet.com/public/standout_prod/default/28RE8QYZ4G/organization-logo?h=standout.com&externalId=9d99a832-17f8-448e-9690-bf07927a7757
Status: 200
Source: Network
Address: ***
Initiator: 
login-bundle-c54d9126d4b8547a6044.js:1:78985


Request
:method: GET
:scheme: https
:authority: files.collegenet.com
:path: /public/standout_prod/default/28RE8QYZ4G/organization-logo?h=standout.com&externalId=9d99a832-17f8-448e-9690-bf07927a7757
Accept: image/webp,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: files.collegenet.com
Origin: https://standout.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Response
:status: 200
Accept-Ranges: bytes
Access-Control-Allow-Origin: https://standout.com
Access-Control-Expose-Headers: etag, content-range, accept-ranges, content-length, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers
Cache-Control: no-cache, private
Content-Disposition: inline; filename="tmp-organization-img"
Content-Length: 16334
Content-Security-Policy: frame-ancestors 'self'
Content-Type: image/png
Date: Tue, 08 Nov 2022 18:51:32 GMT
ETag: "c046aeb8e304de695c735e4056eee55f"
Last-Modified: Wed, 05 Oct 2022 17:57:25 GMT
Server: Apache
Set-Cookie: ***
Vary: Origin,Access-Control-Request-Method,Access-Control-Request-Headers
x-content-security-policy: frame-ancestors 'self'
x-fs-downloadimpl: 2.0

Query String Parameters
h: standout.com
externalId: 9d99a832-17f8-448e-9690-bf07927a7757

[Alexey Proskuryakov]

AFAICT the image should be allowed to load - the document has `Cross-Origin-Embedder-Policy: require-corp`, but the image has `Access-Control-Allow-Origin: https://standout.com`.

> * Resizing the page sometimes renders the image it blocked earlier

Yes, relayout makes it show up. Cmd+ is a good way to see this too.

This makes me wonder if have two unrelated bugs:

1. COEP produces a misleading error, even though it doesn't actually prevent loading.

2. A layout bug that makes the image not appear until relayout.

[Marcos G.]

Thanks for your comment Alexey, created a temp fix by forcing a relayout.

[Anne van Kesteren]

Yeah this is weird. The crossorigin attribute makes this a request whose mode is "cors" at which point CORP (or COEP) doesn't apply. Those only impact "no-cors" and to a limited extent "navigate". And since per ap's comment CORS is in order the network layer shouldn't complain about anything here.

[Radar WebKit Bug Importer]

<rdar://problem/102377924>