CORS Error when attempting to fetch Calendar Feed

[a_1234]

An front end web app I have made fetches the canvas calendar feed and is meant to render it. It works for other applications but for canvas, I am getting a cors error and the only way to bypass this is by using a proxy. I have tried using a proxy and it works, but this is not an ideal solution. Is there a way to fix this? The calendar states that it should work for "any" calendar app that takes ical feeds, so it should be allowed to work for mine, right? 

[seanbeirnes]

Hello @a_1234,

I am assuming the CORS error you mentioned is something like the following:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

If that is the case, I can assume that you are trying to fetch the calendar feed directly from the client-side JavaScript, and therefore, what you are seeing here is not a Canvas issue. It is your web browser enforcing the Cross Origin Resource Sharing (CORS) security mechanism.

Because of the many types of cyber attacks out there that can use client-side JavaScript, browsers these days default to a same-origin policy. This means that the domain in the browser's address bar is by default the only domain to which JavaScript may make requests. This obviously does not work for the modern web since a web page these days may make requests to many different domains. CORS helps browsers differentiate between what is likely a safer and riskier request (keeping in mind, CORS is just one of many mechanisms that secure browsers).

In your case, you have a web application running at (just for the sake of explanation) somedomain.com, and the JavaScript from your app (running in the browser) is trying to retrieve the calendar feed from a someschool.instructure.com/feeds/calendars/user... url. Because the Canvas calendar feed is not also on somedomain.com and does not include an "Access-Control-Allow-Origin" header in its response, the browser considers this a red flag and blocks it.

The short answer is that you do need to use a proxy to solve this issue. The reason why the Canvas calendar feed works for other calendars apps, like iOS, Outlook, etc. is that they are either using a proxy too or they are requesting the feed outside of a browser (such as on a server or in a desktop application). Since it sounds like you are making the request directly in the browser, the request must submit to CORS.

[a_1234]

Hi @seanbeirnes , thanks for your detailed answer. Is it possible for Canvas to add the "Access-Control-Allow-Origin" headers to all user calendars? Would a proxy still be needed then?

[seanbeirnes · Accepted solution]

Yes, @a_1234, if Instructure sent down the "Access-Control-Allow-Origin" header for calendar feeds, then it could relieve your problem, but the allowed origin would need to be the wildcard (i.e. any domain could access it) and/or specifically list the domain of your application. Otherwise, it still would not work without the proxy.

Instructure probably has no incentive to send down those headers since I would assume those calendar feeds are mostly used by users who add them to apps like Outlook, iCloud, etc., and those are not bound by CORS since a lot of that processing happens on the server side. Using the wildcard origin could introduce security vulnerabilities for cross-site scripting attacks that would not even be possible with the current set up, and since calendar feeds are usually something that does not get processed by client-side JavaScript in the browser, I think it would be unlikely to see this changed.

[a_1234]

Oh, ok. Would there still be security vulnerabilities if the wildcard was introduced for calendar links alone because those can't have cookies attached to them? It's just confusing because when I fetch from other apps that have calendar feeds (like Compass Education) I don't get CORS errors which means (presumably) they have included the wildcard. Thanks for your help though. 

[seanbeirnes]

I can really only give an "it depends" answer here because it depends on how Instructure has things set up on their backend and if they even want calendar feeds to be fetched directly in a browser. I just would not expect them to change the way it is set up any time soon (if ever).

[a_1234]

I see. Is there any way to directly contact them and ask if they can? I've tried the "report a problem" but it's been like a month and I'm yet to receive a response. Thanks for all your help again. 

[seanbeirnes]

If your institution/organization pays for Canvas (i.e. it is hosted on the instructure.com domain), then your institution should have an assigned Customer Success Manager (CSM) from Instructure who could be contacted about this. Someone at your institution who is a Canvas administrator should be able to contact the CSM. Otherwise, the only thing I can recommend is contacting Canvas support (but that is unlikely to go anywhere).