Блог

Я не уверен, что этот вопрос уже задавался здесь. Но до сих пор я не видел такого вопроса.

У меня есть RestAPI, написанный в Express.js. Что RestAPI подключен к React.js веб-приложение. RestAPI защищен токенами аутентификации JWT.

В веб-приложении мы показываем тысячи товаров с ежедневными ценами. Кто-то заходит в веб-приложение и просматривает цены на несколько продуктов, это нормально. Но что не в порядке, так это то, что кто-то ежедневно автоматизирует получение цен на все товары, а также хранит и анализирует наши ценовые стратегии.

В принципе, я хочу, чтобы кто-то пытался получить доступ к API с помощью такого инструмента, как почтальон или что-то еще, что должно быть заблокировано. Только веб-браузер должен иметь доступ к API. В некоторой степени этого можно достичь, заблокировав пользовательские агенты. Мы можем блокировать пользовательские агенты POSTMON, но как мы блокируем все инструменты, такие как POSTMON?

Даже если мы заблокируем все подобные инструменты, все равно на вкладке «Сетевые инструменты разработчика» браузера они смогут увидеть ответ.

Есть ли способ зашифровать ответ? Таким образом, вкладка «Сеть» отобразит то, что пользователи смогут понять. Но в то же время этот ответ может быть расшифрован с помощью React.

Надеюсь, мой вопрос всем понятен!

Любая помощь!

Заранее спасибо. =)

Вам необходимо использовать политику CORS с HTTPS, если политика установлена правильно в политике CORS, запрос будет обработан только в том случае, если он исходит из приложения пользовательского интерфейса, в противном случае приложение отклонит запросы. надеюсь, этот фрагмент кода поможет вам

    const whitelist = ['http://www.example.com', 'https://www.example.com'];
    const corsOptions = {
      origin(origin, callback) {
        if (whitelist.indexOf(origin) !== -1 || !origin) {
          // !origin // allow requests with no origin (like mobile apps or curl requests)
          callback(null, true);
        } else {
          console.error(`Not allowed by CORS, Origin ${origin}`);
          callback(new Error('Not allowed by CORS'));
        }
      },
      exposedHeaders: 'Authorization',
    };
router.use(cors(corsOptions));
router.use('/api/auth', auth);
 

В принципе, я хочу, чтобы кто-то пытался получить доступ к API с помощью такого инструмента, как почтальон или что-то еще, что должно быть заблокировано. Только веб-браузер должен иметь доступ к API.

Ничего не поделаешь.

В некоторой степени этого можно достичь, заблокировав пользовательские агенты. Мы можем блокировать пользовательские агенты POSTMON, но как мы блокируем все инструменты, такие как POSTMON?

Люди могут очень легко лгать об агенте пользователя.

Даже если мы заблокируем все подобные инструменты, все равно на вкладке «Сетевые инструменты разработчика» браузера они смогут увидеть ответ.

ДА. Браузеры предназначены для работы в интересах своих пользователей, а не в интересах владельцев веб-сайтов, к которым они обращаются.

Есть ли способ зашифровать ответ? Таким образом, вкладка «Сеть» отобразит то, что пользователи смогут понять. Но в то же время этот ответ может быть расшифрован с помощью React.

Не совсем. Вам придется предоставить ключ расшифровки браузеру, и если вы передадите его браузеру, пользователь сможет получить к нему доступ.

Но что не в порядке, так это то, что кто-то ежедневно автоматизирует получение цен на все товары, а также хранит и анализирует наши ценовые стратегии.

Вместо этого рассмотрите возможность ограничения скорости.

По сути, однако, то, что вы пытаетесь сделать, — это обнародовать информацию, не сообщая ее некоторым людям.

Это противоречие и, следовательно, невозможно.

что вы можете сделать с express, так это использовать CORS и разрешить доступ к API только вашему веб-сайту.

проверить https://www.npmjs.com/package/cors

у тебя будет что-то вроде

 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
}
 
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})
 

но для использования cors для этой цели, вероятно, потребуется использовать ограничение, основанное на агенте пользователя, чтобы убедиться, что все запросы поступают из браузера и с заголовком cors.

Но все равно это не очень эффективный механизм.

Другая идея состоит в том, чтобы реализовать своего рода «КЛЮЧ API», сгенерированный вашим клиентом и проверенный на серверной части. каждый запрос должен иметь «КЛЮЧ API» в качестве параметра