[Webkit-unassigned] [Bug 247626] New: Unable to render cross-origin image tag when added through fetch and javascript

Tue Nov 8 11:13:07 PST 2022

https://bugs.webkit.org/show_bug.cgi?id=247626

            Bug ID: 247626
           Summary: Unable to render cross-origin image tag when added
                    through fetch and javascript
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: marcosdg3 at gmail.com

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 at 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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221108/4c6e1930/attachment-0001.htm>