Webの基礎知識

HTML

Web3層アーキテクチャー

一般的なWebシステム

クライアント・サーバ方式

レスポンス（様々な処理）↓

プレゼンテーション層

HTTPリクエストでクラアントとのやり取り、アプリケーション層の呼び出し

Apache

  • Webサーバーソフトウェア
  • モジュール単位でApacheに機能を追加削除できる

アプリケーション層

中心的なシステムの処理

データ層

データベース

ステータスコード

メソッド説明
200リクエスト成功
301（リダイレクト）リソースが恒久的に異動
307リソースが一時的に異動
400（クライアントエラー）不正なリクエスト
401承認が必要
403アクセスが禁止されている、アクセス券が必要
404リソースが見つからない
500（サーバエラー）サーバ内部エラー
503サービスが一時的に利用不可

HTTPリクエスト

メソッド説明
GETサーバにページの取得をリクエスト

URLにパラメータが表示
HEADサーバにヘッダのみの取得をリクエスト
POSTサーバにデータを送信

パラメータはボディに書かれる　→　大きい重要なデータ
PUTファイルの保存をリクエスト
DELETEファイルの削除を要求
OPTIONSサーバの調査
CONNECTトンネルを開く
TRACEネットワーク経路の調査

ヘッダフィールド

  • ヘッダーフィールドは0行の場合あり
Accept受け入れ可能なメディア
（text/html、text/plain、application/json）
Accept-Languageブラウザが受け入れ可能な言語
Authorization認証情報（ユーザ名、パス）
Cache-Controlキャッシュを制御する指示情報
Content-Languageコンテントの言語コード
Content-TypeコンテンツのMINEタイプ、エンコーディング、
メッセージボディのメディア型
Cookieブラウザが保持するCookieの内容
Expiresコンテンツの有効期限
Last-Modifiedリソース・コンテンツの最終更新時刻、Date値
Refererリンク下のリソースのURL
Set-Cookieサーバが生成するCookieの内容
User-Agentクライアントの識別情報、名前

URL

https://ntorelabo.com/2023/03/17/%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0/#co-index-2

スキーマ//ホスト名:ポート番号/ディレクトリ/ファイル名?パラメータ（クエリ文字列）#フラグメント

オリジン　…　スキーマ//ホスト名:ポート番号

キャッシュ

  • 一時的に保存
  • 表示速度の上昇
キャッシュCookie
テキスト、画像などのWebページの情報を保存ID、パスワードなどユーザーの入力情報を保存

Cookie

  • ブラウザとサーバ間の通信プロトコル
  • 4096バイトのASCII文字列を保存
  • ブラウザごとに保存

HttpOnly属性

クライアント側でJavaScriptなどからアクセス不可にするもの

Set-Cookie

  • Webサーバからブラウザに送信する

HTTP/2

  • HyperText Transfer Protocol version 2
  • バイナリフレーム
  • ストリームの並行処理、優先度設定
  • HTTPヘッダの圧縮
  • HTTPSでの通信
  • サーバプッシュ

データURL

HTMLやCSSにデータを直接埋め込む

HPACK

  • 2度目以降はヘッダフィールドの通信データ量を削減
  • HTTP/2で使われるアルゴリズム

SOAP

  • 異なるコンピュータ上でWebサービス間でメッセージを、連携するプロトコル
  • XML形式
  • 主にHTTP

Basic認証

  • 簡易的な認証
  • Base64でエンコード
  • Authorizationヘッダに付加して送信される
  • 認証が失敗　→　ステータスコード401

Base64

  • エンコード方式
  • 64文字で表す（a~z、A~Z、0~9、+、/）
  • ファイルのサイズが1.3倍に

Digest認証

  • バイナリデータやマルチバイトの文字を64種類の英数字と一部の記号のみに置き換える（ハッシュ化）MD5でダイジェスト化
  • 改ざんや覗き見が困難
  • 暗号化しない

クロスサイト・リクエスト・フォージェリ

  • CSRF: Cross Site Request Forgeries
  • 攻撃用Webページにアクセスすると、ページ内に用意されていた不正なHTTPリクエストが攻撃対象サーバに送られます。
  • 対策　サーバで外部サイトのリクエストを受け取らないようにする

SQLインジェクション

  1. データベースを不正に操作、SQLを挿入
  2. データベースを不正の操作
  3. データ消去、改竄　→ 情報漏洩
  4. 対策　入力値を適切にエスケープ処理
  5. 対策　プリペアードステートメント（変数入りのSQL文をあらかじめ作成しておく）を使用

クロスサイト・スクリプティング

  1. HTMLに悪質なスクリプトを埋め込む
  2. 別のWebサイトへと誘導する
  3. 対策　悪意あるスクリプトに対して出力値を適切にエスケープ処理

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

  • 本来アクセスできないはずのファイルにアクセス
  • 対策　アクセス権を設定
  • 対策　絶対パスに変換

HTTPヘッダ・インジェクション

  1. HTTPリクエストに、不正な文字列を挿入
  2. WebサーバからのHTTPレスポンスを不正操作
  3. 対策　改行をエスケープ処理、入力エラーとする

Web広告

MVCアーキテクチャ

  • Model-View-Controller
  • ソフトウェア設計モデル

data URIスキーム

  • データ（画像など）をリンクではなく直接HTMLに書き込む
  • base64で変換

マイクロデータ

  • 検索エンジン、プログラムが理解
  • itemscope　… 宣言
  • itemtype　…　URL
  • itemprop　… プロパティ
<div itemscope itemtype="http://schema.org/Person">
	<p>このサイトの著者は<span itemprop="Name">ida</span>です。</p>
	</div>

このサイトの著者はidaです。

RDF

  • Resource Description Framework
  • XMLベースのメタデータを記述するための仕様

RDFa

  • Resource Description Framework in Attributes
  • RDFによるメタデータをXHTMLに埋め込むための仕様

OGP

  • Open Graph Protocol
  • SNSでシェアするときに、その内容を表示

画像ファイル

インターレース

  • 画像全体をとびとび（通常は上から）に表示
  • GIF、PNG
  • 徐々に鮮明に表示

W3C

  • World Wide Web Consortium
  • Web関連技術の標準化を目的とした非営利団体
  • DOM、HTML、CSSを標準化

WHATWG

  • Web Hypertext Application Technology Working Group
  • HTML、Web関連技術の開発コミュニティ
  • Apple、Mozilla、Operaのメンバーが設立
  • 2019年以降W3Cと共同でHTML、DOMの仕様を統一、開発

IETF

  • Internet Engineering Task Force
  • インターネット技術の標準化を推進する任意団体
  • HTTPを標準化
W3C
WHATWG
IETFHTTPを標準化