[ARCHIVED] Embed Code not working, still

[chris_carlson]

Hi, I'm having trouble embedding an <iframe> in a Canvas Page to display an external formsite form for students. I have reviewed  Embed Code Not Working and think I was close, but the result just displays the <script> from the html file? Snippet and steps below.

My steps:

1. Took Javascript HTML code, saved it to a small html file and uploaded that file into the course FILES section.
2. Copied the link to the file in the course, and then worked in the Page HTML editor to create the <iframe>.
3. Pasted and edited the link, stripping the code after the fileID, and replacing it with /preview, and set some scale parameters.
4. Saved. Reloaded the page (for luck). Only the actual javascript appears in the Page, not the iframe of the form? (Don’t click the link – it loads all the form code!). Tested on three browsers and a mobile device.
   
   1. Working on a MacBook Pro 2016/OS 10.14.6, latest editions of Chrome, Firefox, Safari, and an iPhone 7

Snippet

<p><iframe src="https://gordon.instructure.com/courses/346/files/117597/preview" width="100%" height="800" data-api-endpoint="https://gordon.instructure.com/api/v1/courses/346/files/117597" data-api-returntype="File"></iframe></p>

Maybe I'm missing something obvious in the code?

[geverwills]

You cannot display a lot of websites inside an iFrame. Reason being that they send an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

I faced the same error when displaying youtube links. For example: https://www.youtube.com/watch?v=8WkuChVeL0s

I replaced watch?v= with embed/ so the valid link will be: https://www.youtube.com/embed/8WkuChVeL0s

It works well.

Try to apply the same rule on your case.

SAMEORIGIN

The page can only be displayed in a frame on the same origin as the page itself. The spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin.

[James]

Canvas has a content security policy (CSP) that Canvas administrators can enable that can prevent users from uploading JavaScript into files within Canvas. The recommended solution is to host the file on an external server rather than within Canvas itself. Embedding the content within Canvas has always been a hack.

If the CSP is the reason this doesn't work, then you may be able to disable it at the course level from the settings page. If your Canvas administrator has enabled it, they may have a location for you to host external files.

The code for the script showing up shouldn't be related to the iframe restrictions, but it could be a problem with the HTML in the file itself. If you look at the code of the file and see things like &lt;script= instead of <script=, then the HTML got mangled by something so it's not recognizing it as HTML, but as something that should be displayed.