Javascript access to API via access_token

Hi,

I'm trying to make a web app that should interface with canvas data via the API. I know that eventually I need to get it working with the OAuth system, but for development I wanted to get it working with an access token. My code looks like the below (essentially copied from another thread here), but it gives a failed to fetch error.

In another tab on the browser, I am logged into canvas.

Any help would be much appreciated. Thanks.

const apiToken = ;

const options = {

'method': 'GET',

'headers': {

'authorization': 'Bearer ' + apiToken,

'content-type': 'application/json',

'accept': 'application/json'

'timeout': 5000

};

let outputfromcanvas;

fetch('https://canvas.wisc.edu/api/v1/courses/123218, options)

.then(res=>{outputfromcanvas = res; console.log(res)})

.catch(err=>console.log("err: ", err))

Find more posts tagged with

Accepted answers

James

@andrews2

Make sure you are inside the tab that is has Canvas open when you are making the request. The browser sends extra headers to prevent cross-origin requests. For example, if you had a web-page open in one browser tab and JavaScript on that page could access information in another tab from a different origin, then a malicious program could steal your banking information or make requests as you that you didn't know about.

There is a protocol set up to allow communication from other sites, it's called Cross-Origin Resource Sharing (CORS). Canvas would have to add headers to say trust the other website that you're coming from and they're not going to do that because it is a security issue.

Putting API tokens into JavaScript and running it within a browser isn't secure either. The API requests with an authorization token are not meant to be made from within the browser. Inside the browser, it uses cookies and the Cross-Site Request Forgery (CSRF) token to authenticate instead of the API token.

One thing you could do for testing is to set up a simple proxy that took your request for Canvas and made it for you. For example, if you have control of the test.example.com server, you could set up a proxy on that server. In your application, you would call test.example.com/proxy (for example) instead of canvas.wisc.edu. It would take the request, add the Authorization header, send it off to Canvas that would now accept it since it wasn't in a browser, and then return the information to your application.

Although this is not the reason for the problem, sending content-type with a GET request is discouraged. My REST client now warns "Headers are not valid. The GET request should not contain content-* headers. It may cause the server to behave unexpectedly." They do not provide a reference for that, but the Content-Type page at the Mozilla Developer's Netowrk says "In requests, (such as POST or PUT), the client tells the server what type of data is actually sent." You're not sending any type of data beyond the query string with a GET.

All comments

James

@andrews2

unknown

Hello, I have some experience with creating my own servers and performing API requests, but I need more clarification because I am new to CORS and getting the cross-origin error.

The first thing I did not understand was why I could perform API queries successfully using CURL, but not in Javascript (for debug only; it will eventually be moved to the server side). I read that CURL does not care about the headers, but the browser does. The only valid solution I have seen is if Canvas updated the header to allow it,

If cross-origin is an issue, why is there not some security feature to prevent CURL from making the requests?

Also, I have seen tutorials of people creating their own servers and performing API requests to modify data on the canvas side. What am I missing?

https://www.youtube.com/watch?v=LBQp0ls7mcI

https://www.youtube.com/watch?v=c8L-psDDpYE

There is also the service called GoSignMeUp, which is a "certified partner" that can create accounts and enroll users, but it is done from their server. How? Did their website get whitelisted?

matthew_buckett

@0a87sdf8asdf7 Instructure could add CORS headers to their API to allow cross origin requests but as far I I'm aware they haven't allowed this to be configured on their hosted deployments.

We use a proxy that manages the OAuth 2 tokens and sets the appropriate CORS headers on responses back to clients, but without a piece of serverside code either handling the proxying or making specific requests (as in the Youtube videos) I don't think there is a way to create a request to the Canvas API from the browser.

If you are going to move the requests to a serverside component then I don't think you need to worry about CORS, unless your wanting to host the HTML that will cause the browser to make these requests from a different domain.

matthew_buckett

If you want to perform some action that the user doesn't have permission for then you will need to have a serverside component that has a manually generated token and use that to perform the actions (eg enrolling a user).

Locally we have a tool for managing courses that takes a mixed approach of using OAuth for 90% of operations, but then for creating a course (which our users don't have permission for) it uses a admin token that does have permission. But this approach does increase the complexity and for simple tools I'd not recommend it.

The advantages of OAuth 2 generated tokens are:

Better audit trail - the operations in Canvas are done as the actual user to you have a good audit trail of what's happening without having to rely on logs in the tool.
Good security checks - Canvas does all its security checks so you don't have to perform a second set of checks for operations.
Scoped Keys - By using a scoped key you can further restrict the the operations the tokens are valid for the reduces the risk that the tokens could be abused or accidentally mis-used.
Rate Limiting - User performing actions has their own rate limit, if all the users of your tool are using the same admin token the rate limit will be hit much sooner than if they each have their own token.

A halfway house can be using the Masquerading feature of the API (https://canvas.instructure.com/doc/api/file.masquerading.html) this allows you to not worry about the complexity but still have Canvas do permission checked (where needed).

In general the OAuth 2 flow is useful when:

You have a high level of usage and API limits will be a problem.
It's a third party supplier's tool and you don't want to give them access to everything in your Canvas installation (scoped developer keys are what helps here).

Unanswered Questions

Obtaining access token using developer key for server-to-server REST API access
I have a developer key in our Test instance: How would I use this in a local program to make a REST API call? Looking at https://developerdocs.instructure.com/services/canvas/oauth2/file.developer_keys: Developer keys are OAuth2 client ID and secret pairs stored in Canvas that allow third-party applications to request…
Finding the LTIv1.3 IDs for Members of a Course
I'm building a tool for my institution that imports grades from another LTI tool into Canvas so instructors can automate late assignment policies not otherwise supported by Canvas. I'm trying to use the LTIv1.3 ID which is readily available on the LTI-side as a link to the student record on Canvas, but I can't find the ID…
Canvas Media Question
How can one track Canvas Media use without having the reports available from Canvas Studio? Checking API endpoints and the Data 2 schema, there do not seem to be dedicated Canvas Media endpoints. Am I missing some? A method I've considered is using the body field of the wiki_pages table, as this contains the html code of…
Canvas Catalog API - Completed Certificates
Hello, I'm trying to utilize an API call to pull completed certificates and was hoping to download and store the certs as a backup. I can successfully run the API call but it will not allow me to view the certificate unless I access the URL while signed into an account where it's "my" cert. Is there a permissions setting…
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…