cancel
Showing results for 
Search instead for 
Did you mean: 
cwoodruf
Community Member

Uploaded images no longer function in Safari

Jump to solution

Uploading and embedding images in Canvas during last academic term worked fine...

[Addendum: Following suggestion from browser guide, I tried using in a Safari "private window." That workaround revealed the images. I've cleared cache and history, and the problem in a normal window remains.]

Now, the images I had uploaded into the course images folder no longer appear--in the desktop Safari environment (ver. 13.1). They are working on the Canvas iPhone app and in desktop Firefox (ver. 74) browser. This is true for courses successfully run last term AND courses I'm creating for the term that starts next week.

I have cleared desktop Safari's history and cache. Here's what I'm seeing"

• Course home page banner:

coure home page image

• Embed images window showing the icon. Note the images that came in with the template import are fine. They also embed just fine if I choose to use those instead. It's just the images I uploaded into the Canvas course that are unavailable--though they USED to be.

embed images window

• And here's what it looks like when I go to the Files course images folder. The two images with blank thumbnails are images I uploaded. Again, this is true for course I created last quarter AND for this coming quarter.

course images folder

Any guidance on this will be helpful as I create content and assessment for music that are image intensive!

76 Replies

If disabling the cross-site tracking still does not resolve the issue, I recommend using a different browser until this bug is resolved. I apologize about the inconvenience this has caused. 

watsonnk
Community Participant

Thanks, it would be good if this could be fixed asap; disabling cross-site tracking is not the ideal solution anyway because that feature cannot be easily controlled per domain, only globally (and also, the cross-site tracking is provided for a good reason). Changing browser is also not ideal as a workaround.

 

kdolan1
Community Participant

Hi, unchecking the Disable cross site listing in Safari did not work for me. I opened the page with inspector and added a solidus (forward slash) to the image source and then Safari loaded the image, no problems. Not sure why the trailing solidus (forward slash) would fix the CORS issue for Safari. 

Also, open a Safari new private window and the images load. But, reload the page and get the broken image links and CORS error.

A third oddity, is that pasting that image snippet into a different host webpage works to load the image. But, pasting it into the webpage of the same host gets the CORS error.

For example:

Take this html image that links to a Canvas image
<img src="https://cidilabs.instructure.com/courses/3/files/190725/preview?123" data-api-returntype="File" class="broken-image">

Go to this page, open it in inspector, paste in the image link in the body area, and the image shows. Then, edit param on the src to verify that reloading the image also works:
https://www.instructure.com

Go to this link, open it in inspector, paste in that image link above in the body area, and the image is a broken link with the CORS error.
https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test

SAJL
Community Participant

@csato Sorry to reply twice to your threads, but want to make sure it's recognized as a current and ongoing issue since this was reported at my institution by a developer and is reproducible on Safari 13.1 but not 13.0.

Since this is an ongoing issue, despite the 8/13 or 8/17 deploy, should the problem specifically be detailed on 
the recommended browsers page and Safari removed from the recommended browsers until it's actually fixed? While there is already a note about Safari with downloads and chat on the recommended browsers page, with the cross-tracking solution (which is not actually a solution/does not work) and the issues are likely connected, the casual user would not know this.

Additionally, is there a way to unflag this post as solved, since it isn't?

SAJL
Community Participant

@csato

Since this is an ongoing issue, despite the 8/13 or 8/17 deploy, should the problem specifically be detailed on the recommended browsers page and Safari removed from the recommended browsers until it's actually fixed? While there is already a note about Safari with downloads and chat on the recommended browsers page, with the cross-tracking solution (which is not actually a solution/does not work) and the issues are likely connected, the casual user would not know this.

Additionally, is there a way to unflag this post as solved, since it isn't?

@SAJL We are adding additional information on our recommended browsers page. We won't be removing Safari as a recommend browser but will add additional information in the note below the list of support browsers. 

I'll be working with our community team to also get this marked as unsolved. 

Thanks

Renee_Carney
Community Team
Community Team

Please follow What are the browser and computer requirements for... - Canvas Community 

Note: Safari 13.1 contains an update that may cause issues with downloading files and chat alerts in Canvas. Canvas engineers are currently working on a solution for this issue. Until then, you may avoid errors with files and alerts by disabling cross-site tracking prevention in Safari when using Canvas. If disabling cross-site tracking doesn't resolve these issues, please try one of the other supported browsers.

gulick_24
Community Participant

Thanks, except that when we go to that link and read that "Canvas engineers are currently working on a solution for this issue." ...that's not an actual solution, so it's not really solved yet.

kdolan1
Community Participant

The disable cross-site tracking does not appear to be related to this issue. Is someone able to verify that they can toggle the CORS error, on and off, for the image src from this site, by toggling that Safari preference param? https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test?

I wonder if the Safari issue with image src, is related to this comment on a [workaround] for the Edge browser (i.e. forceEdgeToDownloadNewResourceSoItHasAccessControlAllowOriginHeaderhttps://github.com/instructure/canvas-lms/blob/2647f5cc44491758f3744ff8e05ddcc793a28efb/app/jsx/canv...

[EDIT] never mind about the Edge workaround, it adds a param to the end of the URL to force a download with the correct CORS headers. Adding the param is known NOT to work for this image src issue. Adding the trailing backslash on the URL path (before the params) works for image.

I'll test loading the image source as a content URL vs "src" attribute, to see if the issue is really hyper specific to the HTTP image media element src attribute. 

ish06
Community Member

I am not sure if a solution was put in place but I am able to see pictures in safari again, however I am not able to submit files now.

[EDIT] also I am not able to send messages in the canvas page (even though it says sent). I have to log into my school academic email to send a message to my instructors.