# Embedding pens from CodePen
**URL:** https://meta.discourse.org/t/embedding-pens-from-codepen/13578
**Category:** Feature
**Created:** [March 9, 2014, 9:56pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578 "2014-03-09T21:56:57Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@ralphm](https://meta.discourse.org/u/ralphm)
#### Post date: [March 9, 2014, 9:56pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/1 "2014-03-09T21:56:58Z")
CodePen has a really nice feature that allows you to [embed pens on other sites](http://blog.codepen.io/documentation/features/how-do-i-embed-a-pen-on-another-site/). 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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 9, 2014, 10:54pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/2 "2014-03-09T22:54:00Z")
Seems possible, @eviltrout can you take a look and see?
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [March 10, 2014, 7:43pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/3 "2014-03-10T19:43:13Z")
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.
---
### Author:  [@ralphm](https://meta.discourse.org/u/ralphm)
#### Post date: [March 10, 2014, 8:52pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/4 "2014-03-10T20:52:06Z")
That’s great. Thanks for looking into this, guys. I look forward to a reply from them. 😄
> [@eviltrout](#):
>
> They do support open graph, but it looks like a simple summary of the pen and not an embedded widget.
Yes, the current result is certainly acceptable, but not the ideal.
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [March 11, 2014, 6:52pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/5 "2014-03-11T18:52:53Z")
We plan to support oEmbed. Just gotta get to it =).
---
### Author:  [@ralphm](https://meta.discourse.org/u/ralphm)
#### Post date: [March 11, 2014, 8:38pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/6 "2014-03-11T20:38:39Z")
Thanks Chris! That’s great to hear. 🙂
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [April 5, 2014, 5:45pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/7 "2014-04-05T17:45:23Z")
Hey Team,
oEmbed for CodePen is ready to rock: [oEmbed! – CodePen](http://blog.codepen.io/documentation/features/oembed/)
Lemme know if you have any questions or anything.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 5, 2014, 8:32pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/8 "2014-04-05T20:32:55Z")
Excellent when we work on oneboxes this week @eviltrout make sure that is white listed now!
---
### Author:  [@ralphm](https://meta.discourse.org/u/ralphm)
#### Post date: [April 5, 2014, 9:37pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/9 "2014-04-05T21:37:55Z")
That’s great. Thanks Chris and Jeff!
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 15, 2014, 5:30am UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/10 "2014-04-15T05:30:45Z")
https://codepen.io/msvbg/embed/preview/sGIof?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=sGIof
Works great!
(well, except it does not work in mixed http/https environment..)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 15, 2014, 5:35am UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/11 "2014-04-15T05:35:07Z")
How about this simplified codepen? [http://codepen.io/coding-horror/pen/Atjvw](http://codepen.io/coding-horror/pen/Atjvw)
https://codepen.io/coding-horror/embed/preview/Atjvw?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=Atjvw
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!
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [April 15, 2014, 5:57am UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/12 "2014-04-15T05:57:50Z")
> [@codinghorror](#):
>
> possibly an https mixed content error?
```
[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.
```
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [April 15, 2014, 11:27am UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/13 "2014-04-15T11:27:09Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 15, 2014, 6:57pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/14 "2014-04-15T18:57:04Z")
Looks like it is working now! Excellent!
edit: hmm, it was working in iOS Mobile Safari at least..
---
### Author:  [@ralphm](https://meta.discourse.org/u/ralphm)
#### Post date: [April 16, 2014, 12:06am UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/16 "2014-04-16T00:06:54Z")
Seems to be working fine to me. (Just tested it on our installation, and it’s working well.) Great work, guys. 😃
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [April 16, 2014, 8:24pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/17 "2014-04-16T20:24:38Z")
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:
https://codepen.io/depy/embed/preview/gniHh?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gniHh
The ones above might be cached or whatever so are still showing as blocked (in desktop chrome) but hopefully this one works.
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [April 16, 2014, 8:26pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/18 "2014-04-16T20:26:03Z")
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://css-tricks.com/https-test/](https://css-tricks.com/https-test/)
---
### Author:  [@radq](https://meta.discourse.org/u/radq)
#### Post date: [April 16, 2014, 8:32pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/19 "2014-04-16T20:32:49Z")
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?
---
### Author:  [@alexquez](https://meta.discourse.org/u/alexquez)
#### Post date: [April 16, 2014, 9:43pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/20 "2014-04-16T21:43:19Z")
CodePen now defaults to https if no referrer is present or the referrer used HTTPS.
We think it’s good to go. Testing below.
https://codepen.io/shdigitaldesign/embed/preview/IKwxe?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=IKwxe
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 29, 2015, 10:52pm UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/21 "2015-07-29T22:52:41Z")
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](https://github.com/discourse/onebox/commit/af3c3494ed98d78d0db15e61aa1f25cf0580c06c)
[Next page](https://meta.discourse.org/t/embedding-pens-from-codepen/13578.md?page=2)