Reactからのhttp通信は,クライアント機(ユーザー)のIPを使用するのでしょうか。

実現したいこと

○Webアプリケーション
フロントエンドとバックエンド間の通信で
バックエンドの通信をクライアントから受け付けたくない

Firewallの設定で,バックエンドサーバーの受け先をフロントエンドのIP(ドメイン)のみにしたい。

前提

○フロントエンド
React + typescript
使用しているhttp通信用ライブラリ:Axios
入力された内容をJsonにしてhttp通信でバックエンドに送る処理をしています。

○バックエンド
fastApi + uvicorn + nginx
POSTされた情報をDBに書き込む処理をしています。

発生している問題・エラーメッセージ

閲覧いただきありがとうございます。

現在開発しているウェブアプリケーションでは
セキュリティを重視したく,できるだけネットワーク周りに制限をかけたいと考えています。

私の想定だと,フロントエンドに入力された内容をバックエンドに送信するとき。
フロントエンド側のサーバーから(IPから)バックエンド側のサーバーに,入力された内容を飛ばす想定でしたが
バックエンド側の通信を見ると,クライアント機(フロントエンドにアクセスしている端末)から
バックエンドに通信をしていました。

ここで私がお伺いしたいのは
Reactを使う以上,この仕様は避けられないのでしょうか。

また,何か良い対策や解決方法があればご教示いただけますと幸いです。

該当のソースコード

※関係なさそうなところは削除しております
また,一部値を書き換えております。

フロントエンド

ts

1 const sendInfo = async () => {2 await axios 3 .post(4 API_URI + "URL",5 JSON.stringify({6 id: location.state.id,7 }),8 {9 headers: {10 "Content-Type": "application/json",11 },12 }13 )14 .then((res) => {15 localStorage.setItem('display', 'ok')16 navigate("/succsess")17 })18 .catch((error) => {19 console.log(error);20 });21 };

バックエンド

python

1import sys 2import smtplib 3from email.mime.text import MIMEText 4from fastapi import FastAPI 5from starlette.middleware.cors import CORSMiddleware 6from pydantic import BaseModel 7from dotenv import load_dotenv 8 9load_dotenv()10 11class inPut(BaseModel):12 id: number 13 14app = FastAPI()15 16app.add_middleware(17 CORSMiddleware,18 allow_origins=["*"],19 allow_credentials=True,20 allow_methods=["*"],21 allow_headers=["*"],22 expose_headers=["Content-Disposition"]23)24 25@app.post("/URL")26async def kansu(input: Input):27※処理 28 29uvicorn.run("index:app", host="0.0.0.0", port=18008, ssl_keyfile="./cert/server-privatekey.pem", ssl_certfile="./cert/server-crt.pem")

試したこと

バックエンドのNginxに
allow フロントエンドIP
deny all
としたところ,今回の問題が発生しました。

補足情報(FW/ツールのバージョンなど)

フロントエンド
Xserver

バックエンド
社内仮想サーバー(Almalinux9)

コメントを投稿

0 コメント