Как в приложении Vue создается секретный ключ?

Добрый день. Я исследую запросы к переводчику по ссылке <a href="https://ru.libretranslate.com/" rel="nofollow">https://ru.libretranslate.com/</a>. Когда я ввожу текст для перевода, отправляется POST-запрос на <a href="https://ru.libretranslate.com/translate" rel="nofollow">https://ru.libretranslate.com/translate</a>, в котором передаются следующие параметры: <br/> <pre><code>q: number
source: auto
target: ru
format: text
alternatives: 3
api_key: 
secret: XFCYFF7</code></pre> <br/> Я получаю JSON-ответ: <br/> <pre><code>{
    "alternatives": [
        "число номер",
        "номер номера"
    ],
    "detectedLanguage": {
        "confidence": 18.0,
        "language": "en"
    },
    "translatedText": "номер"
}</code></pre> <br/> Меня интересует, как генерируется параметр secret. Я нашел JavaScript-код приложения VUE по адресу <a href="https://ru.libretranslate.com/js/app.js?v=1.6.2" rel="nofollow">https://ru.libretranslate.com/js/app.js?v=1.6.2</a>, в котором содержится строка: <br/> <code class="javascript">apiSecret: "TEVPOTVWTQ=="</code>. Эта зашифрованная в base64 строка остаётся статичной, даже при открытии новых сессий в разных браузерах. Также я обнаружил код JS, который формирует POST-запрос: <br/> <pre><code class="javascript">var request = new XMLHttpRequest();
                    self.transRequest = request;

                    var data = new FormData();
                    data.append("q", self.inputText);
                    data.append("source", self.sourceLang);
                    data.append("target", self.targetLang);
                    data.append("format", self.isHtml ? "html" : "text");
                    data.append("alternatives", 3);
                    data.append("api_key", localStorage.getItem("api_key") || "");
  • 8 октября 2024 г. 9:45
Ответы на вопрос 2
В вашем вопросе вы упоминаете приложение на Vue и API переводчика, а также интересуетесь, как генерируется и используется `secret`. Давайте разберемся с этим.

1. **apiSecret**: Строка `apiSecret: "TEVPOTVWTQ=="` в JavaScript коде, которую вы нашли, закодирована в base64. Это может быть просто ключ, используемый для идентификации или авторизации вашего обращения к API. Как правило, такие ключи могут сохраняться в коде, но это не всегда безопасный подход, так как они могут быть легко получены злоумышленниками, если код доступен публично.

2. **Генерация секретного ключа**: В большинстве случаев секретные ключи, используемые в приложениях, могут быть сгенерированы по различным критериям:
   - Случайные строки фиксированной длины, часто используя функции генерации UUID.
   - Хэширование с использованием известных алгоритмов (например, HMAC), где секрет используется для создания уникальных подписей.
   - Уникальные идентификаторы, сгенерированные на сервере и передаваемые клиенту.

3. **Использование**: Когда клиент, например, ваше приложение на Vue, совершает запрос к API, он включает в него как `api_key`, так и `secret`, чтобы идентифицировать себя на сервере и подтвердить, что запросы поступают от доверенного источника. Оба этих параметра могут быть использованы для проверки подлинности и авторизации.

4. **Безопасность**: Как вы заметили, информация о секретных ключах, хранящаяся в клиентском коде (JavaScript), не является безопасной. В идеале такие ключи должны храниться на серверной стороне и никогда не быть доступны в клиенте. Вы можете настроить прокси-сервер, который будет обрабатывать запросы к API и использовать секретные ключи на стороне сервера, чтобы предотвратить их утечку.

5. **base64**: Строка, которая закодирована в base64, может быть легко декодирована. Если вы хотите узнать оригинальное значение, вы можете использовать любой онлайн-инструмент или встроенные методы JavaScript для декодирования:

```javascript
const base64Str = "TEVPOTVWTQ==";
const decodedStr = atob(base64Str); // получаем оригинальную строку
console.log(decodedStr);
```

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

В нём self['apiSecret'] присваивается определённое значение ( self в данном случае — экземпляр Vue). При этом какой-то динамики я там не вижу, но, вероятно, эта часть кода генерируется на сервере. Вытащить ключ можно, выполнив в консоли вторую часть кода из исходника (после знака "="), либо просто взяв из экземпляра Vue: document.getElementById('app').__vue__.apiSecret . После нужно эту строку декодировать через atob() :

atob(document.getElementById('app').__vue__.apiSecret);
Похожие вопросы