Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
victoria_simons
New Member

Canvas iOS App Not Loading iFrame Content

Jump to solution

I have developed a program in Captivate to use in my Canvas course. I have placed the index page inside an iFrame, and it loads great on a computer, but shows up as a blank box inside the app. I have tried also coding it to load in a new window, but still the app does not load it (while the computer does). Is there a way to make the app load iFrame content hosted inside of Canvas?

Thanks for your help.

1 Solution
narmstrong
Instructure
Instructure

I'm going to give you a long and a short answer to this.

The short answer

If you add id="cnvs_content" to the iframe it should start working in the mobile app.

Example:

<iframe id="cnvs_content"></iframe>

The long answer

Apple is really cracking down on cookies, specifically cross-domain cookies which is what's happening here. When you load the canvas page a session cookie is set so that the canvas page content loads. With an iframe, the content for the iframe is protected and the user must be authenticated to view it. So another cookie must be set within the iframe in order for the iframe content to load. To Apple, this looks and smells like a privacy vulnerability so they shut it down. Therefore, the cookie for the iframe is never set which prevents the iframe content from loading. I'm probably getting a lot of that wrong because, well, I'm a mobile developer and not a web developer but that's the gist of it.

So, because this iframe business is becoming more and more common practice for our Canvas customers, we had to come up with a workaround for the iOS apps since it doesn't work with Apple's Web Views which is the best we've got.  The workaround is to "pop" the first iframe with id="cnvs_content" out of the page and reload the web view with the source url for the iframe. Still following?

This works okay. It's not great and it makes me sad that we have to do it. Here are a few things that you should be aware of before you go updating your iframes with the cnvs_content id.

  • Workarounds like these tend to have unintended side effects which can cause bugs. It's up to you to report the bugs that you find.
  • While there are a few accounts using the cnvs_content id, there aren't many so if there are bugs it might take a while for them to surface. You will have to do your due-diligence about reporting the bugs that you find.
  • Fixing bugs for these workarounds tend to get de-prioritized because, quite frankly, it's not really our fault that Apple is so crazy about cookies and we're not the ones building web pages that break in Apple's browsers. We will get around to fixing them but it's not going to be a high priority.
  • While it seems to work okay with the current operating systems, there's no telling if Apple will break our method in a future release and to the previous point, it might take us a little bit to fix the workaround (if at all possible).
  • Any other content besides the first iframe will not load. We replace the web view with what's in the first iframe with the cnvs_content id. So if there's a paragraph before the iframe, it will disappear. If there's an image after the iframe it will be gone. If there are two iframes, only the first one will be loaded.

My (naive) suggestion: If you care about mobile (or desktop safari users), stop using iframes in canvas pages. That might not seem possible but I would ask that you strongly consider alternatives. It's similar to flash or any other web practice of old. It's on its way out.

View solution in original post

21 Replies
Bobby2
Community Champion

Hi  @victoria_simons . This can be quite the challenge and have had to make it clear that different devices may behave differently to what I have on the page. Good on you for checking different devices.

There are a few people asking similar questions. Here is a workaround that you may find helpful.

Why don't images embedded in an iFrame show up in the iOS app?  

I encourage you to join the Community https://community.canvaslms.com/groups/cmug  as they may have more ideas there.

Good luck! 

narmstrong
Instructure
Instructure

Hi  @victoria_simons ‌. Do you have access to a Mac? If so, would you try loading the content in "Private mode" in Safari on Mac? If you don't have access to a Mac I can take a look at the content myself. I will just need to know which account, course, page, etc to look at.

Thanks,

Nate

iOS Team Lead

0 Kudos

Hi Nate,

I have a mac. The content has zero problems loading on the computer (works in Safari "Private mode" too). It just will not load on the Canvas app.

0 Kudos

Here is a link to one of the pages I am testing if you would like to see. I have the Canvas student app and have tried testing it there with no luck. It loads on a mobile phone browser no problem. 

0 Kudos

Thanks. I'll take a look and let you know what I find.

0 Kudos

It's loading for me in Chrome on Mac but not in Safari.

Here's what I'm seeing in Chrome:

305605_Screen Shot 2019-01-30 at 10.30.10 AM.png

Here's what I see in Safari (not Private mode):

305642_Screen Shot 2019-01-30 at 10.30.16 AM.png

Are you seeing something different? There's obviously something wrong here. Just trying to identify whether it's a problem with the app specifically or if it's an issue with how Apple handles this kind of content...

I'm using Mac version 10.14. Which version are you on?

0 Kudos

I'm on 10.13.6

I see it load in Safari private mode.

305645_Screen Shot 2019-01-30 at 9.37.33 AM.png

0 Kudos

I just restored an old version of it that also had a link to load the frame in a new window. Both the regular iframe and the link to load in a new window are working for me on Safari on computer and my mobile phone browser.

0 Kudos

Hmm it doesn't load for me in mobile safari either. Which version of iOS are you on? I know that macOS Mojave (10.14) and iOS 12 had quite a few security updates that likely would have affected this. Would you be willing to update to macOS 10.14 to verify if it is in fact an operating system issue?

My work locks our computer updates, so I cannot.

However, I can load it on my iOS Safari. Did you try clicking the link at the bottom of the page on your mobile safari? Perhaps that link works better. It works for me.

305646_pastedImage_1.jpg

My phone is operating on 12.1.2

Ah yes, if I click the link it loads in mobile safari. We're still seeing slightly different things there but I think we're getting somewhere.

The button you added to load in a new window did work for me in Safari (both private and non-private).

But it does not work in the app. Still digging.

Thank you!

narmstrong
Instructure
Instructure

I'm going to give you a long and a short answer to this.

The short answer

If you add id="cnvs_content" to the iframe it should start working in the mobile app.

Example:

<iframe id="cnvs_content"></iframe>

The long answer

Apple is really cracking down on cookies, specifically cross-domain cookies which is what's happening here. When you load the canvas page a session cookie is set so that the canvas page content loads. With an iframe, the content for the iframe is protected and the user must be authenticated to view it. So another cookie must be set within the iframe in order for the iframe content to load. To Apple, this looks and smells like a privacy vulnerability so they shut it down. Therefore, the cookie for the iframe is never set which prevents the iframe content from loading. I'm probably getting a lot of that wrong because, well, I'm a mobile developer and not a web developer but that's the gist of it.

So, because this iframe business is becoming more and more common practice for our Canvas customers, we had to come up with a workaround for the iOS apps since it doesn't work with Apple's Web Views which is the best we've got.  The workaround is to "pop" the first iframe with id="cnvs_content" out of the page and reload the web view with the source url for the iframe. Still following?

This works okay. It's not great and it makes me sad that we have to do it. Here are a few things that you should be aware of before you go updating your iframes with the cnvs_content id.

  • Workarounds like these tend to have unintended side effects which can cause bugs. It's up to you to report the bugs that you find.
  • While there are a few accounts using the cnvs_content id, there aren't many so if there are bugs it might take a while for them to surface. You will have to do your due-diligence about reporting the bugs that you find.
  • Fixing bugs for these workarounds tend to get de-prioritized because, quite frankly, it's not really our fault that Apple is so crazy about cookies and we're not the ones building web pages that break in Apple's browsers. We will get around to fixing them but it's not going to be a high priority.
  • While it seems to work okay with the current operating systems, there's no telling if Apple will break our method in a future release and to the previous point, it might take us a little bit to fix the workaround (if at all possible).
  • Any other content besides the first iframe will not load. We replace the web view with what's in the first iframe with the cnvs_content id. So if there's a paragraph before the iframe, it will disappear. If there's an image after the iframe it will be gone. If there are two iframes, only the first one will be loaded.

My (naive) suggestion: If you care about mobile (or desktop safari users), stop using iframes in canvas pages. That might not seem possible but I would ask that you strongly consider alternatives. It's similar to flash or any other web practice of old. It's on its way out.

Thank you so much for the reply and the explanation! 

I've added the code and it loads on that page.

I'm happy to stop using iframes if I knew another option. Is there another way to get an index.html page to load inside of a Canvas page or assignment?

0 Kudos

My pleasure. I'm glad it's working!

I don't know if there is a better way to load content from an index.html file right now. I think a community request to make this sort of thing a first-class citizen within Canvas could be interesting.

I think so too. Maybe after I finish this project I'll put it out there and see who else would like the feature.

Thanks for taking the time to work on this with me!

stale_heggset
New Member

We have this problem, that is a new problem as it worked in 2018: We upload our html-captivates into Canvas file system. And then we iframe the index-file with the URL provided by Canvas. This is working perfectly in the browsers Chrome and Firefox on computers/Mac, but since roll out in Canvas 6th January it has stopped showing in Safari on Ipad.

However when using ekstern ftp area (eksternal server) and iframed from outside canvas, it is still working perfectly. It looks like Canvas is adding something that is not compatible on Ipad. We have addressed this problem to Canvas. Short answer is: Upload the Captivates into eksternal ftp. Working even on the App.

Longer answer is that they do not have any clue of why this happened after 6th January, as they all worked fine before that. 

0 Kudos

Nate Armstrong
How will this iframe with <iframe id="cnvs_content"></iframe> actually look like with Captivate content uploaded into Canvas file system?

This is how our iframe with content from Canvas fil system looks like:

<iframe src="https://XXX.instructure.com/courses/YYY/files/ZZZ/download" width="400" height="300" data-api-returntype="File" data-api-endpoint="https://XXX.instructure.com/api/v1/courses/YYY/files/ZZZ">index.html" align="bottom" scrolling="no" frameborder="0" height="300" width="400"&amp;amp;amp;amp;gt;</iframe>

This is how our iframe with content from outside (ftp/eksternal server) looks like:

<iframe align="bottom" src="https://XXX.no/yyy/Captivate/ZZZ/" width="900" height="640"></iframe>

If you have any suggestions of what we could do with the first Iframe to make Captivate work at Safari, we would be so happy. We have startet the work to upload all the captivates into ekstern server. It would have been better to use Canvas file system.

I think the iframes will look the same. You just need to add id="cnvs_content"