Maintain an Allowed Origin List for Tokens

Ryan Chenkie: [0:00] If you're going to set up a global interceptor for your axios requests, so that your access token can get your API, you've got to be aware that this means your access token is going to go to any server that you make a request to with axios, and this is not such a great thing.

[0:16] If we send our access tokens to servers that we don't control, well, who knows what those servers are going to do with them? Chances are they're probably not going to do anything malicious, but we really have no way of knowing. At the very least, they are probably at least keeping those access tokens in their logs, because they're probably logging traffic that's coming in.

[0:35] Either way, this is not something that we want. One way around this is to use an axios instance that is specific to our API. If you do want to use a global interceptor, you should at least check the origin for the request going out before you attach the access token. We can do this in just a few lines of code.

[0:54] In the config callback here, let's grab our origin. We can get that by saying give us a new URL. We'll pass in config.url. This is going to take the URL of the outgoing request, and run it through a new URL instance, which will give us an object to work with. From that, we are taking origin.

[1:14] Let's give ourselves a list of allowed origins. This will be an array with any origins that we know about, any servers that we control. In this case, it's just http://localhost:3001. Now, it's just a matter of making sure that the origin for the outgoing request is found within our allowed origins array.

[1:35] There are a few different ways to do this. We can simply maybe just say if the allowed origins includes the origin of the request going out, then let's send that token. This should give us what we want. If we click Get users, we still get our users. We can prove that this will not send our access token to servers that we don't control if we send a request to something like the GitHub API.

[2:01] To prove that out, why don't we make a new function here to fetch some GitHub users' data? Everything will be the same in here, except that instead of making that GET request to our own API, we are going to go to https://api.github.com/users.

[2:19] We won't worry too much about displaying this user data on the screen. Really, the exercise here is just a proof that our access token doesn't go to GitHub. Why don't we just copy over this button quickly? Instead of fetchData, it's going to be fetchGithubData. The button text can just say Get Github users.

[2:37] Let's run this. In the Network tab, we should see that for our getUsers, the one going to our own API, we have the authorization header going in as we expect. If we make a request to getGithubUsers, we get the result, we can preview it there, but in the request headers, we should not see our authorization header. Sure enough, it's not there.

[3:02] Again, if you're not going to use a dedicated axios instance for your own API, you really should at least check the origin for the outgoing request in your global interceptor.