How to protect client application (react) and API

Question

I have a client side React application and a Rails API from which the React application retrieves data.

As expected, I want the React application to be able to receive data from the API, and the rest of the world not be able to receive data from it.

Despite numerous searches, I have yet to find a better way to ensure communication between the two applications.

I read about JWT tokens and cookie-based authentication, but most articles seem to be focused on user authentication (i.e., login / logout), and not on the connection between the two applications.

Two applications will use the same domain, so is it enough to rely on Cross Origin to provide connectivity?

Any advice would really be greatly appreciated.

Answer 1

If I get my question back, you want your client (React App) to be the only client that can access your server.

As a solution to this, you will need a combination of CORS and JWT authorization. Thus, I suggest having strict CORS to allow only yours to respond to the application domain in order to call the server. For this, I usually use the CORS npm module and configure the origin on my server, or you can do it yourself.

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}

The above code allows you to accept requests from example.com on the server or view this code for a more dynamic whitelist and blacklist.

JWT, json, API , .

, , ​​ , JWT, JWT API, , API. "Interceptor", (Passport oAuth) API .

---

2 , , JWT , . , JWT .

, - , JWT API (post/get/put), , API, API-, , API. node JWT .

, , JWT , . , , , . JWT. JWT, , , , , TTL , , , , - .

Answer 2

CORS , . JWT , , , api.

, CORS , .

, , :

https://example.com/api/blah api, . , , , , . api , , , url. api .