search

aframevr / aframe-site

:a: Official A-Frame site.
https://aframe.io/
MIT License
99 stars 143 forks source link

GitHub.com's CSP directives prevent loading of GitHub.com pages when clicking GitHub ribbon #384

Open cvan opened 8 years ago

cvan commented 8 years ago
  1. Load https://aframe.io/examples/showcase/hello-metaverse/ or https://aframe.io/examples/showcase/a-painter/
  2. Click the GitHub octocat icon in the bottom-left corner
  3. Notice the GitHub page cannot be loaded because of GitHub.com's CSP directives

Refused to display 'https://github.com/ngokevin/kframe/tree/master/components/text/examples/vaporwave/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

screen shot 2016-10-26 at 3 16 00 am

Refused to display 'https://github.com/aframevr/a-painter' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

screen shot 2016-10-26 at 3 16 30 am

ngokevin commented 8 years ago

Thanks, will add some special logic to those scenes in a bit. Will be moving the first one into either the aframe-site or aframe repo so that mobile works (Device Motion over cross-origin I-Frame does not work).

cvan commented 8 years ago

What I had thought about doing is having a <script src="https://aframe.io/example-buddy.js"> that you'd add (or request the site owner to be add) to each example hosted/embedded from the A-Frame site. From that script, you could add controls for navigating back, forward, postMessage-ing, introducing a common HUD, analytics, etc. Just a thought. It was the idea behind the "WebVR Commander" script I introduced to Holodeck Club (which I used for speech commands and pseudo-link rings).

ngokevin commented 8 years ago

That's interesting, though the biggest problem is that Device Motion (webvr-polyfill) doesn't work over cross origin from an I-Frame, so any mobile examples we feature will have to be under our control. Fortunately, not a problem on desktop.

cvan commented 8 years ago

Yeah, that's a pity. Yeah, and navigator.geolocation, navigator.getUserMedia, etc. as well. (I think Service Workers work from <iframe>s; pretty sure from my testing they did, but I forget.)

What I was suggesting but didn't mention explicitly was to on mobile actually redirect/link from one example to the next (cross-origin), and actually have the https://aframe.io/example-buddy.js handle the navigation back and forward, so it feels like the same A-Frame site experienced on mobile today. Again, a major hack, but it could work. Better off just hosting the content on the same origin today (shove into aframevr/aframe, aframevr/aframe-boilerplates, aframevr/aframe-site, or a separately new aframevr/aframe-examples). With link traversal, sites are likely going to need some type of consistent UI controls (and a HUD shortly thereafter) to go from A-Frame site to A-Frame site. A Greasemonkey script, Web Extension browser extension (Firefox/Edge), or Chrome browser extension would suffice in injecting the content; that's another potential route, but requires too much work on the user's part.