[ARCHIVED] Embed Canvas Pages as iFrames in External Websites

manuelgarciaph
Community Participant

Is there any workaround for embedding canvas pages to external websites via an iFrame tag? As expected, I received an error: Refused to display 'https://school.instructure.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin' when used the following:

<iframe src="https://school.instructure.com"></iframe>‍‍‍

We have an application that allows students to explore their academic journey through a map that is composed of courses linked to Canvas' contents. Some contents we fetched by API but there are some areas that we need to show the actual canvas page. I know, security purposes. However, this application can only be viewed inside canvas via LTI.

Although we are going to embed canvas pages to an external website, this website will still be placed inside canvas via LTI. Direct access to that external website will not be allowed since we only want to show this application to our canvas users. Moreover, we are not using any third-party services for this application as this is a custom one based on our needs. If security is the reason why iframe is not allowed, will Canvas considered allowing this to LTI applications?

For example, when we load the application to canvas via LTI, the iframe is allowed. When you access that application using its direct link (outside canvas domain), however, canvas can block the iframe again.

Labels (2)