CORS - localhost as allowed origin in production

There is no security concern with adding localhost to your CORS setup in production.

By adding something like:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000

The browser is now allowed to make calls from localhost:3000 to your service, bypassing Same Origin Policy. Any web developer can now create a webpage running from their local machine to make a call to your API, which is useful for your team. However, localhost is not a publicly routable address - You can't share a link to http://localhost:3000. Remember, CORS is only a security measure for web browsers making calls to your site. Anyone can still call your endpoint via server to server calls (or a script). However, you should avoid:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *

This will make your site available to every website. Instead, lock down your Access-Control-Allow-Origin to the sites that need it. Unfortunately, Access-Control-Allow-Origin only takes a single value, so you have to process HOST request server side and return valid ones (more info).

Authentication when calling a CORS endpoint

When you make a CORS request which requires authentication, you should be adding an Authorization header to the call, and not passing cookies - fetch does this by default. Thus any calls made to a CORs end point would be made via javascript adding a token to the header that it only has for that session. If you do store the token via a cookie or localstorage, note that its only accessible from that domain (more info). Your production endpoint and localhost will not have the same cookies and shared localstorage.

Disabling CORS in Chrome

Lastly, you can make CORS request from Chrome to any site by starting Chrome with --disable-web-security (more info).

Lastly, Google Chrome only allows service workers to run on secure websites and http://localhost. If you choose to create a local.example.com for development, you'll need to create an SSL cert and do all the configuration on your local machine to get that running. I recommend just using http://localhost:XXXX.

I'm assuming you have

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://localhost

The risk is that any services running on a user's machine could effectively bypass the Same Origin Policy for your site.

So if you have a REST URL such as

https://example.com/User/GetUserDetails

A malicious or compromised service running on the user's computer could make that request via the user's browser and then grab details about the user, because their authentication cookie will be passed with the request.

Now, you could argue that a malicious service running on the user's computer could just grab the authentication cookie from their browser directly and then make the request itself. However, if the service has some flaws of its own (say XSS), this could allow another site to compromise the user via your REST service (evil.example.org --XSS-> localhost -CORS-> example.com/User/GetUserDetails).

Another scenario that could put you at risk if the user is running a local reverse proxy to access something. This would enable the target site to compromise the user through yours, should that target site be malicious or be compromised. This is because the user would be accessing the target site with a domain of localhost.

If you really need to do this I suggest you have a special developer account for your REST service that when accessed adds the Access-Control-Allow-Origin: https://localhost header to your requests only. That way, you are not putting other users at risk because you know you are only running the front-end server only at https://localhost so you cannot be compromised by your open CORS setting.

Another way may be to use something like noonewouldusethis2859282.localhost for your local copy of the front-end. Then you can safely add the Access-Control-Allow-Origin: https://noonewouldusethis2859282.localhost header because nobody else would use this and would be safe from CORS attacks.