247626 2022-11-08 11:13:07 -0800 Unable to render cross-origin image tag when added through fetch and javascript 2024-03-21 20:32:19 -0700 1 1 1 Unclassified WebKit DOM Safari Technology Preview Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=271377 BrowserCompat, InRadar, NeedsReduction P2 Normal --- 1 marcosdg3 webkit-unassigned annevk ap cdumez karlcow marcosdg3 webkit-bug-importer youennf zalan oldest_to_newest 1911049 0 marcosdg3 2022-11-08 11:13:07 -0800 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: test@collegenet.com -------------------------------------------------------------------------------------------------------------- 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 1911163 1 ap 2022-11-08 19:41:26 -0800 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. 1911399 2 marcosdg3 2022-11-09 16:35:07 -0800 Thanks for your comment Alexey, created a temp fix by forcing a relayout. 1911494 3 annevk 2022-11-10 02:44:33 -0800 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. 1912668 4 webkit-bug-importer 2022-11-15 11:14:17 -0800 <rdar://problem/102377924>