apps
apps copied to clipboard
electron
Most image links are broken when viewing an app
See https://www.electronjs.org/apps/react-explorer
These images come from the README.md of the repository.
Looking at the source code, it seems the problem is that each relative images found in readme are modified here: https://github.com/electron/apps/blob/434b074ba3ae91f63ba6bc771b2daabf0cdc49c8/script/readmes.js#L108-L111
Problem is that GitHub now uses CORS to prevent resources from being loaded from another domain, so links like this will be broken.
Actually that's weird: links like this one generated by the readme.js script return a 302 which redirects to https://raw.githubusercontent.com/warpdesign/react-explorer/master/img/react-explorer-theme.png but for some odd reason, the redirect isn't done on electronjs.org. So images appear broken.
I tried to create a simple html file that embbeds the same img file in a personal web server and it works: https://warpdesign.fr/tests/gh/
Not sure why it doesn't work as expected on electronjs.org/apps.
I believe it is because of the headers:
The resource at “https://github.com/warpdesign/react-explorer/raw/master/img/feature-darktheme.gif” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
I'm seeing the same thing for all images in Edge. Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
I've got a solution for the image URL's that doesn't involve changing server configuration:
Loop through image elements in the README, fetch their URI's and return the data as Blob, then insert the Blob URI back into the image element.
Edit: this must be done by those who maintain electronjs.org
I think I found a way to fix CORS errors without touching the server: #2000
@warpdesign Cool! Do you know if the YouTube embeds can also be fixed in a similar way?
@warpdesign Cool! Do you know if the YouTube embeds can also be fixed in a similar way?
I'm not sure. Could you give me a link to an app with such an embed in its description?
@warpdesign Here's one: https://www.electronjs.org/apps/wayward
The embedded URL is https://www.youtube.com/embed/kc69XEXiPzE, a perfectly functional embed URL... but cross-origin headers block it.
@yikuansun I'm afraid there is nothing that can be done for YouTube embeds: the server's CORS rules are too strict and the crossorigin attribute doesn't exist for iframe element.