Most image links are broken when viewing an app

[warpdesign]

See https://www.electronjs.org/apps/react-explorer

These images come from the README.md of the repository.

[warpdesign]

Looking at the source code, it seems the problem is that each relative images found in readme are modified here:

apps/script/readmes.js

Lines 108 to 111 in 434b074

	$relativeImages.each((i, img) => {
	$(img).attr(
	'src',
	`${app.repository}/raw/${defaultBranch}/${$(img).attr('src')}`

Problem is that GitHub now uses CORS to prevent resources from being loaded from another domain, so links like this will be broken.

[warpdesign]

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.

[lexoyo]

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)#

[PaulKeefe]

I'm seeing the same thing for all images in Edge.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

[yikuansun]

YouTube embeds are also broken, seemingly also due to CORS.

[yikuansun]

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

[warpdesign]

I think I found a way to fix CORS errors without touching the server: #2000

[yikuansun]

@warpdesign Cool! Do you know if the YouTube embeds can also be fixed in a similar way?

[warpdesign]

@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?

[yikuansun]

@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.

[warpdesign]

@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.