如何保护客户端应用程序(反应)和API通信

Question

我有一个客户端React应用程序和一个Rails API,React应用程序从中获取数据.

正如您所料,我只希望我的React应用程序能够从API获取数据,而世界其他地方应该无法从中接收数据.

尽管进行了大量搜索,我还没有找到确保两个应用程序之间通信的最佳方法.

我已经阅读了有关JWT令牌和基于cookie的会话身份验证,但大多数文章似乎都专注于用户身份验证(即登录/注销)而不是仅仅是两个应用程序之间的通信.

这两个应用程序将共享同一个域,因此是否足以依靠Cross Origin来保护通信？

任何建议真的很值得赞赏.

Answer 1

如果我的问题正确，那么您希望您的客户端（React App）成为唯一可以访问您服务器的客户端。

作为解决方案，您将必须结合使用CORS和JWT授权，因此，我建议使用严格的CORS，以仅使您的react应用程序的域能够调用服务器。为此，我通常使用CORS npm模块并在服务器上配置源，也可以自己完成。

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 
}

上面的代码仅允许example.com的请求被服务器接受，或查看此代码以获取更多动态白名单和黑名单方法。

现在回到JWT，它只是一个json加密和解密令牌，可以在API请求之间共享以进行身份​​验证并授权用户。

例如，您可以在JWT中存储用户的电子邮件，角色和昵称之类的信息，并在每个API请求中发送此加密的JWT，服务器会授权此请求，如果为true，则会转发到所请求的API。授权和转发的过程通常使用“拦截器”模式实现，其中中间件（Passport oAuth）在每个API调用之前执行检查和认证。

完成以上两项操作，将确保只有具有有效JWT令牌和允许与服务器通信的域地址的客户端。该客户端将是您的react应用，因为它是唯一具有正确JWT和原始地址的客户端。

因此，现在您的react应用程序应确保在API调用（发布/获取/放置）中传递了适当的JWT令牌（很可能是在API请求的标头中），您可以拥有一个API辅助服务来为您和无论您进行API调用的位置如何，都将其导入到组件中。您的节点服务器将实现通行证中间件模式来授权此JWT并过滤未授权的请求。

如果您的应用没有登录，则JWT也可以是客户端ID，它可以将您的客户端识别为合法客户端。就像用户登录一样，您可以让应用程序使用诸如秘密客户端ID之类的数据来响应服务器调用服务器。这将返回一个JWT令牌。或者，您可以预先生成JWT令牌，并在首次加载时在应用商店中对其进行反应，并通过设置TTL和其他配置，您可以检查对服务器进行呼叫的客户端是旧的还是新的或其他假客户。

高温超导