ReactアプリケーションにAPIクレデンシャルを秘密にする

Question

私はいくつかのAPIサービスに接続するReactJsフロントエンドアプリケーションを持っています。これらのAPIサービスのいくつかは、初回ログイン時にappIdとappSecretを渡す必要があります。

私は現在、それらを小型化してバンドルされたjsファイルに持っていますが、私はまだ精通した侵入者に自分のアプリの資格情報を公開していると感じています。

どうすれば保護するのですか？

Answer 1

私はコメントを読んで、あなたがまだ混乱しているのを見ましたが、より詳細な説明はコメントに許可されている以上のスペースを取っていました。

あなたのサーバーをすべての要求と応答のプロキシとして使用することが考えられます。

• ケース1：あなたはフロントエンドからAPIにリクエストを行う必要があります -彼らは上に保存されていないため、フロントエンドは、（API資格なしでサーバーにを要求を発行します。フロントエンドアプリ）。必要に応じてサーバーが要求を認証します（ユーザーがサーバーにログインしているかどうかを確認する場合と同じです）。ログインしたユーザーが複数のユーザー役割を持っている場合のみ、APIサービスを使用する権限を持っていることを確認してからサーバをサーバに保存してapiリクエストを行います。その後、サーバーは、リクエストに対する応答を待っているフロントエンドクライアントに応答します。フロントエンドクライアントは、API要求の直接の結果、またはサーバーで前処理/書式設定を行ったバージョンのいずれかで応答します。このようにして、あなたのAPI資格情報をあなたのサーバーに秘密に保存することができます。また、（フロントエンドのクライアントアプリケーションの経験を通して）API資格情報を使用するためにアクセス権を与えたい人だけが使用できます。
• ケース2：あなたのAPIを認証済みのユーザーに公開する - これを行う一般的な方法は、アクセスを提供したいユーザーに何らかの種類のキーを発行することです。彼らがそれを失った場合、彼らは運が悪いか、またはあなた/あなたの会社/あなたのためにこれを管理する人に連絡する何らかの方法を提供しなければなりません。彼らはあなたのAPIにアクセスする必要があります。ウェブサイトでパスワードを忘れてしまった場合、パスワードをリセットする前に自分のことを証明しなければならない状況によく似ています。通常は、自分のアカウントに関連付けられている電子メールアカウントに電子メールで送信するリンクをクリックしますパスワードを紛失したと言っています。いずれにしても、彼らがパスキーを持っていると仮定すると、それはあなたのAPIにすべてのリクエストとともに送られなければならず、あなたが処理するすべてのリクエストに対して正しいキーであることを確認する必要があります。

これらの種類のやりとりを処理する唯一の方法ではありませんが、より一般的な方法です。ケース1と2は異なります。ケース1では、APIからデータを取得する必要があるクライアント（フロントエンド）が存在するからです。 APIの資格情報は、サーバーによってのみ格納され、使用されることで保護されます。この状況では、アプリを使用する全員、アプリで認証されたすべてのユーザー（ログインシステムを実装する必要があります）、特定の権限レベルを持つユーザーのみにアクセスを制限することができます役割を実装する）。ケース2の場合、クライアントアプリケーションはなく、誰かがあなたのAPIに直接アクセスしています。それでも認証する必要があるので、秘密鍵を一度だけ発行し、要求を行うたびにその鍵を渡します。