Supporting iframe embeds from different domains?

Ah - haven’t done it yet - but probably time to learn. Thanks!

https://github.com/discourse/discourse/blob/b12ace5f9d867426172c0fa17e8107b3805e8901/app/assets/javascripts/discourse/lib/markdown.js#L223-L227

Hello, We need max width and length for iframe. What we can do, to realize this?
I have found this, but I’m not sure. I’m newbie in JS.
Somebody can help me?

Just learning to install plugins into Discourse. I got the plugin installed and it works! Now… How do you find the file in Digital Ocean so I can hardcode a new domain to whitelist? /var/discourse/plugins doesn’t exist…

To find the file on Digital Ocean, ssh into your droplet and then run:

$ cd /var/discourse
$ ./launcher enter app
$ cd var/www/discourse/plugins

The problem with changing things that way is that your changes will be overwritten every time you update Discourse. The right way to do it is to update the plugin file that is in the repository on github and then run launcher rebuild app in your droplet.

You can do that by cloning my repository on github and making the changes you want in your cloned version. You then need to change the url that you have added to the app.yml file so that it pulls from your new repository. If this isn’t clear, just let me know :slightly_smiling:

I can also just add the domain you want to whitelist to the plugin file that is in my repository.

5 Likes

Thanks @simon! I got it to work through cloning your repository :slight_smile:

1 Like

i installed the plugin and i try add my iframe of discord with command:

<iframe src="https://discordapp.com/widget?id=184421097603596288&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>

but not happen, how to insert discordapp.com to whitelist?

You will need to cone the plugin to your own github repository and add something like this to the iframe-whitelist.js file:

(function() {
  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/www\.freesound\.org\/embed\/sound\/iframe\/.+/i);
  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/w\.soundcloud\.com\/player\/.+/i);
  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/graphics8\.nytimes\.com\/.+/i);
  Discourse.Markdown.whiteListIframe(/^(https?:)?\/\/www\.youtube\.com\/embed\/.+/i);

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

You will then need to use your own repository as the source for the plugin.

3 Likes

Nice, work perfectly, its amazing! Thanks!

@simon i rebuild app and inserted code again in iframe-whitelist.js file, but now, not working :pensive:

1 Like

Which github repo do you have in your app.yml file?

1 Like

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.

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

Then refer to your repo in your app.yml.

1 Like

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!

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

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

2 Likes

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

4 Likes

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 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:

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

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

Do you have an example of an iframe from surveygizmo.com that you are trying to embed?

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>

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?

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