# Supporting iframe embeds from different domains?

**URL:** https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930
**Category:** Feature
**Created:** [2015年七月9日 15:30 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930 "2015-07-09T15:30:50Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年六月9日 18:06 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/22 "2016-06-09T18:06:42Z")

</div>

That’s the problem. I don’t have discord app whitelisted there. You need to fork my repo and then add this line to the `whitelist.js` file.

```plaintext
Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/discordapp\.com\/.+/i);

```

Then refer to _your_ repo in your `app.yml`.

---

<div class="post-metadata">

### Author: ![marcospreviato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcospreviato/32/54766_2.png) [@marcospreviato](https://meta.discourse.org/u/marcospreviato)
#### Post date: [2016年六月9日 18:11 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/23 "2016-06-09T18:11:33Z")

</div>

yes, i made these procedures and was working perfectly, there had to install a new plugin and rebuild app, then again added the  
`Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/discordapp\.com\/.+/i);`

to whitelist.js and still did not work anymore!

---

<div class="post-metadata">

### Author: ![Emik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/emik/32/121662_2.png) [@Emik](https://meta.discourse.org/u/Emik)
#### Post date: [2016年七月29日 03:11 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/24 "2016-07-29T03:11:51Z")

</div>

Just installed the plugin (add in `app.yml`) but it didn’t work after rebuilt app.  
Test with SoundCloud, Freesound, Discord. Sadly nothing happened. 😥  
Discourse ver. is 1.6.0.beta12  
HTTPS enabled

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年七月29日 06:26 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/25 "2016-07-29T06:26:11Z")

</div>

I’ll try to update it in the next couple of days.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年八月14日 22:43 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/26 "2016-08-14T22:43:29Z")

</div>

That was a long couple of days 😊. It’s updated to work on the latest version of Discourse now. Let me know if you have any problems with it.

---

<div class="post-metadata">

### Author: ![Nicholas\_Tolstoshev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicholas_tolstoshev/32/62714_2.png) [@Nicholas\_Tolstoshev](https://meta.discourse.org/u/Nicholas_Tolstoshev)
#### Post date: [2016年十月18日 22:00 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/27 "2016-10-18T22:00:47Z")

</div>

Thanks for putting this together Simon!

I’m working on getting it up and running and I’ve gotten up to the stage of cloning the repo and adding my own domain to the whitelist.js file. I’m trying to allow [surveygizmo.com](http://surveygizmo.com) links to be embedded, so I can embed surveys. Everything works when I used a test soundcloud link (I left that line in the whitelist.js file) but when I try to do surveygizmo it won’t embed. The only difference I can see is that surveygizmo does http links for the embed rather than https. The regex seems to indicate with the ? that the s is optional, but could http links not work for some reason? Sadly the surveygizmo embed option doesn’t allow for https for some reason. In case I’ve made a typo in my regex here’s my code for the whitelist.js file:

```js
(function() {
  if (Discourse.dialect_deprecated) { return; }

  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/www\.surveygizmo\.com\/.+/i);
  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/w\.soundcloud\.com\/player\/.+/i);
})();

```

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年十月18日 22:13 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/28 "2016-10-18T22:13:30Z")

</div>

Do you have an example of an iframe from [surveygizmo.com](http://surveygizmo.com) that you are trying to embed?

---

<div class="post-metadata">

### Author: ![Nicholas\_Tolstoshev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicholas_tolstoshev/32/62714_2.png) [@Nicholas\_Tolstoshev](https://meta.discourse.org/u/Nicholas_Tolstoshev)
#### Post date: [2016年十月18日 22:14 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/29 "2016-10-18T22:14:19Z")

</div>

Thanks for the reply - yep here’s an example of the embed code:

```
<iframe src="http://www.surveygizmo.com/s3/3123078/Test-GN-survey" frameborder="0" width="700" height="500" style="overflow:hidden"></iframe>

```

---

<div class="post-metadata">

### Author: ![Nicholas\_Tolstoshev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicholas_tolstoshev/32/62714_2.png) [@Nicholas\_Tolstoshev](https://meta.discourse.org/u/Nicholas_Tolstoshev)
#### Post date: [2016年十月18日 22:23 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/30 "2016-10-18T22:23:45Z")

</div>

Ok I think I have it working. I had to edit the whitelist-iframe.js.es6 file manually - perhaps I was doing something wrong when I cloned the repo?

---

<div class="post-metadata">

### Author: ![Nicholas\_Tolstoshev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicholas_tolstoshev/32/62714_2.png) [@Nicholas\_Tolstoshev](https://meta.discourse.org/u/Nicholas_Tolstoshev)
#### Post date: [2016年十月18日 22:27 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/31 "2016-10-18T22:27:06Z")

</div>

It does still only appear to work when I use and https link though.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年十月18日 22:28 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/32 "2016-10-18T22:28:49Z")

</div>

> [@Nicholas\_Tolstoshev](#):
>
> if (Discourse.dialect\_deprecated) { return; }
> 
> Discourse.Markdown.whiteListIframe(/^(https?:)?//www.surveygizmo.com/.+/i);  
> Discourse.Markdown.whiteListIframe(/^(https?:)?//w.soundcloud.com/player/.+/i);  
> })();

You’re missing a backslash to escape the period in `.com` in both of those regular expressions. This works:

```plaintext
whiteListIframe(/^(https?:)?\/\/www.surveygizmo\.com\/.+/i);
whiteListIframe(/^(https?:)?\/\/w\.soundcloud\.com\/player\/.+/i);

```

Unless you have a reason to do it, you don’t need to use iframes for SoundCloud links. They work as oneboxes, so all you need to do is copy the url into a post.

---

<div class="post-metadata">

### Author: ![Nicholas\_Tolstoshev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nicholas_tolstoshev/32/62714_2.png) [@Nicholas\_Tolstoshev](https://meta.discourse.org/u/Nicholas_Tolstoshev)
#### Post date: [2016年十月18日 22:34 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/33 "2016-10-18T22:34:12Z")

</div>

that’s weird - it shows in my repo, just not when I pasted the text into here:

> <https://github.com/GrowersNetwork/whitelist-iframe/blob/master/assets/javascripts/iframe-whitelist.js>

Yeah I was only using the SoundCloud embed as a test to make sure I had the plugin installed right. This is my first time installing a plugin 🙂

---

<div class="post-metadata">

### Author: ![Stefan\_Fairphone](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefan_fairphone/32/119580_2.png) [@Stefan\_Fairphone](https://meta.discourse.org/u/Stefan_Fairphone)
#### Post date: [2017年一月2日 22:52 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/34 "2017-01-02T22:52:13Z")

</div>

> [@simon](#):
>
> You can test any URLs you wish to whitelist in your web browser’s console window. For example, if you open the browser’s console from a Discourse forum and then enter the following line, you should be able to embed iframes from Freesound.

I’m trying this out in Firefox 50.1.0, but the console returns `window.Discourse.Markdown is undefined`. What am I doing wrong?

I need to find the correct syntax so that I can propose it to our forum admin.

Edit: Specifically I’d like to embed this iframe:

````html
<iframe src="https://wearefairphone.github.io/fprsmap" width="400" height="300">
  <p><a href="https://wearefairphone.github.io/fprsmap" target="_blank">See the Fairphone Community Map!</a></p>
</iframe>
```
````

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2017年一月2日 23:28 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/36 "2017-01-02T23:28:28Z")

</div>

> [@Stefan\_Fairphone](#):
>
> You can test any URLs you wish to whitelist in your web browser’s console window.

Yes, that doesn’t work anymore. If you clone the whitelist-iframe repo and add this line to the bottom of the `whitelist-iframe.js.es6` file, it should work for you:

`whiteListIframe(/^(https?:)?\/\/wearefairphone\.github\.io\/fprsmap/i);`

---

<div class="post-metadata">

### Author: ![Stefan\_Fairphone](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefan_fairphone/32/119580_2.png) [@Stefan\_Fairphone](https://meta.discourse.org/u/Stefan_Fairphone)
#### Post date: [2017年一月2日 23:31 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/37 "2017-01-02T23:31:01Z")

</div>

Thank you! It’s a pity I can’t test this in the browser anymore, without modifying anything server-side…

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2017年一月2日 23:31 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/38 "2017-01-02T23:31:29Z")

</div>

> [@simon](#):
>
> You can test any URLs you wish to whitelist in your web browser’s console window.

This doesn’t work for newer versions of Discourse.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2017年一月2日 23:33 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/39 "2017-01-02T23:33:32Z")

</div>

It might be possible. I’ll try now.

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2017年一月2日 23:55 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/40 "2017-01-02T23:55:53Z")

</div>

You can test the regular expression in the browser by typing this into the console:

`var whiteListIframe = require('pretty-text/sanitizer').whiteListIframe;`

`whiteListIframe(/^(https?:)?\/\/wearefairphone\.github\.io\/fprsmap/i);`

If you’ve got the regular expression right, you’ll see the iframe in the preview window, but not in the cooked post.

 ![](https://global.discourse-cdn.com/meta/original/3X/0/8/088ce98ccee5e0d45bdefb9a587e41467486ed4b.png)

---

<div class="post-metadata">

### Author: ![Stefan\_Fairphone](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stefan_fairphone/32/119580_2.png) [@Stefan\_Fairphone](https://meta.discourse.org/u/Stefan_Fairphone)
#### Post date: [2017年一月3日 00:50 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/41 "2017-01-03T00:50:25Z")

</div>

Thank you, this works great here locally! You can even paste both commands into the console at once.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [2017年五月27日 10:23 UTC](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930/42 "2017-05-27T10:23:56Z")

</div>

I added Google Books to the list using

`whiteListIframe(/^(https?:)?\/\/books.google\.[a-z]{2,3}\/.+&output=embed.*/i);`

and it works. But it’s not perfect yet because it is not strictly limited to real google TLDs, which is a security issue. With the domains included by default, this has been solved by limiting them to the .com TLD. But at least in the case of Youtube this is too narrow.

I am not a RegEx expert and was not able to figure out how to specify a list of allowed TLDs. Anyone?

[上一頁](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930.md?page=1)

[下一頁](https://meta.discourse.org/t/supporting-iframe-embeds-from-different-domains/30930.md?page=3)
