Safari CORS preflight cache OPTIONS method on image uploads (AWS S3 and CORSRules config)
- Mark as New
- Subscribe to RSS Feed
- Report Inappropriate Content
Safari failing its preflight CORS check on cached images, where the image src is a redirect (Canvas Instructure URL redirect to an AWS S3 bucket).
1. In Safari (v13.2 with file caching on, Desktop or iOS), Go to site https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test. I do not control this public page, my apologies if it becomes a broken link. If you have access to a Canvas LMS, you can duplicate this page by uploading an image through the Canvas image upload tool to a module page. Canvas embeds uploaded images as a redirect link to an S3 bucket.
2. Then refresh that page, to initiate a preflight CORS request on the cached image, to see the broken image link.
This is the console error:
FetchEvent.respondWith received an error: TypeError: Cross-origin redirection to <actual image source> denied by Cross-Origin Resource Sharing policy: Origin <hosted page containing the image src redirect to image source> is not allowed by Access-Control-Allow-Origin.
The original CORS request is fine. It's only the preflight check on cached resource that fails. I'm hoping it's a Safari bug/fixable, because if it's a feature, Chrome & Firefox might follow with the weird behavior. The other possibility is that additional CORS Rules on the server for OPTIONS methods with headers might resolve it for Safari (and future releases of Firefox and Chrome).
- Always open a private browser when using a page with an embedded CORS redirect image. The issue only happens when the image is cached. [Not a practical solution for users]
- Add a terminating solidus (forward slash) to all cachable resources that are CORS redirect paths. The issue only happens when the redirect path looks like a file not a directory. [I'm torn about this being bad style for image src URL. But, because the image src is really a redirect and not really a file anyway, I think it's not totally bad to show it as a dir.] ** the most practical of the bad workarounds
- Make the image src URL a DIFFERENT host than the page it's embedded in. The issue only seems to happen if the cached image src redirect URL is the same host as the web page. [This is so weird! Maybe, some crazy way Safari caches host page resources.]
- Use FireFox or Chrome when going to a page with a CORS image src redirect. The issue only happens with Safari. [Terrible workaround, cuts out a lot of users]
Finally, the QUESTION to the community: Are people addressing this issue by adjusting their CORSrules config on their Canvas server and/or the AWS S3 buckets?
For example, do you have cors rules that include the OPTIONS method, AllowOrigin, and AllowHeaders?
<CORSConfiguration> <CORSRule> ... PUT, DELETE, POST, etc .... <CORSRule> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>OPTIONS</AllowedMethod> <AllowedOrigin>*</AllowedOrigin> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
The answer on this link is not working for our issue of Canvas uploaded images: https://community.canvaslms.com/t5/Question-Forum/Uploaded-images-no-longer-function-in-Safari/m-p/3...
I asked the same question about CORS rules for Canvas and S3 here https://github.com/instructure/canvas-lms/issues/1183
An alternative possible help from jQuery library to remove the forced addition of `X-Requested-With: XMLHttpRequest` header on OPTIONS methods https://github.com/jquery/jquery/issues/4788