422 Error when making POST Request to Favorite Courses API

Hello,

I am working some custom Javascript that needs to be able to add and remove favorite courses for users through the Canvas API. I can get the list of a user's favorites without any issues, but I am getting a 422 "unprocessable entity" response when I try to do a POST request to add a favorite course for a user.

First, I tried making the POST request without any authorization, since the GET request for favorite courses does not require it, however I got the 422 response. Then, I used Chrome's dev tools to look into the request that Canvas sends when a user clicks on the start icon in the "All Courses" menu to favorite a course. I found that the payload Canvas sends includes an "authenticity_token" which is called the "_csrf_token" in Canvas's cookies. This token is regenerated each time it is used, but I tried manually adding it to my code to see if that would solve the error. Here is the code I am currently using:

data = {}
fetch('<our canvas url>/api/v1/users/self/favorites/courses/<course number>', {
  method: 'POST',
  headers: {'Content-Length': 0, authenticity_token: '<csrf_token copied from Canvas's cookies>'},
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

With this code, I still unfortunately get the 422 response. The user I am testing this with is enrolled in the course that I am trying to favorite, and the course is not already favorited. I am thinking I must be doing something wrong with this request!

I would greatly appreciate assistance with this if anyone has ideas as to why this error is occurring!

Find more posts tagged with

API

Javascript

Accepted answers

Robert

@lbeveridge

I've never tried to pass the token in the form data, just the headers. I did some practice with this awhile back for XHR testing and applied it to your fetch. I was able to make this work. Since the token is refreshed, I use a function to strip the token from the cookie and decode it, the function making it reusable for subsequent requests. You can see this by making any AJAX request on the page and calling CSRFtoken().

const CSRFtoken = function() {
  return decodeURIComponent((document.cookie.match('(^|;) *_csrf_token=([^;]*)') || '')[2])
}

fetch('/api/v1/users/self/favorites/courses/1234567', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'accept': 'application/json',
      'X-CSRF-Token': CSRFtoken()
    },
    //body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

All comments

James

@lbeveridge

You don't send the CSRF token as an authenticity header. You send it as part of the data that becomes the body rather than as a header. Move authenticity_token from the header object to the data object.

Since you're sending JSON, you may need to include "content-type: application/json" in the headers. You generally do not need to include content-length. I tend to throw in an "accept: application/json" header as well.

I didn't check the rest of the code for any problems, just the thing that jumps out at me. I've used the CSRF token before for API calls, so I just searched my GitHub repository to see how I handled it. I was looking at a PUT instead of a POST, but that shouldn't affect where the authenticity_token goes.

Robert

@lbeveridge

const CSRFtoken = function() {
  return decodeURIComponent((document.cookie.match('(^|;) *_csrf_token=([^;]*)') || '')[2])
}

fetch('/api/v1/users/self/favorites/courses/1234567', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'accept': 'application/json',
      'X-CSRF-Token': CSRFtoken()
    },
    //body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

James

@lbeveridge

Not necessarily relevant to the issue, but are you trying to add this to the custom global JavaScript that runs inside Canvas or are you trying to do this from outside Canvas?

An example of the first kind would be to go through and make something a favorite every time people log into Canvas (a course that cannot be un-favorited). An example of the second kind would be if you want to go through and add a favorite to everyone and then be done with it and they can remove it if they want?

Both can be done with JavaScript. The first kind needs the CSRF token and runs within the browser, but may not get those people coming in through the mobile apps. The second kinds needs to be ran externally, say using a NodeJS script but needs to use the authorization header and won't have access to a CSRF token. If you're trying to take the CSRF token from within Canvas and then use it externally, you're going to have issues (401 error invalid access token).

The reason I ask is because if you want to do it outside of the browser, you can do it for all users using masquerading and an access token belonging to someone with the ability to masquerade. If I was a student and someone kept on favoriting a course for me each time I logged in and I kept on unfavoriting it, I wouldn't be happy as space on the dashboard is limited.

Okay, now to the issue. I'm including the whole investigative process so other people with the issue can come along later and have a resource. What I think the issue is at the bottom, but no one has ever accused me of being a TL;DR kind of person.

There are a couple of things that come to mind.

The first was is the person who is running the script (the person you're logged in as within Canvas or the person owning the token) actually enrolled in course 656? That is, can you go to the Courses page for that user and click the favorites to add or remove it? Not all courses are can be made favorites. However, I don't think this is it. Canvas returns a 200 OK when I try to add a favorite for a person who isn't enrolled in a course (maybe they will be at some time in the future).

The second is whether the course ID is correct. If I try this with a bogus ID that doesn't belong to us, I get a 404 Not Found error, not a 422 code.

So the next thing I do is to open up the developer tools in Chrome and look at the network traffic that Canvas sends to see what's missing. The only two things it's sending in the payload is the _method and the authenticity token. I notice you don't have _method in there.

So, I right click on the request and copy it as a fetch so I can replay it without the _method. Nope, that still works.

Then I look at the headers and something jumps out at me. They do include the CSRF token in the header, but they don't call it authenticity_token and then don't call it authorization. It's called x-csrf-token. So I take out that header and it still works.

That makes me wonder what you are including in the authenticity_token. It should just be the value of the CSRF.

If I remove the x-csrf-token header and garble the what I'm sending as an authenticity_token, I'm able to get the 422 error.

Garbling the authenticity_token so that it doesn't match the x-csrf-token gives a 500 code.

Changing the x-csrf-token while using the right authenticity_token works.

It seems that the x-csrf-token header is optional. If it is included, you do not need to include the authenticity_token in the data, but if you do include the authenticity_token in the data, then the x-csrf-token is overridden by the authenticity_token.

That seems that the easiest way to do it would be to include the x-csrf-token in the header and not mess with a body at all.

But all that then comes down to what you are using as the token. You didn't share that (good reason for not doing so), but then you have to wonder, after tracking everything else down, whether you're sending the right thing or not.

You should send just the value of the csrf-token and not the _crsf_token= portion. Depending on where you send it will determine whether you should decode it or not first.

If I look at my set-cookie header that is returned as part of the response or I use document.cookie to obtain the _csrf_token value, I get a uriEncoded value that contains things like %2F, %2B, and %3D.

Those cannot be passed in either the x-csrf-token or authenticity_token (if you are using JSON). You have to pass the decoded form.

If I let run my cookie _csrf_token through decodeURIComponent(), then I can send it as either x-csrf-token or authenticity_token. Note that decodeURI will not fix it, it needs to be decodeURIComponent.

If you are using the content-type of application/x-www-form-urlencoded; charset=UTF-8, then you must include the encoded form. If you try to send the decoded form as the authenticity_token, it will give a 422 error.

In short, use a header of x-csrf-token and make sure you pass the _csrf_token cookie value through decodeURIComponent() before doing so.

patfm

@lbeveridge

I am curious if you have succeeded with your javascript for adding favorites to a user. We are trying to find all published courses for the current term and favorite the published courses for instructors that are not yet favorited. We have an automated process for moving courses into Canvas for the next term and when that happens any published courses that have not yet been favorited in the current term get removed from the dashboard.

Thanks.

Unanswered Questions

Concluded Course and Canvas Data Services
Canvas Data Services sent out an alert that a course was concluded (because the course was concluded) and the status of each user in the UI is set to complete, however, the enrollments API endpoint shows the status of each user in the course as active. Is this a common issue? Have I misinterpreted how the individual…
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…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…