Web技術の基本についてまとめました

1章　Web技術について

●ハイパーテキスト

Webページの中に別のWebページへの参照を埋め込むことができる、Webを構成する文書。ハイパーテキストを作成する言語にHTML(HyperText Markup Language)がある。

●APIとは

ソフトウェア同士のやりとりを橋渡しする機能

●静的ページと動的ページの違いは？

静的ページは同じコンテンツが送られる 動的ページとは要求（URL）によってコンテンツが変化するようなもの WebサーバはHTMLだけでなく画像などの静的ファイルを返すことができる

❓ Rubyはサーバーサイド・スクリプトか？それともクライアントサイド・スクリプトか？

Rubyはサーバーサイド・スクリプト

●RESTfulとは

REST の原則

  • 統一インターフェース
  • アドレス可読性(一意なURLの構文である)
  • 接続性(リンクを含めることができる)
  • ステートレス性(やりとりは1回ごとに完結。前のやりとりに影響を受けない)

●ステートレス

状態を保持しないこと

●ブラウザ

  • webページを閲覧、操作するためのソフトウェアで、Chrome, Safari, Edgeが代表的なブラウザ
  • HTML文書を解釈しWebページを表示する
  • クライアント である

2章

●クライアントとサーバー

クライアント   サーバー
リクエストをする側    
(サービスを利用する側) 関係性 レスポンスを返す側
(サービスを提供する側)    
ブラウザ 具体例1 Webサーバー
サーバーから送られてきたHTMLを解釈して表示したり、JavaScriptを実行する 機能 HTTPリクエストを受け取り処理をする
画像などの静的ファイルを返す    
Webサーバー 具体例2 DBサーバー

①　WEBブラウザのアドレス欄にURL入力、もしくはリンクをクリック

② 　URLやリンク情報をもとづいてWEBサーバーに対してデータを要求

③　WEBブラウザより要求を受け取ったWEBサーバーは要求内容を解析

④　解析した結果より、要求されたデータをWEBブラウザへと応答

⑤　WEBブラウザはWEBサーバーより受け取ったデータを解析し、WEBページとして表示

❓ ★リンクをクリックしてからページがブラウザに表示されるまでの流れ

👉 重要!!

  • DNSサーバへURLのドメインに対応しているIPアドレスの問い合わせを行う
  • HTTPのレスポンスボディに設定されているテキスト(HTMLフォーマットであることが多い)をブラウザは解釈し表示する
  • HTTPのリクエスト行, ヘッダーには宛先URLなどが含まれる 

●サーバ

  • Web三層構造とはWebサーバー、アプリケーションサーバー、データベースサーバーで構成されるWebアプリケーションの構造のことを指す。
  • コンピュータはクライアントとサーバのどちらにもなり得る
  • クライアントからの要求に対して適切な応答をするのがサーバの役割である
  • HTTPリクエストを受け取り処理をするのがWebサーバの役割である

●HTTP

  • ハイパーテキストのやりとりの手順
  • webサーバーとwebクライアントで、HTMLファイルなどのデータをやりとりするための通信プロトコル。(Webにおける通信の約束事)
  • HTTPでは通信内容は保護されていない。
  • 画像のデータなどの受け渡しも行われる
  • ブラウザからHTTPのリクエスト・レスポンスの内容を覗くことができる
  • ステートレス　状態を保持しない
  • Webにおける通信の約束事のことである

●プロトコル

ネットワークに接続された機器同士が通信をするときの決められたルールや手順のこと

●TCP/IP

プロトコルの集まり

●IPアドレス

IPアドレスはサーバの住所

宛先IPアドレスと送信元IPアドレスがある

●ポート番号

 

FTP 20(データ転送) FTPによるデータ送信
  21(制御) 上記FTPの制御
SSH 22 サーバーの遠隔操作(暗号化)
Telnet 23 サーバーの遠隔操作
SMTP 25 メール送信
DNS 53 DNS索引
HTTP 80 ホームページ閲覧
POP3 110 メール受信
NNTP 119 ニュース用
NTP 123 時間の取得・調整用
IMAP 143 メール通信
HTTPS 443 ホームページ暗号化閲覧
Submission 587 メール送信

★DNS(Domain Name System)

ドメインを管理するシステムのことで、IPアドレスとドメイン名を変換することが役割。

サーバーにリクエストを行う場合は、DNSサーバーに問い合わせを行い、ドメインからIPアドレスを取得して、対象のサーバーに問い合わせを行っている。

**hostコマンドでドメインに対するIPアドレスを確認できる**

hostsファイルで強制的にドメインとIPアドレスの対応づけを書き換えることができる

●ドメイン(Domain)

IPアドレスを人間にとってわかりやすく変換したもので、世界で一意である必要がある。

3章　HTTP基礎

★HTTPメソッド

GET 取得
POST 作成
PUT/PATCH 変更
DELETE 削除

GETはWEBブラウザの閲覧履歴に残る。

aタグのリンクにおけるメソッドは基本GETである

formのmethod属性に設定される

action属性はpathを設定している

❓ • HTTPリクエストは上からどのような要素で構成されているか？

リクエスト行、メッセージヘッダー、メッセージボディ

❓ • HTTPレスポンスは上からどのような要素で構成されているか？

ステータス行、メッセージヘッダー、メッセージボディ

❓ • GETメソッドとPOSTメソッドの違い

GETリクエストの内容はURLに含まれ、クエリパラメータと呼ばれます。

GETリクエストの内容はURLに含まれ、HTTPS通信でもその内容は暗号化されることはありません。

POSTリクエストの内容はリクエストボディに含まれ、HTTPS通信の場合は内容は暗号化されるのでログインなどパスワードを送る場合は、パスワードを他人に見られない様にするためにPOSTメソッドを使う。

●ステータスコード

❓ ステータスコード200番台, 3000番台, 400番台, 500番台について

| 100番台 | Informational （情報） | 継続して処理されている状態(continue) | | --- | --- | --- | | 200番台 | Success （成功） | 正常に表示された状態(ok) | | 300番台 | Redirection （転送） | リクエストを完了させるために追加的な処理が必要 | | 400番台 | Client Error （クライアントエラー） | クライアント（ユーザ）側のリクエストが不正、コンテンツが未検出.(ページが見つからない場合に返すステータスコードは404) | | 500番台 | Server Error （サーバエラー） | リクエスト処理中にサーバー内部でエラー、アクセス集中やメンテナンスなどの理由 |

HTTP レスポンスステータスコード - HTTP | MDN

【よく見るものを解説】HTTPステータスコードとは？コード番号別に詳しく解説 | ナイルのマーケティング相談室

●HTTPS(Hypertext Transfer Protocol Secure)

SSL/TLSプロトコルによって提供されるセキュアな接続の上でHTTP通信を行うことをHTTPSと呼んでいる。通信内容が暗号化される。443ポートが利用される。

❓ HTTPSの特徴

  • 盗聴防止
  • 改ざん防止
  • なりすまし防止

❓ ステートフルとステートレスの違い

フルは状態保持のため負担が大きい、レスは状態を保持しないのでやりとりが毎回リセットされる。

★セッションとCookie(ログイン機能に利用される)

!! クッキーはブラウザに、セッションはWebサーバーに保持されている。

セッション サーバーに保持するもの 一時的に情報を保持できるという特徴からショッピングサイトのカートの情報などに利用されることがある。ログイン機能に利用。
Cookie ブラウザに保存するもの webブラウザに保存したCookieを送信することでwebサーバは相手を識別する。
ログイン機能に利用。    

  • 基本的なWebの仕組みとして、サーバ側で作成したセッションIDをHTTPレスポンスのSet-Cookieヘッダーに設定されていたname valueを設定してサーバーにリクエストすることでブラウザはCookieにセッションIDを保存(HTTPのレスポンスヘッダーに「Cookieを設定すべし」という情報が書かれている)

    クッキーは、HTTPメッセージのリクエストヘッダーとレスポンスヘッダーで送受信されます。 name=valueの情報をクッキーと呼ぶ

  • とあるシステムにログイン後、他のページにアクセスする度にクッキーをサーバーに送っている

  • クッキーとは、Webブラウザに保存される、特定のサイトと紐付けられたテキストデータのことです。

  • クッキーには有効期限があり、その期限を過ぎたら削除される。

    Railsだとクッキーの有効期限はconfig/initializers/session_store.rb で設定できます。 例はクッキーの有効期限を1日に設定

    Rails.application.config.session_store :cookie_store, key: '_runteq_normal_session', expire_after: 1.day

    有効期限は、クライアントが終了したとき、ブラウザで言えば、ブラウザが閉じられるまでになります。

  • 最大容量は4キロバイト(クッキーを利用して、たくさんの情報をやり取りすることはできない)

●セッション

  • 1度ログインすると、他のページにアクセスする度にログインしなくて良いのは、セッションで**ログイン時の情報(メールアドレスとパスワード)を保持**しているためである。

●ログイン認証とは

SessionとCookieで状態を保持する流れ

  1. ユーザーがwebサイトにアクセスする

    サーバー側でユーザー名、パスワードなどで、認証をチェック

  2. サーバーはSession IDを生成し、Session IDとユーザーを紐付けてサーバーに保存する セッション情報にログイン中のユーザー名を記録

  3. サーバーはwebサイトの画面を返すと同時に、Session IDをブラウザに渡す

  4. ブラウザはCookieにそのSession IDを保存する

  5. ユーザーが次にリクエストを送るときに、そのSession IDがサーバーに送られる

  6. サーバーはそのSession IDによって「誰からのアクセスか」を認識する

  7. サーバーはSession IDに紐づいた情報をSession情報保管場所（DBなど）に保存する

Cookieとセッションをちゃんと理解する - Qiita

CookieとSessionを今度こそ完全に理解する【分かりやすく図解】｜Webエンジニア研究室

4章　データ形式

★HTML

❓ HTML文章はどんな構造か？

タグに囲まれた文章によって構成されている。開始タグと終了タグからなる

  • **HTMLを解釈するのはブラウザ。**
  • HTMLはテキストで、そのままではとても読みにくいですが、ブラウザがHTMLを解釈して表示することで見やすいWebページが表示される。言ってしまえば単なるテキストである。
  • ページのレンダリングをサーバー上で実行し、サーバ側でHTMLを生成してクライアント側へ返すこと**(サーバ側でHTMLを作って返すこと)をサーバサイドレンダリングと言う**
  • **HTMLはHTTPのレスポンスボディに含まれます**。

❓ JPEG, GIF, PNGの特徴と違い

画像形式 画質(MAX) 圧縮率 透過処理 アニメーション
JPEG 1677万色 非可逆 できない できない
PNG 1677万色 可逆 調整できる できない
GIF 256色 可逆 特定の色を透過色に指定できる パラパラアニメができる

 

●DOM(Document Object Model)

  • HTMLをJavaScriptで扱えるようにしたものである
  • DOMはツリー形式になっている(ドキュメントの各要素をツリー構造で扱う)
  • DOMをいじることでHTMLの見た目を変えられる.
  • プログラムからHTMLやXMLの各要素を参照したり、JavaScriptを使ってXMLやHTMLを操作できるようにする仕組み。
  • ブラウザ側で解釈

●JSON

データ構造を表すのに使われる。フォーマットの一つである

  • 文字列以外に数値、空データも扱う
  • データファイルは小さい
  • 人間には読みにくい

プログラミング言語ではない

JSONでは数値、真偽値、文字列、NULL、配列、オブジェクトが表現できる。

 

●エンコード, デコード

データ圧縮にはコーデックと呼ばれるソフトウェアが用いられ圧縮することをエンコード、再生するために伸長することをデコードという

●フィード

Webサイトなどの更新履歴を配信するためのファイル

5章　Webアプリケーション基礎

●Webアプリケーションの3層構造

階層構造であり階層同士で直接やりとりしない

Webサーバー、アプリケーションサーバー(APサーバー)、データベースサーバー

  • 負荷分散しやすい
  • 改修の影響範囲を限定できる

●フレームワークについて

 ❓ ライブラリとフレームワークの違い

ライブラリがさまざまな機能、いわば「部品」を再利用できるように集めたものとすれば、

フレームワークは文字通り、開発のための「枠組み」を提供してくれるもの

 ❓ MVCモデルとは？3層アーキテクチャーとの違いは？

各要素が相互にやりとりをする。

MVCモデルの範囲はアプリケーション層とデータ層である。プレゼンテーション層はMVCモデルとユーザーの間の仲介を行う部分。

❓ Webサーバーの役割

Webクライアントに対する窓口の役割。

つまり、静的ページのデータやAPサーバーから転送された動的ページのデータをWebクライアントに転送すること。

冗長化：1台あたりの負担を無くし故障しても別のサーバーがカバーする。

❓ アプリケーションサーバーの役割

Webアプリケーションの中核となる業務処理を行うプログラム。

セッション管理機能、トランザクション管理機能

● DBMS

データベース管理システム。

冗長化とデータの同期

      冗長化方法

  • ミラーリング: 複数のデータベースが同時に更新を行う
  • レプリケーション : 更新内容を別のDBMSに連携して、連携されたDBMSが同じ内容の更新をする
  • シェアードディスク: データストレージ(共用の機器)を持ち複数のDBサーバからデータストレージを更新をする

●ミドルウェア

OSとアプリケーションの間で色々な処理を行うソフトウェア

Webサーバー Apache Web Server/Nginxなど
データベース MySQL/PostgreSQL/Oracle Databaseなど
アプリケーションサーバー JBoss/Apache Tomcatなど

●キャッシュ

  • ブラウザ側で保存されるもの(一度表示したページ)とサーバ側で保存されるもの(一度リクエストした内容)がある。
  • 有効期限を設定できる。
  • 通信量の削減やサーバの負荷軽減になる。
  • CSSやJavaScriptに変更を加えたが反映されない場合、ブラウザキャッシュが残っていることが原因の一つとして考えられる。

●Ajax(Asynchronous Javascript+XML)

非同期通信を行う場合は、サーバー側がJSON形式でデータを渡して、ブラウザのクライアント側で受け取ったJSONデータを元に、何か処理を行う形が主流になります。

同期通信に比べて通信量は少なくなる。

【Ajax】Ajax通信とは？概要と使い方 | Daily Up

Google Mapが非同期通信であるAjax通信を使った例で、マップをずらしてもリロードが走らず、必要なマップの箇所のみデータを持ってきてくれる。

●API

  • JSON形式でデータが返されることが多い。
  • サーバーの機能を利用するためのインターフェース
  • 自分で作り、公開することも可能

6章 Webのセキュリティと認証

Rails セキュリティガイド - Railsガイド

●情報セキュリティの3要素(CIA)

機密性 許可されたものだけが利用できるように設計されていること 盗聴
完全性 改ざんや破壊が行われておらず、内容が正しい状態にあること 改ざん
可用性         許可されたものが、必要時に中断することなく、情報及び関連資産にアクセスできる状態を確保することと なりすまし
     
     

3大セキュリティリスク=盗聴,改ざん,なりすまし

 

●ブルートフォース攻撃

暗号解読や認証情報取得の手法。主にパスワードを不正に入手するために用いられる。

WEBシステムへの攻撃

●パスワードクラッキング

IDとパスワードによる認証を行う会員制Webサイトからユーザーのパスワードを抜き出そうとする攻撃

●DoS攻撃

大量のアクセスを行うことでサービス停止させる攻撃

●ディレクトリトラバーサル

公開されてないファイルをURLの階層で指定することでWEBサーバー自体のログインパスワードを入手する方法

●セッションハイジャック

第三者が盗聴などの手段を使いCookieの中身やセッションIDを取得しシステムを利用し個人情報を抜き取る

★XSS(クロスサイトスクリプティング)

WEBアプリケーションの脆弱（ぜいじゃく）性を利用して悪意のあるコードを実行させる攻撃

★CSRF (クロスサイトリクエストフォージェリ)

XSSと異なる点はWebページに特定のリクエストを行うスクリプトを仕込み、ユーザーになりすまして意図しない操作を行わせる攻撃方法。

★SQLインジェクション

アプリケーションの脆弱性を利用して、フォームなどに悪意のあるSQLを記載することで、意図しないSQLをアプリケーションに実行させる攻撃方法

それに対しWebアプリケーションは、ユーザーから送られたパラメータをそのままSQLに記載して実行するのではなく、エスケープしてからSQLを実行する様に対策する必要がある。

●暗号化

元のデータ(平文)を暗号化手段 (暗号化アルゴリズム)で第三者が読み取れないデータ(暗号文)にすること。

●脆弱性

セキュリティーホール

見えるべきでないものが第三者に見えてしまうような不具合

ゼロデイ攻撃

セキュリティーホールを利用した攻撃

★ファイヤーウォール(外部からの攻撃を守る)

ファイヤーウォール インターネットと内部ネットワークの間に設置して、外部からの攻撃を防ぐ
IDS ネットワークに対して不正なアクセスがないかをリアルタイムでチェックし、疑わしい内容があれば管理者へ通知を行う
IPS IDSの役割が不正なアクセスの検知や通知にとどまるのに対し、IPSはその名前のとおり不正なアクセスの侵入を遮断するなどのアクションを行う
WAF ウェブアプリケーションに対する通信内容をチェックして不正なアクセスを防ぐ。
  ファイヤーウォールとIDS/IPSで対応できない攻撃を検知・遮断する
   
   
   
   

★★公開鍵暗号方式

重要！！

**送信者が送信するデータを受信者の公開鍵で暗号化して、受信者は受信したデータを受信者の秘密鍵で復号する**

SSLは公開鍵暗号方式を活用した暗号化通信である

●SSHキー(秘密鍵・公開鍵)

ssh-keygenコマンドで生成されるid_rsaが秘密鍵、

id_rsa.pubが公開鍵。

sshキー(秘密鍵・公開鍵)の作成と認証　流れ - Qiita

●デジタル署名

公開鍵暗号方式を応用したものがディジタル署名である

1.送信者(署名を送る人)が秘密鍵・公開鍵を作成して、メッセージのハッシュ値を秘密鍵で暗号化する 2.メッセージと署名を受信者(署名を受け取る人)に送る 3.受信者はメッセージをハッシュ化して、署名(←暗号化されているもの)を公開鍵で復号してハッシュ値を確認できる状態にする。

  1. 3のハッシュ値を比べて一致していれば、署名を送ってきたのはその人であることがわかる

ssh公開鍵認証を実装する - Qiita

公開鍵暗号方式とディジタル署名 | Points & Lines

 

★認証 VS 認可

認証 本人かどうかを確認すること
認可 認証後、ユーザーの権限にしたがって利用できるサービスの許可を行うこと

初めてのHTMLフォーム

●送信ボタン

送信ボタンには2種類の書き方があり、inputタグのボタンとbuttonタグのボタンです。

buttonとinputの違いは、ラベルに追加できるものが違います。

inputはボタンのラベルにテキストしか設定できませんが、buttonは画像などを設定できます。

データを送信するためのボタンにするには、type属性にsubmitを設定します。

●inputについて

- HTML: HyperText Markup Language | MDN

method属性のGETとPOSTの違いは、GETはデータを取得する際に、フォームのデータをURL末尾のパラメータに追加する形で送ります。POSTはデータを追加する際に、フォームのデータをリクエストの本文に含む形で送ります。

参考書籍

『プロになるためのWeb技術入門』――なぜ，あなたはWebシステムを開発できないのか：書籍案内｜技術評論社

イラスト図解式 この一冊で全部わかるWeb技術の基本

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 | SBクリエイティブ