認証トークンをReactフロントエンドに安全に保存する
私は現在、単一ページの反応アプリに取り組んでいます。このアプリはログインを必要とせず、一般に公開されます。アクセス権がなく、維持していない別のAPIのWebhookにPOSTリクエストを送信しています。このAPIでは、POSTを介して認証トークンを送信する必要がありました。疑問に思います。このトークンを安全に保存して、世界中に出てこないようにする方法。そのまま送信する必要があるため、バックエンドが提供するCookieに保存することはできません。JWTに保存することはできません。秘密なしでそれをデコードします。
トークンを世界に公開せずに保存する方法さえありますか？
問題が明確であることを願っていますが、私に知らせない場合は、より適切に説明します。
お時間をいただき、ありがとうございました！
私は通常、ローカルExpressサーバーを実行し、それを介して要求をプロキシします。
ExpressアプリでPOST to from your Reactフロントエンド、このExpressルートハンドラーが呼び出しを行うルートを設定します。ヘッダーに配置するトークンを持つサーバー側からの外部API。その後、外部APIまたはトークンについて何も知らなくても、応答がReactフロントエンドに返されます。
create-react-appを使用してReactプロジェクトをインスタンス化する場合、トークンを格納するために環境変数を使用することを検討しましたか？100％安全ではありません。チェックしてください ここ 短所ですが、個別のプロキシリクエストなしで簡単に修正できます。ディレクトリのルートに.envファイルを作成して（gitを使用している場合は必ず.gitignoreに追加してください）、定義してください。変数はそこにあります。変数はREACT_APP_SECRET=1234のようにREACT_APPで始まる必要があり、アプリ内の必要な場所でprocess.env.REACT_APP_SECRETを使用して参照できます。
React here。 で環境についてもっと読む
トークンをフロントエンドに保存することはできません。トークンを保存するには、Cookie /セッションを使用する必要があります。トークンを保存する場合は、暗号化して保存する必要があります。
JWTトークンメカニズムを理解するには、ここをチェックしてください
webアプリにログインがない場合。ユーザーの詳細がないとトークンを生成できません。
トークンは、ベストプラクティスのリクエストのヘッダーで渡す必要があります。