Supporting iframe embeds from different domains?

[simon]

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.

[marcospreviato (Marcos P)]

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!

[Emik]

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

[simon]

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

[simon]

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.

[Nicholas_Tolstoshev]

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);
})();

[simon]

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

[Nicholas_Tolstoshev]

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>

[Nicholas_Tolstoshev]

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?

[Nicholas_Tolstoshev]

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

[simon]

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:

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.

[Nicholas_Tolstoshev]

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

[Stefan_Fairphone (Stefan Brand)]

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

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

[simon]

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);

[Stefan_Fairphone (Stefan Brand)]

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

[simon]

@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.

[simon]

It might be possible. I’ll try now.

[simon]

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.

[Stefan_Fairphone (Stefan Brand)]

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

[tophee (Christoph)]

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?