Embedding pens from CodePen


(Ralph Mason) #1

CodePen has a really nice feature that allows you to embed pens on other sites. You can paste the code they give you directly onto a static page or even in a WordPress post. At the moment, it doesn’t seem possible to embed a pen in a Discourse post, but I was wondering if it could be easily enabled? I think it would be a cool feature to have. CodePen seems to be on the rise, and is a very nice way to present live, working code.


Shadowboxes for IFRAMEs (SOLVED)
(Jeff Atwood) #2

Seems possible, @eviltrout can you take a look and see?


(Robin Ward) #3

Looks like codepen don’t support oembed which is a shame, because if they did it would be as simple as whitelisting them. They do support open graph, but it looks like a simple summary of the pen and not an embedded widget.

I’ve sent them a support request asking about an iframe oembed version, hopefully they will respond.


(Ralph Mason) #4

That’s great. Thanks for looking into this, guys. I look forward to a reply from them. :smile:

Yes, the current result is certainly acceptable, but not the ideal.


(chriscoyier) #5

We plan to support oEmbed. Just gotta get to it =).


(Ralph Mason) #6

Thanks Chris! That’s great to hear. :slight_smile:


(chriscoyier) #7

Hey Team,

oEmbed for CodePen is ready to rock: oEmbed! - CodePen Blog

Lemme know if you have any questions or anything.


Shadowboxes for IFRAMEs (SOLVED)
(Jeff Atwood) #8

Excellent when we work on oneboxes this week @eviltrout make sure that is white listed now!


(Ralph Mason) #9

That’s great. Thanks Chris and Jeff!


(Jeff Atwood) #10

Works great!

(well, except it does not work in mixed http/https environment…)


(Jeff Atwood) #11

How about this simplified codepen? A Pen by Jeff Atwood

Nope, it has to be the first post too… or possibly an https mixed content error? Any idea on fixes @chriscoyier because this is really cool!


(Kane York) #12
[blocked] The page at 'https://meta.discourse.org/t/embedding-pens-from-codepen/13578/9' was loaded over HTTPS, but ran insecure content from 'http://codepen.io/msvbg/embed/sGIof?height=300&slug-hash=sGIof&default-tab=result&host=http%3A%2F%2Fcodepen.io': this content should also be loaded over HTTPS.

(chriscoyier) #13

Ah yeah, the iframe src being returned is HTTP, which is our bad because we otherwise totally support HTTPS. We’ll probably just change it to always return HTTPS because why not. I’ll hit you up here when it’s done.


(Jeff Atwood) #14

Looks like it is working now! Excellent!

edit: hmm, it was working in iOS Mobile Safari at least…


(Ralph Mason) #16

Seems to be working fine to me. (Just tested it on our installation, and it’s working well.) Great work, guys. :smiley:


(chriscoyier) #17

OK this is actually fixed on our end now. If the referrer is HTTPS, the embed will be. Otherwise it won’t. I thought HTTPS-everywhere would be good, but that breaks Pens that link up any non-HTTPS resources (e.g. a user linking up a copy of bootstrap from somewhere HTTP). So we’re just going to mimic where it was requested from.

Test:

The ones above might be cached or whatever so are still showing as blocked (in desktop chrome) but hopefully this one works.


(chriscoyier) #18

Hmmm. Still doesn’t seem to. Maybe the URL you make the oEmbed call from isn’t secure?

Here’s an HTTPS test I did that seem to work: https test | CSS-Tricks


(Vikhyat Korrapati) #19

The HTTP request that Discourse sends to fetch and cache the embedded content (from the onebox gem) doesn’t set a referrer header. Maybe default to HTTPS unless the referrer is a HTTP URL?


(Alex Vazquez) #20

CodePen now defaults to https if no referrer is present or the referrer used HTTPS.

We think it’s good to go. Testing below.


(Sam Saffron) #21

Just an update, we had this working in the past but it became a security problem, people could abuse it, so we no longer enable it by default. You can still enable it if you white list it in site settings.

https://github.com/discourse/onebox/commit/af3c3494ed98d78d0db15e61aa1f25cf0580c06c