Comments (11)
@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.
from apps.
Looking at the source code, it seems the problem is that each relative images found in readme are modified here:
Lines 108 to 111 in 434b074
Problem is that GitHub now uses CORS to prevent resources from being loaded from another domain, so links like this will be broken.
from apps.
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
.
from 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)#
from apps.
I'm seeing the same thing for all images in Edge.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
from apps.
YouTube embeds are also broken, seemingly also due to CORS.
from apps.
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
from apps.
I think I found a way to fix CORS errors without touching the server: #2000
from apps.
@warpdesign Cool! Do you know if the YouTube embeds can also be fixed in a similar way?
from apps.
@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?
from apps.
@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.
from apps.
Related Issues (20)
- CI is broken HOT 1
- CI seems to not be working? HOT 4
- Merged 15 Days Ago. But App Not Listed on electronjs. HOT 6
- **No Release Notes**
- #1931
- Error when running the wizard: mkdirp is missing HOT 1
- Category suggestion: "Science" HOT 2
- App submitted and merged, but not showing up on site. HOT 3
- Some Apps are in meta files (releases.json, dates.json, readmes.json and colors.json) but missing in `apps` directory HOT 2
- App Muezzin is in the wrong folder. HOT 1
- App READMEs are not show in some cases HOT 2
- Mr
- Strimio seems to not exist anymore HOT 3
- Catalyst no longer shown on website? HOT 6
- Wrong Icon applied HOT 3
- Github Actions failing HOT 3
- -
- We are not accepting any new applications at this time. HOT 3
- > [![Notify When Maintainers Cannot HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apps.