[ARCHIVED] Access the url of the Canvas page containing an iframe

[jason_vermette]

I have several html pages that I load into pages on Canvas using iframes. Within those pages, I use javascript document.referrer to see what page on Canvas loaded my html page within the iframe. I do this so that I can make a page once and use it in many classes. Depending on the referrer url, my page knows which class linked to it and it loads the correct text, links, etc.

This has just recently stopped working:

Previously, document.referrer would give the full correct url, something like "https://mobap.instructure.com/courses/20533/pages/testing" 

Very recently, it only gives "https://mobap.instructure.com/"

This has broken almost every page and link in every one of my classes. I need to be able to access the full referrer url.

Has Canvas intentionally removed this ability? Or unintentionally? Or is it possible this is something my institution can control?

Is there another way to access the url of the page that is loading my iframe?

Many thanks.

[James]

window.parent.location would be more reliable than document.referrer, but it's blocked by CORS.

Ideally, Canvas would want you to load these as LTIs, which can pass the information along, but that's not always feasible.

One option is to add a query parameter to the src attribute of the embed that specifies the information that you need to pass. Then read the query string in your code. That won't change when you copy from course to course, though, so it's not really maintainable.

[jason_vermette]

Yes, my html pages are hosted elsewhere from Canvas, so window.parent.location is out.

As you mentioned, my current work-around is to add a query string containing the course id to the url in every iframe, and then on my page I can grab the course id from the query to know what course linked to the page. That's not an ideal solution because, I now have to add a different tag for different courses every time I link to one of my external pages. This means if I import my pages to another class, I still have to go into all of my custom pages and change their url query strings. If the referrer still worked, all courses could use an identical link (for a given page) and the course would be determined automatically.

Unfortunately, through some experimenting I've discovered that it's actually a browser issue: Google has decided to change the default referrer policy in Chrome to strict-origin-when-cross-origin when a site does not specify its own in the site header. That referrer policy does exactly what I'm experiencing: it gives the main site url of the referrer, but not the full referrer url. The old default (possibly still the default on some browsers?) was no-referrer-when-downgrade, which sent the full url as long as both domains were https. I would be interested to know whether my Canvas admin has access to setting the referrer policy. I kind of doubt it. But having access to that policy would solve the problem, since the browser default is only used when a site does not set its own policy.

[James]

@jason_vermette 

The referrer wasn't reliable as it's an optional header, so there was no guarantee that it would be sent. In practice, it might have been, but that's different from being guaranteed.

There was a discussion many moons ago about launching an LTI from a content page. I still think that's going to be the best solution for maintainability. You can set the LTI up to pass the course information and process it on your server and then deliver the correct page. That page could be determined by the course name or assignment name as LTI variables, but you might also need to use some query string or pathname that indicates the location to be delivered.

There are lots of posts in the community about LTI and some might be better than the ones I was thinking of, but I finally managed to track a couple of them down. These are about loading the content in a page (not a module item), where it's easy.

• LTI launch data in an iframe?
• How do I make a LTI External Tool link on a Page open in a new window?

[jason_vermette]

Thank you, I will look into those. I have lots of experience in html, but none with LTIs.

I think I will leave my query fix in place for now and look into LTIs when I have time - it sounds promising.

Thanks for the help.