HTML5プロフェッショナル認定試験
レベル1ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

本日の概要試験範囲• 試験概要• 試験範囲ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ
Web関連技術• プロキシ• JavaScript• データベース• 画像ファイルフォーマット
• DataURI• セキュリティ

2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

試験範囲• 試験概要• 試験範囲ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ
Web関連技術• プロキシ• JavaScript• データベース• 画像ファイルフォーマット
• DataURI• セキュリティ

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5プロフェッショナル認定資格とは• 次世代のWebプロフェッショナルのスキルの向上に貢献するために、
HTML5を活用したWebページやWebアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えたHTML5のプロフェッ
ショナルを中立的な立場で公平かつ厳正に認定する資格制度です。
• Webデザイナー、Webプログラマー、スマートフォンアプリ開発者、
サーバーサイドエンジニアなどの、Web開発プロジェクトやWebサービスに関わるあらゆるプロフェッショナルが対象です。
• 多くの企業が推進する次世代Web言語の認定資格として、
HTML5のプロフェッショナルのスキルの向上に役立ちます。
また、企業内や研修機関での『技術力を担保する客観的基準』としても活用できます。

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

二つのレベル
対象
Webデザイナー/

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

HTMLコーダー

Webシステム
開発者

Webディレクター/グ
ラフィック
デザイナー

フロントエンドプロ
グラマー

スマートフォンアプ
リ開発者

サーバーサイドエンジニア

スマートフォンアプ
リ開発者

フロントエンドプロ
グラマー

サーバーサイド
エンジニア

Webデザイナー/

対象

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

Webシステム
開発者
Webディレクター

HTMLコーダー© LPI-Japan 2014. All rights reserved.

5

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レベル1とレベル2の資格体系
HTML/HTML5マークアップ
HTML5に関するタグの用途、構造の組み立て方に関する技術
ビジビリティ
JavascriptやCSS3などを用いて、デザイン仕様に沿った見やすい表示を行うための技術
レスポンシブWebデザイン
一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術
オフラインWebアプリケーション
通信が常時接続状態ではない環境でも、効率的にWebコンテンツを動作させるための技術
Javascriptプログラミング
Javascriptを使って、動的なWebコンテンツを作成する技術
マルチメディア
３D・動画・音声ファイルなどのマルチメディアコンテンツの表
示・再生に関する技術
ユーザビリティ
ナビゲーション、地図表示など操作しやすいコンテンツを作成する
ための技術
パフォーマンス
データベースや、並列処理を使ってコンテンツを効率良く高速に動作させるための技術© LPI-Japan 2014. All rights reserved.

6

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レベル1とレベル2の資格体系
ベーシックレベル認定名： HTML5 Level1 (Markup Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level1 Exam

所要時間：90分
試験問題数：約60問

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。

受験料：\15,000 （税抜）"HTML5を使って静的なWebコンテンツを作成することができる。

認定条件： HTML5 レベル1試験に合格する"ユーザビリティ・ビジビリティの高いWEBコンテンツを設計・作成することができる。

こと"スマートフォンや車載システムなど、様々なデバイスに対応したコンテンツ作成ができる。

認定の有意性の期限：5年間

アドバンストレベル

認定名： HTML5 Level2 (Application Development Professional)

HTML5プロフェッショナル向け

試験名： HTML5 Level2 Exam

所要時間：90分

この資格の認定者は、下記のスキルと知識を持つWebプロフェッショナルであることを証明できます。
"動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイス
アプリケーションを作成することができる。
"マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる。
"システム間連携を行いリアルタイムな情報を提供するアプリケーションを作成することができる。

試験問題数：未定
受験料：未定認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間© LPI-Japan 2014. All rights reserved.

7

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

レベル1の出題構成
主題
Webの基礎知識

割合
30％

項目
・HTTP,HTTPSプロトコル・HTMLの書式

・ネットワーク・サーバ関連技術の概要
・Web関連技術の概要
CSS3

20％

・スタイルシートの基本
・CSSデザイン・カスケード（優先順位）

要素

37％

・HTML4.01以前の要素および属性
・HTML5で新しく加わった要素および属性

レスポンシブWebデザイン

10％・HTML5で廃止されたタグ・マルチデバイス対応ページの作成
・メディアクエリ・スマートフォンサイト最適化

オフラインWebアプリケーション

3％

・オフラインWebアプリケーション© LPI-Japan 2014. All rights reserved.

8

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術
試験範囲• 試験概要• 試験範囲ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ• プロキシWeb関連技術• データベース• JavaScript

画像ファイルフォーマット
• DataURI• セキュリティ•

9

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP

•

• DNS

• TCP

TCP/IPの概要
• IP
• UDP

• HTTP• Webサーバ• プロキシ• データベース
10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

インターネット

インターネット

ルータ

ルータ

ハブ

ルータ

Webサーバ
携帯電話網

パソコン

インターネットを通じて通信を行なうために使用される規格(通信方法)がTCP/IP
11

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP/IPによる通信の例
Webブラウザ

Webサーバ

HTTP

HTTP

TCP

TCP

IP

IP
インターネット

無線LAN

12

有線LAN

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP/IP階層図(1)
階層

主な役割

アプリケーション層

送信内容を準備する
受信内容を処理する

トランスポート層

間違いの無い通信を行なう

インターネット層

通信相手を選択する

ネットワーク

物理的にネットワークに接続してデータを送受信する

インターフェース層

13

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP/IP階層図(2)アプリケーション層

14

送信

手紙を書く

トランスポート層

封筒に入れるインターネット層

宛名を書く

ネットワークインターフェース層

郵便ポストに入れる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP/IP階層図(3)アプリケーション層

手紙を読む

トランスポート層

封筒から取りだす

インターネット層

宛名を確認する

ネットワークインターフェース層

15

受信

郵便受けから手紙を取る

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP/IP階層図(3)階層

実際の仕組みアプリケーション層
トランスポート層
インターネット層
ネットワークインターフェース層

16

HTTP

FTP

TCP

DNS
UDP

IP
有線LAN 無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題1
TCP/IPの階層に含まれないものをひとつ選びなさい
A. ネットワークインターフェース層
B. インターネット層
C. トランスポート層
D. アプリケーション層
E. データリンク層

17

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

IPInternet Protocol
HTTP

FTP

TCP

DNS

UDP

IP

有線LAN

18

無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

IPアドレス
1番のPCにデータを送るよ192.168.0.1

192.168.0.2

192.168.0.1
4つのブロックに分かれる
ひとつのブロックは0〜255の数
256の4乗で約42億通り
19

192.168.0.3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

IP(2)
192.168.100.1
宛先IPアドレスを見て、経路を選択
IPパケット
宛先 192.168.100.1

IPパケット
宛先 192.168.100.1

ゲートウェイ20

192.168.300.1

ゲートウェイThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題2
IPについての説明で正しいものをひとつ選びなさい
A. IPアドレスをつかって送信先、送信元のホストを識別する
B. IPアドレスのひとつのブロックは1から256までの数字で表す
C. IPの転送の形式は、IPセグメントである
D. IPには順序制御や再送がある

21

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP
Transmission Control Protocol
HTTP

FTP

TCP

DNS

UDP

IP

有線LAN

22

無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP(1)•23

確実に通信することが重要、ただしちょっと遅い•

コネクション確立•

データを小分け(セグメント)にして送受信•

セグメントの順番は保証される•

受けとりが確認できなければセグメントを再送

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP (2)通信可能ですか?
はい、通信可能です
コネクション

では、データを送ります

確立

データ
・
・
・

24

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP (3)送信受信アプリケーション層

アプリケーション層

データ

データ1

データ2

データ3

TCPセグメント
TCPヘッダ

データ1

データ2

データ3

TCPセグメント
データ1

インターネット層

25

データ

トランスポート層

TCPヘッダ

データ1

インターネット層

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

TCP (4)データその1を送ります
データその1を受けとりました

受けとりが確認できない場合は再送

データその2を送ります
トラブル発生もう一度データその2を送ります
データその2を受けとりました

26

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題3
TCPの特徴として間違っているものをひとつ選びなさい
A. 送信に失敗すると再送信する
B. 信頼性が低い
C. 送信された順序が保たれる
D. アプリケーション層のデータは分割される

27

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

UDP
User Datagram Protocol
HTTP

FTP

TCP

DNS

UDP

IP

有線LAN

28

無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

UDP(1)•29

高速なデータ転送が重要。ただし信頼性に欠ける。
•

コネクションなし•

順序制御なし•再送なし

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

UDP (2)データその1を送ります
トラブル発生データその2を送ります
データその3を送ります

トラブルがあっても気にせず
送信

経路が違えば、順
番が変わることもデータその4を送ります
30

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題4
UDPの特徴として間違っているものをひとつ選びなさい
A. 送信に失敗すると再送信する
B. TCPよりも信頼性が低い
C. TCPよりも高速である
D. アプリケーション層のデータは分割される

31

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP• DNS• URL(URI)• HTTP• DNSレコード• DNS• whois情報• Webサーバ• プロキシ• データベース
32

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DNS

HTTP

FTP

TCP

DNS

UDP

IP

有線LAN

33

無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

URL(URI)
http://www.example.com/index.html

http

スキーム名

www.example.com

ホスト名

index.html

パス

スキーム名などに使用できる文字
0〜9,A〜Z,a〜z,-,.,̲,~
使用できない文字(スペースや日本語)を使う場合には、
URLエンコードする(スペース->%20)
34

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DNS(1)
DNSはホスト名をIPアドレスに変換(またはその逆)する。
DNSサーバwww.example.comのIPアドレスは?
93.184.216.119です。

35

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DNS(2)www.example.com.
ルート(省略可).(最後のドット)トップレベルドメインcom
セカンドレベルドメイン
example
ホスト
www

36

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DNS(4)www.example.com.
のIPアドレスは?

DNSサーバ

ルートドメインcomドメイン93.184.216.119です。

再帰問い合わせ37

exampleドメイン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DNSレコードDNSサーバはドメイン内の様々な情報を持っている。
その情報をDNSレコードと言う。

38

A

ドメイン内のホスト名とそのIPアドレスCNAME

ホスト名の別名

MX

ドメインのメールサーバの
ホスト名

NS

ドメインのDNSサーバの
ホスト名

TXT

ホストへのテキスト情報(コメントや追加機能など)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

whois情報
ドメインの管理責任者の情報を公開している[Domain	 Name]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 HTML5EXAM.JP

	 	 …⋯	 中略	 …⋯

Contact	 Information:	 [公開連絡窓口][名前]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 特定非営利活動法人エルピーアイジャパン[Name]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 Linux	 Professional	 Institute	 Japan[Email]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 kimura@lpi.or.jp[Web	 Page]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 [郵便番号]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 106-0041[住所]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 東京都港区

	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 麻布台 1-11-9	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 CR神谷町ビル 7F[Postal	 Address]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 Minato-ku	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 1-11-9	 Azabudai	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 7F	 CR	 Kamiya-cho	 Bldg.

[電話番号]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 03-3568-4482[FAX番号]	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 03-3568-4483

39

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題5
DNSについての説明で間違っているものをひとつ選びなさい
A. ルートドメインのDNSサーバは全てのドメインの情報を持っている
B. ホスト名とIPアドレスを紐付けるのはAレコードである
C. DNSサーバは自分が知らないドメインについては、他の
DNSサーバに問い合わせる
D. example.comのcomはトップレベルドメインである

40

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• HTTP• Webサーバ• DNS• DNSレコード• whois情報• プロキシ• リバースプロキシ• データベース
41

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTTP

HTTP

FTP

TCP

DNS

UDP

IP

有線LAN

42

無線LAN

モデム

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTTPの通信手順(1)
リクエスト
GET /index.html HTTP/1.1

リクエスト行

Accept: image/gif, image/jpeg, */*リクエストメソッドとHTTPのバージョン

Accept-Language: ja
Accept-Encoding: gzip, deﬂate

User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.example.com

ヘッダ
ブラウザ情報や接続情報など

Connection: Keep-Alive<空行>

メッセージボディ<メッセージボディ>

POSTメソッドの場合などに使用

レスポンス

43

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTTPの通信手順(2)
リクエスト
レスポンス
レスポンス行
レスポンスコードとHTTPのバージョン

ヘッダ
サーバ情報や最終更新日時など

メッセージボディ
HTMLや画像などリソース本体

44

HTTP/1.1 200 OK
Date: Sun, 8 Aug 2015 12:34:56 GMT
Server: Apache/2.4.22 (Unix) (Red-Hat/Linux)
Last-Modiﬁed: Tue, 07 Jul 2015 12:34:18 GMT
ETag: "1dba6-131b-3fd31e4a"
Accept-Ranges: bytes
Content-Length: 4891
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html<空行><html></html>The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

リクエストメソッド
HTTPクライアント(Webブラウザ)から、
Webサーバへのリクエスト(要求)の種類は複数ある。
WebブラウザのアドレスバーにURLを入力してWebページを表示する場合など

GET
POST
HEAD
PUT
OPTIONS
DELETETRACE
CONNECT45

リソースを取得
リソースの作成、データの追加
ヘッダ情報のみ取得
ファイルを転送サーバで利用できる機能を取得
リソース、データの削除
通信経路の取得
SSL通信でトンネル接続する

問い合わせフォームからの送信や、ログイン時のID/パスワー
ド送信など
GET/POST以外のメソッドは現在ではほとんど使用されていない。
PUT,DELETEなどはPOSTで代用されることが多い。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ステータスコード
レスポンスに含まれる3桁のコード
まず大分類を覚える
1XX
2XX
3XX
4XX
5XX

次によく使われるコードを覚える

情報
成功
リダイレクション
クライアントエラー
サーバエラー

各Webブラウザのデベロッパーツール内のネットワーク(Firefox,Chrome),タイムライン(Safari)などで確認できる

46

200

OK

301

恒久的に移動した

302

一時的な移動

401

認証が必要

403

アクセス権限なし

404
500

リソースが存在しない
サーバ内部のエラー

503

メンテナンスや過負荷

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題6
HTTPのレスポンスコード500について正しい説明を選択してください。
A. 一時的な移動
B. OK
C. サーバ内部のエラー
D. リソースが存在しない

47

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ• Webサーバ• バーチャルホスト

• プロキシ• リバースプロキシ• データベース
48

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Webサーバ(1)
http://www.example.com/index.html
を下さい
リクエスト
HTTP
レスポンス
Webクライアント(Webブラウザ)

Webサーバ
index.html

49

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Webサーバ(2)Webサーバ ソフトウェア

これもWebサーバ

OS

これもWebサーバ
ハードウェア50

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

バーチャルホスト(1)2台のサーバで2つのWebサイトを運用
サイトB

利用率

サイトA
100

100

75

75

50

50

25

25

0

0

時

時

23

〜

20

時

19

〜

16

時

15

〜

12

11

7時

〜

8〜

4

3時

時

23

〜
時

51

0〜

20

時

19

〜

16

時

15

〜

12

11

7時

〜

8〜

4

3時

0〜

アクセス数
のピーク

アクセス数
のピーク

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

バーチャルホスト(2)バーチャルホスト
Webサイト A

バーチャルホスト
Webサイト B……

Webサーバ ソフトウェア

OS

ハードウェア52

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

バーチャルホスト(3)バーチャルホスト化した時間毎のサーバ利用率
100

利用率

75

50

25

0

時
23

〜
20

時
19

〜
16

時
15

〜
12

時
11

7時

〜

8〜

4

3時

0〜

53

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

バーチャルホスト(4)バーチャルホスト

バーチャルホスト

Webサイト A
siteA.example.com

Webサイト B
siteB.example.com

Webサーバ ソフトウェア

URIやIPアドレスでどのバーチャルホスト
に繋ぐか判断する

http://siteA.example.com/index.html

54

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

バーチャルホスト(5)メリット•

サーバを無駄なく使用することが出来る•

新規サイトの立ち上げが簡単

デメリット

55

•

ハードウェア,OSなどにトラブルがおきると一連托生

•

一部のサイトにアクセスが集中すると、他のサイトに影響が出る

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題7バーチャルホストの特徴として正しいものを選びなさい
A. サーバの運用コストが増大する
B. TCPベースと名前ベースがある
C. 一部のサイトへのアクセス集中が他サイトに影響を与える
D. ハードウェアのトラブルの影響は受けない

56

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• プロキシ• Webサーバ• ファイアウォール• キャッシュ• リバースプロキシ• プロキシ• 負荷分散• データベース
57

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

プロキシ

Web
プロキシ

58

インターネット

リバース
プロキシ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Webプロキシ
Web
プロキシ

Webコンテンツの「キャッシュ」

インターネット

有害サイトへのアクセスや有害情報の遮断「フィルタリング」

外部から内部への不正アクセスを遮断「ファイアウォール」
59

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

キャッシュ(1)

Web
プロキシ

インターネット

http://www.example.com/index.html
を下さい

60

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

キャッシュ(2)
キャッシュ
される

Web
プロキシ

61

インターネット

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

キャッシュ(3)
キャッシュ

Web
プロキシ

インターネット

http://www.example.com/index.html
を下さい

62

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ファイアウォール
不正なアクセスは遮断

Web
プロキシ

インターネット

リクエストへのレスポンス
は通す

63

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

リバースプロキシ

インターネット

リバース
プロキシ

SSL処理を肩代わり「SSLオフロード」

外部から内部への不正アクセスを遮断

複数のWebサーバへアクセスを振り分け「負荷分散」「ファイアウォール」
64

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

負荷分散(1)インターネットから見ると、一台のサーバに見える

インターネット

負荷分散装置

リバースプロキシや
ロードバランサ65

同じコンテンツThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

負荷分散(2)インターネット

負荷分散装置

振り分け方法• 負荷の低いサーバを選択• 順番にサーバを選択• クライアント毎に固定

66

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題8
負荷分散の特徴で間違っているものを選びなさい
A. 外部からは1台のサーバに見える
B. 不正なアクセスを遮断する
C. 順番にサーバを選択する方法をラウンドロビンと言う
D. リバースプロキシが使用されることもある

67

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ• プロキシデータベース• SQL• CMS• MVCアーキテクチャ•• データベース
68

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

データベース
Data Base Management System
データの蓄積を管理する仕組み

略してDBMS•

たくさんのデータを効率的に管理する•

データの整合性などを保証する•

データの処理を抽象的に扱う方法を提供する

システム構成図などでは、筒状のアイコンで表されます
69

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

リレーショナルデータベース•

DBMSのうち、関係代数を元に作られたものをリレー
ショナルデータベース(RDBMS)と言う•

データは表の形式で扱われる

カラム名
(列名)
カラム(列)

70

テーブル(表)member (会員テーブル)
id

name

sex

age

type

1

Suzuki

M

75

1

2

Ohnuma

F

30

2

3

Nojima

M

64

3

4

Shimada

M

47

2

5

KomineF

63

1

レコード(行)The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ＳＱＬ•

リレーショナルデータベースを操作するための言語•

結果を得るための条件を記述する•

ISOで規格化されているため、RDBMS製品間である程度互換性がある例) 63歳より年上のレコードだけを選択する
SELECT * FROM member WHERE age > 63;

71

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CMS(Contents Manage System)
一般的なWebページの更新方法
リクエスト
2

HTML/CSS
の編集

HTML
3

一般ユーザ

レスポンス

画像

1

FTP/SFTPなどでアップロード

CSS
Java
Script

管理者
画像の編集

Webサーバ72

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CMS(Contents Manage System)
リクエスト
5

ブログページの
HTML
管理画面の
HTML
1
2

管理者

SQLで検索PHPなどで書かれたプログラム8

一般ユーザ

Blogの例

Blogの記事を投稿

HTMLを生成

6
7

記事の
コンテンツ

データベース
PHPなどで書かれた管理画面のプログラム

SQLで追加3
4

追加した結果WebサーバWebブラウザ上の管理画面で、記事や画像などのコンテンツを編集/管理できる。
73

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

MVCアーキテクチャ•

アプリケーションをM(モデル)V(ビュー)C(コントローラ)の3タイプのモジュールに分割して、アプリ
ケーションの変更や応用に強いアプリケーションを開発する考え方

Webアプリケーションの場合、1ページごとにVCを1つずつ、Mは必要に応じて1つ以上用意することが多い

ユーザ操作を受けとり、Modelにデータ変更を促す
DBなどと連携しデータをビジネ
スロジックに従い管理する。
Controller
Model
View

WebではViewにHTMLが使用される

74

Modelが更新されたら表示を更新する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題9
SQLに関する説明で間違っているものを選びなさい
A. データベースを操作するための言語である
B. 各データベース製品間で互換性は全くない
C. 機能によってDML,DDL,DCLなどに分類される
D. 検索機能はSELECTを使用する

75

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web関連技術
試験範囲、頻出ポイント• 試験概要• 試験範囲• 頻出ポイント

ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ
Web関連技術• プロキシ• JavaScript• データベース• 画像ファイルフォーマット
• DataURI• セキュリティ

76

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web関連技術
JavaScript• Ajax• DOM•• JavaScript• 画像ファイルフォーマット
• DataURI• セキュリティ

77

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

JavaScriptとは

78•

JavaScriptとは、通常Webブラウザ上で動作するプログラム言語です。

•

HTML+CSSだけのWebページと、
HTML+CSS+JavaScriptを使ったWebページの最大の違いは、ユーザ操作や状況に応じて表示を変えられる点にあります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ECMA Script

79•

JavaScriptはWebブラウザごとに異なる実装が採用されています。なので微妙な差異があります。

•

国際的な規格としてはECMAという標準化団体がECMAScriptという名称で規格化しています。

•

試験には出ませんが、現在の最新規格はバージョン5.1で、バージョン6が策定中です。

•

Adobe Flashで使用されているActionScriptもECMA Scriptの派生的なプログラム言語です。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Ajax

80

•

JavaScriptは公開されて約20年程経ちますが、現在のように注目される切っ掛けとなったのが、2005年頃に出てきたAjaxという概念です。

•

Asynchronous JavaScript + XMLの頭文字を取って、Ajaxと名付けられました。

•

Asynchronous = 非同期の•XML = HTMLと似たデータ記述方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Ajaxの流れ
Webクライアント

Webサーバ

get http://example.com/index.html
index.html
htmlの描画&JavaScriptの実行

ページの更新と非同期に通信を行なう

XMLHttpRequestによるリクエスト
XML形式のデータ
データの処理&htmlの再描画

81

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題10
Ajaxの特徴として正しくない選択肢を選んでください
A. ページの表示と非同期にサーバと通信を行なう
B. 必ずページ全体をリロードする
C. サーバとの通信データフォーマットはXMＬである
D. JavaScriptを使用してHTML要素を変更する

82

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DOM
•

•

Document Object Model•

Document = Webページ•

Object = JavaScriptで処理を行なう単位•

Model = 考え方、仕組み

Webページをオブジェクトという単位に分割してJavaScriptから扱う仕組み

83

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

DOMは2つの世界の橋渡し
HTMLの世界JavaScriptの世界
I amDocument.

<!DOCTYPE html><html lang="ja">I am“head”.

<head><meta charset="UTF-8"><title> HTML5 Sample. </title>

DOM<link rel="stylesheet" href="./style.css"></head><body><h1>HTML5 Sample.</h1><p>これはHTML5のサンプルファイルです。</p>I am“body”.

</body>

I am
“h1”.

</html>オブジェクトを変更す
ると、HTMLも変わる
84

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題11
DOMについての説明で間違っている選択肢を2つ選んでください。
A. 基本的にHTML要素とオブジェクトは1対1で対応する
B. W3Cで策定され、標準化番号はMS-09である
C. DOMに対する変更はリロードしなくても反映される
D. DOMのオブジェクトの親オブジェクトは多くても1つである
85

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web関連技術• JavaScript• 画像ファイルフォーマット• セキュリティ

86

BMP
• PNG
• JPEG• GIF• インタレース•• DataURI

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

画像の保存形式
各保存形式の特徴となる要素• 扱える色の数• 圧縮方式• 透明処理• アニメーション• インタレース

87

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

扱える色の数
フルカラー

インデックスカラー
パレット
1 #FF000
0#00FF020#0000F
3F
4 #FFFF00#FF0000,#00FF00,#FF0000,#00FF00#0000FF,#FFFF00,#0000FF,#FFFF00#FF0000,#00FF00,#FF0000,#00FF00#0000FF,#FFFF00,#0000FF,#FFFF00
ピクセル毎にRGB(A)値を持つ

1,2,1,2

パレットの数が3,4,3,4

最大色数

1,2,1,2
3,4,3,4
ピクセル毎にパレットのインデックス値を持つ

88

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

圧縮方法
•

元データを細ぎれにして、同じ部分をまとめることで、データ量を減らす。

•

圧縮を復元(伸長)すると、元のデータと同じデータになる可逆圧縮と、元のデータと等しくならない非可逆圧縮(データを間引くことでデータを減らす)がある。

元データ
89

非可逆圧縮の復元データ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

透明処理(1)
透明色

アルファ値

ピクセル毎に透明にする/しないを選択する
半透明にはできない。
境界線がはっきりする。

90

ピクセル毎に透明度を指定できる。
境界を馴染ませられる。
Photoshopのレイヤマスクに似ている。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

透明処理(2)91

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

アニメーション92•

パラパラマンガのような形で、簡易的なアニメーションを扱える。

•

試験範囲の形式の中では、GIFだけが可能。

•

一応、PNGを拡張したAPNGとMNGやJPEGに関連するMotionJPEGという規格がある。(Webではほとんど使われていない)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

インタレース

93•

ファイル保存時にファイル先頭に飛び飛びの画素、後ろに残りの画素を保存する。

•

Webブラウザは届いたデータを使って徐々に表示させることで、ユーザの体感速度を向上させる。

•

JPEGには異なる仕組みで同様の効果が得られるプ
ログレッシブJPEGという機能がある。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

各形式のまとめ
圧縮方法

色数

JPEG

非可逆

フルカラー
モノクロ

なし

不可

GIF

可逆

インデックス

透明色

可

可

可逆

フルカラー アルファ値
インデックス
透明色

不可

可

なし

フルカラー
インデックス

不可

不可

PNG
BMP

透明化

なし

アニメ インタレース
可(プログレッシブ)※上図は一般的な使用方法です。規格としては、
上図以外のものもあります。
94

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題12
イラストをアニメーションさせる場合、どの画像形式を使用すべきか選択してください。
A. PNG
B. Jpeg
C. GIF
D. BMP

95

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web関連技術• JavaScript• 画像ファイルフォーマット

Base64• DataURI•• DataURI• セキュリティ

96

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Base64(1)97•

バイナリデータを表示可能なテキストデータに変換
する方法。

•

ASCIIテキスト(半角英数字+記号)しか扱えないシス
テム(メールなど)がまだ沢山残っているため必要。

•

メールに日本語や画像を含めるためには、ASCIIの印字可能文字の範囲にデータを変換する必要がある•

変換には変換表を使用する。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Base64(2)Base64 変換表

98

0

A

16

Q

32

g

48

w

1

B

17

R

33

h

49

x

2

C

18

S

34

i

50

y

3

D

19

T

35

j

51

z

4

E

20

U

36

k

52

0

5

F

21

V

37

l

53

1

6

G

22

W

38

m

54

2

7

H

23

X

39

n

55

3

8

I

24

Y

40

o

56

4

9

J

25

Z

41

p

57

5

10

K

26

a

42

q

58

6

11

L

27

b

43

r

59

7

12

M

28

c

44

s

60

8

13

N

29

d

45

t

61

9

14

O

30

e

46

u

62

+

15

P

31

f

47

v

63

/

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Base64 変換例
GIFファイルの場合、先頭に”GIF87a”という文字列が埋め込
まれています。そのうちの”GIF”をBase64で変換してみましょう。
•“GIF”を2進数で表現 (ASCIIコード)→01000111 , 01001001 , 01000110•

6bitずつに分割 (括弧内は10進表記)→010001(17),110100(52),100101(37),000110(6)•

変換表で変換→R0lG

99

後述のData URIの章で確認してみましょう
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Data URI

100•

HTML/CSSが読み込む外部ファイルの代わりに、データ(画像、スタイルシート、JavaScriptなど)をHTMLに埋め込むことが出来る機能。

•

HTMLに埋め込むことで全体のファイル数を減らし、サーバとの通信回数を少なくすることができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Data URIの書式
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
使用例 画像を表示する→<img src="data:image/gif;base64,R0lGODdhEAAQAPAAAP////8AACH/
C1hNUCBEYXRhWE1QCD94cGFja2V0ACwAAAAAEAAQAAACHoQfGceo38CbilHq7jQa9w+GYieNZZiRqRaxEbcxBQA7" >101

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題13
Base64についての説明で間違っているものを選択してください。
A. 画像にしか使用できない
B. 64文字でデータを表現する
C. 元データに比べると、データ量は4/3倍になる
D. メール送信にも使用される

102

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

Web関連技術• JavaScript• 画像ファイルフォーマット
• ディレクトリ・トラバーサル• DataURI• SQLインジェクション• セキュリティ• クロスサイト・スクリプティング• CSRF• HTTPヘッダインジェクション

103

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ディレクトリ・トラバーサル
Webクライアント

Webサーバhttp://省略/form.php?tmp=form1.html
header指定されたファイルを
eyecatch
埋め込み

A:
B:
C:
send

入力フォームform1.html
A:

yes

no

B:

footerform.php104

send

form2.html

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

ディレクトリ・トラバーサル
Webクライアント

Webサーバhttp://省略/form.php?tmp=/etc/passwd

非公開ファイルの内容が表示され、より悪質な攻撃に繋ってしまう。

headereyecatch

サーバのユーザ一覧
ファイル
root:x:0:0:root:/root:/bin/

入力フォームbin:x:1:1:bin:/bin:/sbin/no
daemon:x:2:2:daemon:/sbfooterform.php
105/etc/passwd

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

クロスサイトスクリプティング
Webクライアント

Webサーバhttp://省略/search.php?key=りんご

指定されたキーワードを表示

headereyecatch
検索:りんごりんごについて
製品概要:りんご
Q&A:りんごfootersearch.php
106

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

クロスサイトスクリプティング
Webクライアント

Webサーバhttp://省略/search.php?key=<form…
指定された<form>タグをそのまま表示してしまうと、ニセの問い合わせフォームを表示してしまう(スタイルを操作し、元の内容を隠すこともできる)

headereyecatchA:
B:

ニセの問い合わせフォー
ムのタグを指定する。
入力データの送信先を、攻撃者のサイトにしておけば、情報は盗み放題。

C:
send

footersearch.php
107

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

SQLインジェクション
Webクライアント

Webサーバhttp://省略/search.php?key=りんご

SELECT * FROM posts
WHERE text LIKE ʻ%りんご%ʼ;search.php

データベース
SQLを使用して、データベースから入力されたキーワードを検索

108

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

SQLインジェクション
Webクライアント

Webサーバhttp://省略/search.php?key=';DELETE…
SELECT * FROM posts
WHERE text LIKE ʻ%ʼ
;DELETE FROM posts;
SELECT * FROM posts ʻ%%ʼ；
search.php ʻ; で一度命令を閉じて、別の命 データベース
令を埋め込んでしまう。

109

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTTPヘッダインジェクション
攻撃者

攻撃用リンク
http://省略/redirect.php?url=本来のリダイレクト先<改行>Location: htt...
HTTP/1.1 302 Found
Location: http://本来のリダイレクト
先<改行>Location: http://攻撃用サイト

Webクライアント <!DOCTYPE html>

HTTP
HeaderHTTPヘッダのLocation
で転送先を指定。
複数ある場合は後の行が有効になる。

Webサーバ<html><head><meta charset="utf-8"><title>サンプル</title><link rel="stylesheet" href="style.css"></head><body>

HTTP</body></html>110

Content

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

エスケープ処理による対処
クロスサイトスクリプティングの場合

ＳＱＬインジェクション、HTTP• ユーザが入力したデータに含まれる記号などを置き替えること
ヘッダインジェで安全なデータに変更する
クションでは対処すべき記号が• HTMLに埋め込む場合、< > ” ʼ & といった記号があると入力さ異なるれたデータがHTM Lのタグや属性として処理されてしまうため、記号を変換する。(PHPならhtmlentitiesなどを使用する)

111

変換前

変換後

<

&lt;

>

&gt;

ʻ

&#039;“&quot;&&amp;<form> → &lt;form&gt;
Webブラウザの表示上は<form>と表示される

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

CSRF (Cross site request forgeries)
ログイン
ログアウトせずに他のサイトを閲覧

攻撃用ページ

攻撃者

表示を隠された<form>など。
<form>のaction属性を正規のURLにしておく

ログイン情報と共に意図しないデータを送信して、重要な操作を行なってしまう

112

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

問題15
ユーザの入力をそのままHTMLに書き出してしまうことで発生する脆弱性の名称を選択してください。
A. CSRF
B. HTTPヘッダ・インジェクションC. SQLインジェクション
D. クロスサイト・スクリプティング

113

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

質疑応答

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

本日の内容試験範囲• 試験概要• 試験範囲ネットワーク・サーバ関連技術• TCP/IP• DNS• HTTP• Webサーバ
Web関連技術• プロキシ• JavaScript• データベース• 画像ファイルフォーマット
• DataURI• セキュリティ

115

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/