Pass data to iframe page as non-admin

[B_D_T]

Overview of issue

On a Page, I'm trying to pass data that to an html file I'm loading via iframe. The main data I need right now is current user/course data, so passing data from the window.ENV object would be ideal.

I do not need to receive data from iframe.
Receiving data would be helpful, but I know that's a completely different set of issues.

Note: I am just an instructor, thus I do not have admin rights.

Sample code from Canvas Page

The pages I load are from a different course, which I use sort of like a repository for shared content. In the URL below, that's the MY_REPO_COURSE_ID.

<iframe style="width: 100%; height: 800px;" src="https://UNIV_SUBDOMAIN.instructure.com/courses/MY_REPO_COURSE_ID/file_contents/course%20files/Repo/C..." allowfullscreen="allowfullscreen"></iframe>

What I've tried

So, so many things. Here are a few of my attempts...

Dynamically add query strings to the src URL

Doesn't work because I can't write JavaScript in the Canvas Page itself

Use postMessage from the parent page

Again, I can't write JavaScript in the Canvas Page itself

Query the API from within the iframe page

The API won't work because the iframe page is served from a CDN with a different domain (e.g., https://a12345-1234567.cluster123.canvas-user-content.com)

Use LTI postMessage from within the iframe page

This almost works! The LTI postMessage tools allow me to pass data to (and from) the iframe page, but it's not flexible enough to pass whatever I need, such as the ENV data.

What to do next

I'm pretty close, so I hope it's just that I'm missing something obvious. I.e., I just haven't come across the right page in the documentation.

Sorry to bother the board with something I figured I'd be able to solve, and I'd be grateful for any ideas or suggestions.

[B_D_T]

Also, I came up with a partial solution -- I can get the current courseId by having JS on the iframe page that parses the URL from document.referrer. That's not a perfect solution, but it's helpful in the short-term.

[B_D_T]

@jason_vermette I saw your post about something similar to this. Did you ever figure out a way to read the parent URL from within the iframed content?

(my document.referrer plan doesn't work on Firefox)

[michael5]

Hi B_D_T,

If I understand correctly you're attempting to pass data from a Canvas page to another page that you've embedded as an iframe. This is a form of cross-site scripting and simply won't be possible in any normal browser, and Canvas will and should block any attempt at doing so regardless of what browser you're using. It's a massive security concern - imagine the data theft and sabotage students or anyone else would be able to do on the system if they were capable of harvesting data from the site via embedded scripts or sending malicious code to the Canvas system via an external site.

I get the need, though. I've struggled with similar issues over the years and I still have some issues that I cannot solve since it's so limited what HTML you can use on a Canvas page (in the HTML editor), which quickly leads one to thinking that building a page externally and embedding it on the page is the best solution. But then you lose all Canvas functionality and there is, to my knowledge, no way to bridge this gap.

Typically, you'd upload JavaScript and CSS to the Theme Editor in Canvas and then there's no limit to what you can achieve on a regular Canvas page. Or, if you're just trying to fetch certain data, you'd send a request via the Canvas API, but both of these approaches require administrative privileges.

Depending what data you're trying to fetch I might be able to help, but I'll need a detailed description of exactly what you're trying to fetch for use on the external page.

Michael