Pass data to iframe page as non-admin

B_D_T
Community Explorer

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.

0 Likes