目次
はじめに
今SESとしてSnowflake上でSQLを使用したデータ抽出〜分析ツールへの連携をしているのですが、つい最近まで仕事後や土日を活用して自己学習を兼ねて簡易的な「タスク管理ツールアプリ」というWebアプリを開発していました。
開発した経緯としては、「ITエンジニアに必要なITの基礎が開発することで身に付く」のと「生成AI時代にやっぱり基礎を疎かにしてはいけない」「これからはもっと基礎が重要になっていく」と思ったので学習を兼ねてWebアプリの開発を始めました。
Webアプリが完成したので、一度ここまでで学んだ事を記事として簡単にまとめて発信（アウトプット）しようと思い、書きました。
今回のトピック
- ブラウザに文字が表示されるまでの仕組み
- サーバの役割
- サーバへ送る代表的なリクエストメソッド
- セキュリティ
- 終わりに
ブラウザに文字が表示されるまでの仕組み
まずブラウザにどうやって文字が表示されるのか、仕組みを説明したいと思います。
下の図を見てください。
この図はユーザとブラウザとサーバとの関係を表した図になります。
1.まずユーザがブラウザに向かって何か文字なり数字なり情報を入力します。
ここではまだ何も起きません。
そのあとユーザがEnterを押すと情報が確定し入力が完了します。
2.するとユーザが入力した情報を受け取ったブラウザは、サーバに入力情報を渡し
ます。これを「リクエスト」といいます。
3.ブラウザから情報を受け取ったサーバはその情報を元にサーバ上にあるプログラムを
起動し、情報を処理していきます。（例えばデータベースに情報を登録するなど...。）
処理した結果をブラウザに返します。これを「レスポンス」といいます。
4.サーバから結果を受け取ったブラウザはユーザが理解できる形に変換し結果を表示
させます。
以上が大まかな「文字が表示される」までの流れになります。
サーバの役割
サーバの役割としては、ブラウザから受け取ったリクエストを元にホームページのような静的コンテンツデータ（ロゴ画像や背景など）をブラウザに返したり、動的処理が必要なもの（アイテムの登録・編集・削除など）があればサーバサイドスクリプト（所謂プログラム言語）と連携し結果をブラウザに返します。
こういった役割のため、サーバが動作しなくなるとブラウザに結果を表示できなくなり、ユーザにコンテンツを提供できなくなります。
そのため、サーバの台数を複数にして、1台あたりの負荷をなるべく低くして1台が故障しても別の1台だけでコンテンツを提供できるようにする「冗長化」という構成をとることも一つの手です。
サーバへ送る代表的なリクエストメソッド
実際にブラウザがサーバに対してデータを送信する時に「リクエスト」としてデータを送信するのですが、この「リクエスト」には複数種類あり、それぞれ場面ごとに使い分けたりしています。
今回はよく使用する「GETメソッド」と「POSTメソッド」について説明します。
-
GETメソッド
Webサーバからデータやページを「取得する」メソッドです。
URLの末尾にパラメータ(?id=1など)を追加して送信することでデータを取得するので、送信したデータがブラウザの閲覧履歴に残ります。
利用シーンとしては、静的コンテンツ（画像や背景）や動的コンテンツ（Webページの最新情報など）に利用されます。
Webサイト閲覧時において使用頻度が高いメソッドです。 -
POSTメソッド
ブラウザに入力したパスワードやメールアドレスなどといったデータを「転送する」メソッドです。
サーバに送信するときにメッセージボディ内(URLからは見えない領域)にデータが組み込まれるため、閲覧履歴には残りません。
そのため、ショッピングサイトや会員制サイトにおいてログインする場合は、機密性を考慮してPOSTメソッドが利用されます。
ただここで注意して欲しいのが、使用している通信プロトコルによってはPOSTを使用していても機密性が担保されません。
例えば「HTTP+POST」の場合だと、見た目上はメッセージボディに情報が格納されるので機密性があるように見えますが、通信プロトコルが"HTTP"なので暗号化されず平文のままやり取りをすることになるので機密性が保たれません。
逆に「HTTPS+POST」の場合だと、SSL/TLSによって暗号化されるので、機密性が保たれます。
セキュリティ
Webシステムを運用する上で避けては通れない分野である「セキュリティ」について説明しますが、これも複数種類あるので、今回は代表的な「クロスサイトスクリプティング」「クロスサイトリクエストフォージェリ」「SQLインジェクション」について説明します。
-
クロスサイトスクリプティング(Cross Site Scripting：XSS)
掲示板サイトやSNSなどのようなユーザの入力内容を表示するタイプのWebサイトの脆弱性を突く攻撃です。
攻撃者が用意した悪意あるリンクをユーザがアクセスしてしまうと、脆弱性のあるサイトを介してユーザのブラウザ上で「悪意のあるプログラム」が実行され情報が盗まれてしまいます。 -
クロスサイトリクエストフォージェリ(Cross Site Request Forgeries：CSRF)
XSSと同じく攻撃者が用意した「ログインが必要なサイトに対して操作を行う」リンクにユーザがアクセスすると事で被害を受ける情報が盗まれる攻撃です。
（ユーザになりすましてログインするなど...。） -
SQLインジェクション
ログイン画面や検索画面では、サーバに対してユーザから送信された情報をデータベースサーバに連携して処理を行います。その時に送信する情報の中にデータベースが解釈できるような内容を混ぜ込むことでデータベースに意図しない動作を行わせる攻撃です。
終わりに
今回Webアプリ開発を通じて、今まで見えなかったWebの仕組み（どういう仕組みで表示されるのかなど）が見えるようになり、普段何気なく利用しているWebサイトがこんなに多くの技術に支えられているんだと再認識し、とても感動しました。
最初はWebアプリの開発はそこまで気乗りしなかったのですが、やっていくうちに段々と仕組みが分かってきて一から何かを作り上げていくのは楽しいなと感じました。
（食わず嫌いは駄目ですね...。）
それと同時にWebを支えるためにセキュリティが物凄く重要になっているということも実感しました。
普段から安心してサービスを利用できているのもこのセキュリティがしっかりしているからだと。
今はまだやっとスタートラインに立てただけなので、これからもっと知識や経験を深めてスキルアップして目標に向けて進んでいきたいと思います。