Embedded p5.js sketches are not showing up on websites

[lberdugo]

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Details about the bug: Any embedded p5.js sketch coded with the alpha editor, and then embedded on a larger web project (coded with HTML and CSS) as an iFrame, simply won't show up.

• Web browser and version: Google Chrome 62.0.3202.94, although also reproduced on Safari 10.1.2
• Operating System: MacOSX 10.10.5
• Steps to reproduce this: Here's an example: This sketch (http://alpha.editor.p5js.org/embed/HyaeqJFkz) was embedded on this site (https://xarts.usfca.edu/~lberdugo/game_changer/) using this line of code: <iframe src="http://xarts.usfca.edu/~lberdugo/game-changer-title/" width="1085" height ="505" frameBorder="0"></iframe>

[TheChesireCat]

Hello lberdugo, I believe the bug is a result of your browser blocking mixed active content. Please replace the embedded url with https instead of http and see if that fixes it.

[catarak]

thanks for reporting this! i will investigate and see if this is an issue with the editor and/or the AWS configuration.

[lberdugo]

Hi all,

I just tested out replacing the embedded url with "https" instead of "http" and that fixes it. See this example of one of my student's games to see it in action: https://xarts.usfca.edu/~aearriola/savethesharksgame/

I hadn't considered that this may be the issue -- thank you for your reply!

On Mon, Nov 27, 2017 at 9:15 AM, Cassie Tarakajian <notifications@github.com

wrote:

thanks for reporting this! i will investigate and see if this is an issue with the editor and/or the AWS configuration.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/processing/p5.js-web-editor/issues/478#issuecomment-347254036, or mute the thread https://github.com/notifications/unsubscribe-auth/ANLMX-vrA8CV9vtdPavuI1kdyNLE_I_bks5s6u4wgaJpZM4QlV1Z .

-- liat berdugo // @whatliat https://twitter.com/whatliat // liatberdugo.com http://www.liatberdugo.com

///////////////////////////////////////////// <<<<<<<<<<<<<<<<<<<<<

recent + upcoming things

\\\\\\\\\\\\\\\\\\\\\\\

Nov 1, 2017 — Jan 31, 2018: Online exhibition in nervous.online as part of the Wrong Biennale http://thewrong.org/ for digital art. In 2015 the Wrong Biennale had a large press coverage which you can read here http://thewrong.org/.

Nov 30—Dec 2, 2017 — Social Media & Social Order Conference https://social-media-and-social-order.neocities.org/, Oslo, Norway. I'll be presenting a paper on video cameras as the locus of surrogate conflicts in the Middle East.

Jan 11—13, 2018 — Design Incubation Fellowship https://designincubation.com/the-fellowship-program-at-design-incubation/, New York. I'll be working on turning my design research into publication alongside some other brilliant designers.

Feb 21-24, 2018 — College Art Association Conference http://conference.collegeart.org/, Los Angeles. I'll be speaking on the Committee on Intellectual Property http://www.collegeart.org/committees/ip’s session, “Copyright, Fair Use, and Their Limits” about appropriation as a tactic for creative practice.

April 11th, 2018, 7pm — LASER Talk, Berkeley, CA http://www.scaruffi.com/leonardo/index.html. I’ll be giving a talk that uses smartphones to trace and smash together a bunch of my work, and consider technologies of visibility and power.

[catarak]

interesting! i'd like to default the editor to HTTPS and allow users to override to http if necessary. maybe it could be a query string parameter? i think we should give users the ability to use HTTP if they want but only if strictly necessary.

[TheChesireCat]

HTTP embedded sketches will work on websites that are already running HTTP. The default browser behavior is to block mixed active content that isn't HTTPS if the parent website is HTTPS.

The general rule of thumb is to always embed sketches that are on the same protocol as the parent website.

[catarak]

for sure! i'm curious about what the default should be—i had decided to make the default HTTP (except for any authentication pages), but maybe it would make more sense for it to be HTTPS? would that be easiest for newer coders? if a user is embedding a sketch, is it more likely the site is HTTP or HTTPS?

[TheChesireCat]

So what I think is that if they click on share you tell them to use a particular version of the link depending on what they have. So like a simple toggle in the modal to switch urls.

[rutaitp]

Hi! Have you guys decided to stick to http as default or set it to https? Or do a toggle?

[catarak]

The http <=> https switch is currently in the sketch preferences (the gear icon in the upper right corner). Still http by default! Would love to work out a solution that's https by default.

[rutaitp]

Oh nice! Thanks for pointing it out - it's good to know as I was trying to host a page via github pages and it kept blocking the content.

[catarak]

because of user confusion, we decided to switch the editor to HTTPS only. this means that embedded p5.js sketches will only work in HTTPS.