質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

695閲覧

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

kkrn

総合スコア15

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/06/02 08:02

実現したいこと

○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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/06/02 09:29

フロントエンドって何のことですか? (普通はブラウザのことを指すような…) もしかして、本番環境で webpack-dev-server を動かしてますか?
kkrn

2023/06/02 10:17

コメントありがとうございます。 分かりずらい記載、大変失礼致しました。 フロントエンド→ブラウザで閲覧出来るウェブサイトという認識でございます。 本番環境はまだありませんが 検証環境ではビルド後のファイルをWebサーバーに配置しております。 よろしくお願いいたします。
hoshi-takanori

2023/06/02 10:34

謝ってほしいのではなく、たぶん何か誤解があると思うんですよね…。 React を含め、JS のコードは基本的にはブラウザ上で動きますので、API を叩くならブラウザと API サーバーが直接やりとりすることになるのが一般的かと。
quickquip

2023/06/02 11:08 編集

勝手に想像するとこういうことなのではないかと思いました XServer (質問者さんはここをフロントエンドと言っている) ↑② ││(社内のIPアドレスが入ったコンテンツ) ││ --------------- 社のFW ││ ①↓ ブラウザ/クライアント (世間的にはフロントエンドと言われるとここだと思う)   ③↑   ││   ↓④ バックエンド
guest

回答1

0

ベストアンサー

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

Xserverにバックエンドへのアクセスを中継するプロキシを置いて、ブラウザからはXserverをアクセスさせるように書き換える、というような手段が考えられます。

投稿2023/06/02 10:34

maisumakun

総合スコア145366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問