search

zerebom / paper-books

@zerebom が読んだ技術書、論文をまとめています。推薦システム系が多いです。
https://github.com/zerebom/paper-books/issues
2 stars 0 forks source link

この一冊でわかる、Web技術の基本 #19

Open zerebom opened 4 years ago

zerebom commented 4 years ago

イラスト付きでWebを包括的に説明してくれている参考書

Web 技術とは

Webとは

文書の公開・閲覧のためのシステム ハイパーテキストと呼ばれる言語を表示する。 文書同士をハイパーリンクで繋げる。 一つのドメインにある複数のWebページの集まりをWebサイトという。 コンピュータとユーザーのやり取りを渡す機能をUI、 ソフトウェア同士のやり取りをする機能をAPIという。 ハイパーテキストを記述するための言語をHTMLという。 HTMLで記述された全ての文書をコンテンツという。

WEBサーバーとは

Webブラウザからコンテンツの要求があったときに、必要なコンテンツをネットワークを通してWebブラウザに送信する役割のもの。コンテンツがサーバーによって提供されることでWebコンテンツになる。 ApacheやIISなどが利用されている。 CERNで各国の実験者がすぐに情報にアクセスできるようにするために開発された。

Webアプリケーション・システム・サービスの違い

アプリケーション...WEBを介して人が利用するサービスを提供するもの(具体的なサービス) サービス...プログラムが利用するサービスを提供するもの(API) システム...Webサービスを提供する仕組み(各種サーバ)

URLとは

取得したいWebページをWebブラウザに指定する文字列。 「どのやり取り手順で」「どのWebサーバーに」「なんのコンテンツを」取りに行くかが指定されている。 構造としては左から https://github.com/zerebom/paper-books/issues/19

  1. スキーム名(プロトコルを指定)
  2. ホスト名（ドメイン名）
  3. ポート番号（通常は省略）
  4. パス名 (接続先のディレクトリ、ファイルを指定) となっている。

    ドメイン

    グローバルIPアドレスの別名。IPは覚えにくいので、こちらがWebサービスの住所として使われる。

DNS(Domain Name System)

ドメインをIPアドレスへと変換してくれる仕組み。 これを提供してくれるサーバをDNSサーバという。 ドメインとIPアドレスを紐づけることを名前解決と呼ぶ。

静的ページ・動的ページ

あらかじめ決められたコンテンツを配信...静的ページ ユーザーの入力を元に、異なる内容を表示...動的ページ

動的ページの仕組み

CGI(Common Gateway Interface)

Webサーバーがブラウザからの要求に応じてプログラムを起動させるための仕組み。
動的ページはURL->CGI->HTML生成という形で作られる

サーバーサイドスクリプト

CGIから呼び出されるスクリプト

インターネットとは

各地のコンピューター同士をネットワークでつなげたいという思いで、ARPAがARPANETを開発。 通信方式と、世界各地の拠点との接続という改良によりインターネットが普及した。 インターネットサービスプロバイダーが提供するサービスを利用することで接続できる。

全体像

インターネットはインターネットプロバイダー(ISP)同士が階層構造でつながっている。 1次プロバイダー...海外同士・IX(インターネット・エクスチェンジ)がつながっている 2次プロバイダー 3次プロバイダー

クライアント/サーバーシステム

Webなどのサービスを提供する...サーバー サービスを利用する...クライアント

Webの標準化

W3C

WEBの生みの親、ティム・バーナーズ=リーが創設した団体。 HTML,CSS,XML,XHTMLの標準化を行っている

Webの設計思想

RESTful(REpresentational State Trasfer)

4つの原則からなるシンプルな設計をさす。 前回のやり取り結果のような情報を持たない(=ステートレス) 以下原則。

  1. 統一インターフェース あらかじめ定義・共有された方法で情報がやり取りされる (WebならHTTPなど)

  2. アドレス可能性 全ての情報が一意なURLの構文で示される

  3. 接続性 やり取りされる情報にはリンクを含めることができる

  4. ステートレス性 やりとりは1回ごとに完結する

セマンティックWeb

Webページの情報に意味を付け加えたもの。 セマンティックWebではHTML->XMLと言語が変わる。 検索の精度を上げたりできるが、メタデータの付与の作業量が多く普及は遠い。

プロトコル

TCP/IP

インターネットにおける様々なサービスを実現するためのプロトコルの集まり。 OS・機種・デバイスに関係なく通信できるのはTCP/IPのおかげ。 レイヤーが以下のように分かれている

TCP

送信側・受信側で互いに確認を取りながら通信を行うコネクション型

UDP

確認を取らないコネクションレス型

IPアドレス

インターネットに接続されたコンピュータを特定しデータの行き先を管理する識別番号

ポート番号

コンピュータが提供するサービスを指定する識別番号 HTTPは80番。 0~1023がウェルノウンポート 1024~49151がレジスタードポート 49152~65535がダイナミックポート

zerebom commented 4 years ago

HTTPとは

世界共通のコンテンツを送信するためのやり取りの手順をHTTPという。 これにより、世界の様々なブラウザやサーバーに対しても同じ処理をかけることができる。 TCP/IPの一部。Webサーバーの位置・通信方法などはここには記載されていない。

1999年に改定されたHTTP1.1が主流。2015年に改定されたHTTP2もある。

クライアントとサーバー間のやり取り

  1. Webブラウザのアドレス欄にURLをクリックorリンクを踏む
  2. URLやリンクを元にWebサーバーに対してデータを要求
  3. Webサーバーが要求を解析
  4. 解析結果をブラウザへ応答
  5. Webサーバーより受け取ったデータを解析し、Webページとして表示

２種類のHTTPメッセージ

Webブラウザからの要求...HTTPリクエスト Webサーバーからの応答...HTTPレスポンス これが基本的に一対一対応している。

HTTPメッセージの構成

リクエスト時→リクエスト行...どういう処理をして欲しいか書く(情報を取得したい・送信したい等) ex)GET/index.html HTTP/1.1

レスポンス時→ステータス行 ex)HTTP/1.1 200 OK

HTTPメソッド/GET,POSTの違い

ステータスコード

メッセージヘッダー

HTTPメッセージの詳細な情報を記載している

TCPによるデータ通信

以下の三段階によってやりとりが行われる。

  1. クライアントからの接続要求(SYN)
  2. クライアントに対して確認応答及び、サーバーからの接続要求(SYN+ACK)
  3. サーバーに対して確認応答(ACK)

この3つが確認できるとHTTP通信が行われ、 その後切断確認のためにまた3ステップ行われる。

再送制御・順序制御があるため高い精度を誇る。

HTTP/1.1の新機能

HTTP/2の新機能

HTTPS(HTTP over SSL/TLS)の仕組み

zerebom commented 4 years ago

Webの様々なデータ形式

画像形式

XML

HTMLはWebコンテンツ用に作られた。 XMLは個別の目的に応じて汎用的に使えるように作られている。 任意の場所にタグづけできるが、文字列しか扱うことができない。＼

CSS

DOM(Document Object Model)

HTML,XMLを扱う手法(API) 対象となる文書の各要素を抽出し、それらを階層構造として扱う。 BeautifulSoupみたいなやつ。 HTML/XMLの関係を木構造で表したものをDOMツリーと呼ぶ

JSON

構造化したデータを表すのに使える。 文字列以外に数値や空を意味するデータを扱うこともできる。

フィード

Webサイトなどの更新履歴を配信するためのファイル ブログやニュースサイトで使われていて、サイトを訪問しなくても フィードを見ればOK

音声・動画配信

zerebom commented 4 years ago

Resuful API

メリット

  1. URIに規律が生まれることで、APIを利用するサービス開発者が楽になる
  2. URIに規律が生まれることで、API開発者もURIからソースのどの部分なのかが容易にわかる
  3. ブラウザのアドレスバーにURIを入力すればリソースが参照できる
  4. サーバ、クライアント間で何も共有しないことにより、負荷に応じたスケーラビリティが向上する。ステートレス性に値するもので、一番のメリットとされている。
  5. GET、POST、PUT、DELETE等のHTTP標準のメソッドを使うことで、シンプルで一貫性のあるリクエスト標準化が円滑に行える。統一インターフェースに値する。

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

3層にすることによるメリット

  1. 負荷分散
  2. 改修範囲の限定

MVCモデル

３層構造と違い、相互に働きかける。

各サーバーの役割と特徴

Webブラウザ

アプリケーション(AP)サーバー

Webサーバからユーザからの情報を受け取り、サーバーサイドプログラムを実行することで データの整形や加工をしたり、データベースのデータの検索加工をし、WEBサーバにかえす。 ３層構造で最も高機能。

データベースサーバー

データを保存する冗長化は以下の３種類がある

キャッシュサーバー

静的コンテンツではリクエストに対するレスポンスを覚えておくことで、 サーバーの負荷を減らすことができる。 リクエストに対するレスポンスの記憶をキャッシュという

コンテンツキャッシュとクエリキャッシュに分かれる

Ajax

Webブラウザがリクエストを送り、それをサーバーが対応する。。。という流れを同期通信という。 同期通信の欠点を補うためにレンダリングなどのプログラムはJSなどを使ってクライアントサイドスクリプトが直接サーバーとやりとりし、処理してしまおうというのがAjax。 HTMLそのものではなく、必要なデータだけを更新する。また非同期通信もできるようになる。 具体的にはサーバーの応答を待っている間にサーバーに関係ないHTMLの部分の更新などを行うことができる。 Googleのレコメンドなどに使われる

WebAPI

Webを通じてプログラムが直接サービスを利用するときの窓口。 XML -RPC,SOUP,RESTなどが使われている

CGI

Webサーバーがクライアントの要求に応じてサーバーサイド・スクリプトを起動するための仕組み。 URLを通じてコマンドライン引数渡しやパス渡しにより変数を渡す。

Webシステムのセキュリティ

情報セキュリティの3要素

損失が現実化することをリスクが顕在化する、という

攻撃方法

パスワードクラッキング

DOS攻撃

処理できないような大量のアクセスを行うこと

セッションハイジャック

ログインしてから利用するようなWebシステムでの CookieやセッションIDを取得し、アクセス済みのユーザとして振る舞い 個人情報を取得すること。 ログインユーザーのIPが急に変わったりしたときに接続を遮断することで回避したりする

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

Webサーバーのディレクトリを相対パスで指定することで ユーザが入れないようなファイルにアクセスできてしまうこと

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

攻撃者が虚弱性を持つWebサイトに対してスクリプトを書き込むリンクを表示する。 つまり、ユーザーののWebブラウザに悪意のあるスクリプトを送り込む Cookie情報を公開したり、ウィルスをダウンロードしたりする。

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

本人になりすましてログインの必要なサイトを操作する。 ユーザのパスワードを指定のものに変えたりなど。

SQLインジェクション

パスワード入力画面などに、SQL文を書くことで DBの判断誤らせること。

Webシステムの脆弱性

セキュリティホール

ソフトウェア製品の欠陥により、権限がないと本来できないはずの操作が権限がないユーザでもできてしまうこと

ゼロディ攻撃

セキュリティホールのパッチが配られる前に攻撃を仕掛けること

ファイヤーウォール

IDS,IPS

ファイヤーウォールで防ぎきれない攻撃を防ぐ手段の一つ。 通信の中身まではチェックしない

WAF(Web Application Firewall)

やり取りされるパケットの中身を見て悪意のあるデータがないかチェックする 高機能だが、高価である