Why iframe doesn’t always work in your Canvas page

There are several reasons why your iframe embed code may not work in your Canvas page. It depends on if the site owner has restricted this embedding option.

Let’s look at a few of these reasons.

http and https

Any URL with the address of just http will not display within your page with the iframe code. This is because this site is considered to have insecure content.

X-Frame

The X-Frame options set to SAME ORIGIN is not something you can work around. It is a rule that is set by the site owner to prevent their content from being framed on another website. The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.

Google doesn’t allow iframe embedding.

I tried to embed the Google page in my Canvas page. I used the following code in my html editor:

When viewing the page, it came up blank. I just got my title “iframe linking to Google”.

On my Mac in Firefox I used the CMD/CNTRL shift J to bring up the console display as shown below:

Here I was able to see that X-Frame was indeed blocking my iFrame code from working. Check your own browser and platform for seeing this code.

How do I know if my iframe content will display?

First, only a secure site starting with https will work as iframe code. If you want to refer to a link starting with http, you the link tool and have the link open in a new tab or window.

If you want to dig into html code, potential problems can be analyzed using the inspect element function of your browser on their page. Or, by viewing the console error when a page that is iFramed is not showing. Here you might see the X-Frame issues as I did above.

Suggestions

Whenever possible, get the embed code from the site that you want to use in the iFrame. For example, in Google Maps, you can get the embed code from the maps menu. Just look for the embed/share code.

In YouTube and Box there is an area where you can get the embed code for folders or documents. Once you have the embed code, paste into the html area of the page editor.