私はExpress.jsにブログ投稿を作成してデータベースに追加するAPIを持っています。 DevToolsのReactアプリからリクエストをすると、JWTが表示されます。私のサイトがライブになると、人々は自分のトークンを見て自分のサイトから不要な投稿を追加するようリクエストすることができるのではないかと心配しています。何が起きているのか、どうすればセキュリティ上のエラーを防ぐことができるのか教えてください。jwt：Chrome DevToolsにトークンが表示されるのはなぜですか？
それは開発者ツールでヘッダーペインで次のようになります。
を、私はそれはあなたが安全であるかどうかを不思議に思っているものだと仮定します。
通常のHTTPを使用している場合、ReactアプリケーションとAPIの間の接続は暗号化されていません。これにより、replay attackが可能になります。フロントエンドとAPIの間のISPや別のサーバーがトークンを読み取って、後で読み取りトークンでふりをすることができます。
最も重要な解決策は、暗号化されたHTTPであるHTTPSを使用することです。潜在的な攻撃者は、HTTPSを使用しているときにトークンを傍受して盗むことができません。ユーザー名やパスワードなどを扱うときは、常にHTTPSを使用する必要があります。
HTTPSは自由に使用でき、設定するのは難しくありません。詳細は、hereを参照してください。あなたが読んでおきたい興味深い議論hereもあります。
さて、HTTPSを追加するとAuthorizationヘッダーは表示されませんか？ –
@NathanielFredericksヘッダーはDev Toolsに表示されますが、パケットは暗号化され、誰にも見られません。 – MikaS
申し訳ありませんが、エンドポイントとトークンを取ってから依頼を依頼することはできませんでしたか？ –
あなたのAPIで新しいブログ投稿を作成するときに承認ヘッダーとして送信するため、Chrome開発ツールでJWTが表示され、このリクエストをReactアプリケーションから直接作成しているためです。
重要なJWTがフロントエンドで使用できない場合は、プロキシのように動作するサーバーを持つ必要があり、Reactアプリケーションから要求を受け取り、要求ヘッダーとしてJWTを使用して要求を転送する必要がありますあなたのAPIに
あなたはJWTの漏出を防ぎますが、依然としてあなたのプロキシに依頼して、あなたのAPIに転送することができます。
反応アプリケーションだけがプロキシへのリクエストを実行できるようにするには、受信したリクエスト（詳細はhere）のIPアドレスを検証するミドルウェアを作成し、要求を受け入れます。そうでない場合は、許可されていないエラーが返されます。
特定の人だけがブログ投稿を作成できるようにするには、反応アプリケーションに認証を入れる必要があります。あなたは、ヘッダー内のトークンで要求を送信すると
うわー、それは私を助けました。あなたは人生の節約者です。 –
プロキシでこれを意味しますか？ https://daveceddia.com/create-react-app-express-backend/ –
@NathanielFredericksはい、それを行う方法です。その記事の「プロキシの仕組み」の部分が表示されている場合は、反応アプリがhttp：// localhost：3000/api/usersを呼び出し、http：// your- server/api/users。 – nicolastrres
ここで、開発者ツールにトークンが表示されますか？ – MikaS
@MikaSネットワーク> [私のリクエスト]>ヘッダー>承認 –