Issue embedding iframes

[gdeflaux]

Hey,

I am encountering an issue when trying to embed an iframe in a resource of type Page. I can see that the iframe loads (spinner is displayed), but sort of hangs. See below:

The error seems to be related to CORS and/or javascript.

Here's the source code of the iframe:

<iframe style="position: absolute; inset: 0;"
    src="https://www.guidejar.com/embed/3ea9f9ac-d51c-42d4-ad9e-3d8149c5c996?type=1&amp;controls=on"
    width="100%" height="100%" frameborder="0" sandbox=""
    allowfullscreen="allowfullscreen"></iframe>

I've tried the same iframe code in the Moodle Cloud (hosted version) and it works fine so I am thinking that this might be a config issue on my instance. I have not performed any modification to the cloudron app nor the setting inside Moodle.

Has anybody encountered a similar issue? Any help would be much appreciated.

Thanks!

Guillaume

[joseph]

@gdeflaux I think you have to change the sandbox attribute in the iframe . Currently, it does not allow script execution. See https://stackoverflow.com/questions/24531061/blocked-script-execution-in-because-the-documents-frame-is-sandboxed-angular . I am guessing the CORS issue is just because of that. Unless your iframe is accessing some other domain, I fail to see how CORS comes into picture .

[gdeflaux]

Hi @joseph,

Thanks for your message. I tried adding sandbox="allow-scripts" to the iframe tag but Moodle removes allow-scripts upon saving leaving the tag as sandbox="".

I can confirm that this seems to be the issue. Having the sandbox tag removes all error except the first one mentioning allow-scripts. If I manually add sandbox="allow-scripts" to the iframe using the dev tools and reload the iframe, the content appears as expected. So I suppose there's a setting in Moodle that cleans the iframe code.

I have tried enabling the following options:

• Allow EMBED and OBJECT tags
• Enable trusted content

But didn't make a difference.

[joseph]

@gdeflaux This looks similar to https://moodle.org/mod/forum/discuss.php?d=462739&parent=1858045 right ?

[joseph]

I would look into the filter settings. I don't remember moodle but they have some filters that edit stuff. For example, see also https://forum.cloudron.io/topic/12322/moodle-bug-unable-to-inject-script-javascript-code-script-in-blocks-or-course-activities

[gdeflaux]

@joseph That's exactly the problem apparently. I tried all the filter options that I could find but without success.

I ended up installing a plugin called Generico and go it to work. It allows you to define "macros" directly in TinyMCE WYSIWYG mode that are later replaced by HTML.

I created a macro that basically adds an iframe. The weird thing is that the HTML generated by that macro does not have the sandbox attribute in the iframe tag.

So this might be an issue with TinyMCE itself. I haven't found any settings there either that would seem to address this issue. So the thing remains a mystery (especially since iframe embeding works fine on the Moodle Cloud).

[taowang]

I posted this.

https://forum.cloudron.io/topic/12322/moodle-bug-unable-to-inject-script-javascript-code-script-in-blocks-or-course-activities

You need to go through these steps:
go to site administration > plugins
press command + 5 to search for "Convert URLs into links and images"
click on settings and toggle off the HTML format
use HTML format when injecting code with urls

Moodle is quite confusing. Many developers have complaint about it.

https://www.reddit.com/r/webdev/comments/2l3hy9/moodle_not_even_once_what_is_your_the_worst/

I am thinking about switching to other LMS or simply wordpress.

Moodle is very hard to customize. You will encounter other werid problems in the future as well.

[murgero]

I believe you have to modify the content security policy: (note: this is the default for LAMP, not sure what you need for moodle but a google might help: Moodle CSP allow iframe or something)

[crazybrad]

@gdeflaux I am not familiar with Moodle but I have seen Wordpress plugins strip certain tags to prevent potential XSS issues. It became necessary to restructure working content and the theme files to restore functionality that was broken. I would suggest making sure that you know how the CMS handles iframes before adjusting the CSP. LAMP stacks can adjust CSP via .htaccess, PHP header commands, and HTML <meta> directives. Good luck peeling back layers of the onion.