Web関連技術の概要 | HTML5プロフェッショナル認定試験レベル1(ver.2.0)試験対策

HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。

今回は、試験範囲でもある「Web関連技術の概要」のまとめ。

ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTMAPIL技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。

文書の構造

XHTML

HTMLXMLの文法で定義し直したものがXHTML。HTMLとの主な相違点は次の通り。

・文章の先頭にXML宣言文が必要(推奨)

・文字の大文字/小文字が厳密に区別される(要素名、属性名は小文字で定義されているため、小文字での記述が必須

・要素は必ず開始タグ終了タグで括られていなければならない

◆XHTMLの歴史

時期 バージョン 説明
2000年1月 XHTML1.0 HTML4.01を再定義したもの(2002年8月に2nd Editionに改訂)
2001年5月 XHTML1.1 機能がモジュール化されたXHTML(2010年11月に2nd Editionに改訂)
2006年~ XHTML2.0 Working DraftW3Cは2009年7月3日に策定の打ち切りを決定
2014年Q4 XHTML5 HTML5仕様の1.6章にXMLでの記述が含まれる

HTML5においてもXHTMLの記述を用いることができる

HTML5には2種類の文法がある。ひとつはMIMEタイプ「text/html」で配信するページ向けのHTML構文で、通常HTML5はこちらを指す。もう一つはMIMEタイプ「application/xhtml+xml」などで配信するページ向けのXHTML構文で、XHTMLを指し、この場合XMLの仕様に従うことになる。

マイクロデータ

マイクロデータとは、文書の意味や属性を伝える構文の一つ。元々はHTML5の仕様として検討されてきたが、別仕様として独立。(http://www.w3.org/TR/microdata/)

HTMLページはページの「構造」を表すのに対し、マイクロデータはページの「属性」を表す。マイクロデータを利用すると、検索エンジンなどのプログラムにWebページの文書が持つ情報やデータなどの「属性」や「意味」を伝えることができるようになる。

マイクロデータでは次の3つの属性を利用する。
itemscope:意味付けブロックの開始の宣言
itemtype:データの種類(URL)
itemprop:データのプロパティ名

RDFa

RDFaとはResource Description Framework in Atributesの略で、RDFによるメタデータをXHTMLで書かれた構造化文書に埋め込むための仕様。Web上のHTML文書にインラインで注釈を追加するためのシステムとして、Googleをはじめとする検索エンジンによってサポートされている。マイクロデータと用途が競合するが、RDFaはXML技術が由来であるRDFを元としているため、XML文書全般でも利用可能。また、RDFaはW3Cが勧告している。

◆ RDFa 1.1 Primer   :RDFaのチュートリアルドキュメント
◆ RDFa Core 1.1      :RDFaの仕様
◆ XHTML+RDFa 1.1:XHTML文書でRDFaを利用する際の仕様
◆ HTML5+RDFa 1.1:HTML5文書でRDFaを利用する際の仕様
◆ RDFa Lite 1.1       :必要最小限なRDFaの仕様

RDFa Liteの属性例
◆ vocab:使用する語彙を指定する属性
◆ typeof:語彙で定義されたクラスを指定する属性
◆ property:プロパティを指定する属性

OGP(Open Graph Protocol)

OGPは、あるWebページがどのような内容かという情報を、プログラムから読める形でWebページに付加するための仕様OGPにしたがって情報が付加されたページは、プログラムにより簡単に情報を展開することができる。

たとえばOGPに対応したページに設置された「いいね」ボタンをクリックすると、自分自身のFacebookのウォールにOGPの情報が書き込まれるのと同時に、友達のニュースフィードに反映される。

Facebook / mixi / GREE / Google+ などが対応している。

データの操作

JavaScript

JavaScriptとは、プロトタイプベースのオブジェクト指向プログラミング言語。広義ではECMAScriptの各実装の総称として使われるが、狭義では、Mozillaが仕様策定し実装したスクリプト言語を指す。

主なWebブラウザが実装しているJavaScriptは、ECMAScriptに準拠している。

ECMAScriptは、Ecma InternationalECMAScript(ECMA-262)として標準化されている。

HTMLからJavaScriptを利用するには2つの方法がある。1つ目は、script要素の内容としてHTML文書内へ直接記述する方法。2つ目は、script要素src属性で外部スクリプトを指定し読み込む方法

HTML4.01ではtype属性が必須だが、HTML5では、type属性が「text/javascript」の場合省略可能

DOM

DOMとは、Document Object Modelの略称で、HTML文書、XML文書の要素にプログラムからアクセスするためのAPI。JavaScriptを用いてDOMを操作することにより、文書を取得・変更したり、要素の値を動的に変更することが可能。DOMはツリー構造で表すことができる。

Ajax

AjaxとはAsynchronous JavaScript + XMLの略で、Webブラウザ内で非同期通信と動的ページを書き換えなどを行う技術Google MapsGoogle suggestなどのAjaxを利用したWebアプリケーションが公開され注目される技術になった。

AjaxJavaScriptの組み込みクラスであるXMLHttpRequestを利用して非同期通信を行い、通信結果をJavaScriptCSSで動的にWebページに反映する。

Ajaxで転送されるデータにはJSON(JavaScript Object Notation)がよく用いられる。

通信

セッション

ネットワーク通信でログイン(接続)からログオフ(切断)するまでの一連の通信のことを指す。

HTTPは状態を持たないステートレスなプロトコルであり、画面遷移が同一ユーザーによるものか否か判断する仕組みがない。このことは複数ページの遷移が必要なWebアプリケーションには不都合なため、一連の通信をセッションとして扱う。

セッションを実現するための仕組みとして、クッキーURL rewritingがある。

一度目のアクセスでWebサーバからCookieが送信される。

WebブラウザURLとそのクッキーを紐づけて管理し、次回のアクセスではそのクッキーを送信する。

Webサーバは受け取ったクッキーを確認し、前回アクセスのあったクライアントと認識することができれば、前回アクセスの続きとして情報を送信する。

これで、本来別々の通信を連続する一連の処理として扱っている。

URL Rewritingは、URLのパラメータとしてセッション情報を送る機能。クッキーが利用できない場合でも使用できる点がメリットだが、セキュリティ的には問題があるため、利用は慎重に検討する必要がある。

データURI

画像のデータ等をBase64でエンコードし、HTMLやCSSに直接埋め込んだ際のURIをデータURIと呼ぶ。

Base64化するのでオリジナルのデータサイズよりサイズが大きくなるが、HTMLに埋め込まれるため、サーバへのリクエスト回数を減らすことができる

Base64

64種類の文字(英数字と+/の2種の記号)パディング用の「=」記号により、マルチバイト文字やバイナリデータを扱うためのエンコード方式

アルファベットの大文字(A~Z)、小文字(a~z)、数字(0~9)、記号(+,/) の64文字、 とパディング(余った部分を詰める)のための記号として‘=’がこの方式に用いられる。この変換によってデータ量は約33%程度増加する。

電子メールで添付ファイルを送るときやBasic認証データURIなどでBase64が利用される。

Webサイトへの不正な攻撃手法

近年Webサイトへの攻撃は増加の一方であり、日本でもサイトの改ざん攻撃が多発している。代表的なWebサイトへの攻撃手法は下記の通り。

SQLインジェクション

アプリケーションの意図しないSQLを実行し、データベースを不正に操作する攻撃

Webアプリケーションの多くはフォームに入力された値を元にSQL文を組み立てて実行するが、その組み立て方に問題がある場合、フォームにSQL文となるような不正な値を入力することで任意のSQL文が実行され、情報の改ざん、消去、情報漏洩が発生するおそれがある。

対策

SQLを埋め込む箇所で特殊文字を適切にエスケープする。

開発言語の用意するprepared statement(事前にコンパイル可能なSQL文)を利用する。

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

Webサイトには利用者の入力を利用して表示するものがあるが、その出力処理に問題がある場合に悪意あるスクリプトが埋め込まれ、ユーザーやサーバに被害を与える攻撃。

攻撃対象サイトにXSS脆弱性がある場合、罠サイトから攻撃対象サイトへ遷移させるとともにJavaScriptを含むサイトを生成するようにすることで、被害者に攻撃対象サイト上でJavaScriptを実行させている。

これにより、なりすまし秘密情報を取得されるおそれがある。

対策

入力値のチェックをし、不正な入力を受け付けない。

特殊文字のサニタイジング(無害化)をする。

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

クロスサイト・リクエスト・フォージェリ(CSRF)も、代表的な脆弱性として知られる。XSSは動的なWebサイトにおける入力フォームの脆弱性だが、CSRFはWebアプリケーションのセッション管理に関する脆弱性のことである。

セッションとはWebアプリケーションとWebブラウザー間で、ページの状態を管理するための共通チケットのようなものだと考えるといいだろう。Webアプリケーションにこの脆弱性があり、かつユーザーがそのWebサイトにログインしている場合に攻撃を受けてしまう。

まず、ユーザーがいつも通りWebサイトにアクセスしログインをすると、WebサイトからセッションID(Cookie)が発行される。次に、攻撃者は何らかの方法で正規のWebサイトに偽装した偽サイトへユーザーを誘導する。ユーザーが知らずに正規Webサイトへの攻撃用リクエストを含んだURLをクリックすると、ブラウザーから正規WebサイトのセッションIDが付与された状態で攻撃リクエストが送信されてしまう。

Webアプリケーション側にCSRFの脆弱性がある場合、この攻撃リクエストを正しいリクエストだと誤認してしまい、本来はログインしなければできないような処理、例えばアカウント情報の変更や入出金などの操作が不正に行われる。この攻撃の厄介な点は、ユーザーの知らないところでなりすましによる操作が実行されてしまうことだ。ユーザーはCSRFによって犯罪に巻き込まれたことを後になってから知ることになる。

対策

HTTPのRefererを取得し、外部サイトからPOSTリクエストを遮断する。

ブラウザから自動で送信される値のみでユーザーを判断せず、別の照合情報を利用する。

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

パラメータに親ディレクトリを表す文字列(../)を含め、Webサーバ上にある、Web利用者がアクセスできないはずのファイルにアクセスする攻撃

対策

1つ上の階層を指す ../ などのパスを絶対パスに変換し、Web利用者がアクセス可能なファイルであることを確認する。

ファイルのアクセス権を正しく設定する。

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

Webサイトには、リクエストに対するレスポンス生成において、レスポンスヘッダの値を、外部から入力されたパラメータを利用して生成するものがある。そのレスポンスヘッダ生成処理に問題がある場合、ヘッダ行を挿入し、不正な動作を行わせる攻撃手法。

対策

開発言語が提供するHTTPヘッダ出力用のAPIを使用する。

改行コード(HTTPヘッダの特殊文字)をエスケープする。

ネットワーク上の脅威対策

Webアプリケーションを公開するにあたり、ネットワーク上の脅威に対する対策は不可欠なものになっている。

統合脅威管理(Unified Threat Management: UTM)

ネットワークを複数の脅威から統合的に保護する手法、もしくは製品を指す。ファイアウォール、VPN機能、アンチウイルス、不正侵入防御、コンテンツフィルタリングなどを1つの製品で処理できる。機器管理負担軽減や導入コスト削減に効果が期待できる。

Webサイト改ざん検知の手法

ネットワークに接続している限りWebサイト改ざんの可能性はあるため、改ざんを早期に検知する必要がある。IPAでは検知の方法として次を推奨している。

・オリジナルのHTMLファイルとサーバーのHTMLとを比較。

・HTMLソースをセキュリティソフトでスキャン。

・FTPアクセスログを確認。

侵入検知システム(Intrusion Detection System: IDS)

ネットワークからの不正アクセスを検知するシステム。ネットワークの通信内容を検査するネットワーク型IDSと、サーバに異常がないかを監視するホスト型IDSがある。

Webサイトやアプリケーションの制作

MVCアーキテクチャ

様々なプログラムで再利用できる汎用的な設計パターンのことをデザインパターンという。MVCアーキテクチャはそのデザインパターンの1つ。

ソフトウェアを、
業務処理を行うモデル(Model)
表示処理を行うビュー(View)
モデルとビューを操作するコントローラ(Controller)
の3つに分けて設計する手法を指す。

ビューはユーザー操作の受付や画面表示などの表示周り、モデルは主要処理、コントローラはビューからの入力によりモデルに処理を依頼し、処理結果の表示をビューに依頼する。

CMS

CMSとはコンテンツマネジメントシステムのことで、コンテンツ(テキストや画像)を一元的に管理し、Webページの作成や更新が可能なソフトウェアを指す。HTMLやCSSなどの技術的な知識が少なくても、コンテンツを用意すればWebページが作成可能となるように支援するソフトウェア。代表的なCMSとして、BlogやWikiソフトウェアがある。

画像について

画像ファイルフォーマット

BMP

BMPはフルカラーに対応したWindowsの標準ビットマップ画像フォーマット。一般的に圧縮されないことが多くファイルサイズは大きくなりすぎるため、Webサイトでの使用は不適切

GIF

256色までに対応した可逆圧縮の画像フォーマット。サポート色は少ないが、画質の劣化がないため、単純なイラストなどに向いている。透過色を用いた透過GIF、複数コマを結合したアニメーションGIFも存在する。

PNG

フルカラーに対応した可逆圧縮の画像フォーマット。GIFの代替として登場した。圧縮率はGIFよりよいが、JPEGには劣る。透過色を用いることはできるが、GIFのようなアニメーション機能はない。

JPEG

フルカラーに対応した非可逆圧縮の画像フォーマット。ファイルサイズは小さくなるが、非可逆圧縮のため画質は元より劣化する。多少の画質劣化が問題にならない写真に向いている。

SVG

XMLで記述する、ベクターデータの画像フォーマット。拡大・縮小をしても画像が劣化しない。図形やアイコン・文字などの表現に適している。またJavaScriptによる制御も行うことができる。

インターレース

画像の表示形式の一部。データ受信途中に粗い解像度の画像を表示し、データを受信するにしたがって徐々に高解像度の画像を表示する。

画像サイズに対して回線が低速な場合でも、早くから画像の全体像をつかめる利点がある。

インターレースは、GIF・PNGで使えるJPEGにはインターレースに似た「プログレッシブJPEG」を設定することができる。

Webサイトの集客・収益

SEO

検索エンジン最適化(Search Engine Optimization)のこと。検索エンジン最適化とは、検索エンジンの上位に自らのWebサイトが表示されるようにする適切な工夫を指す。

検索ロボット

検索エンジンのデータベースを作成するために、全世界のWebページをダウンロードするプログラム。検索ロボットにとってわかりやすい記述をすることで、ある程度SEOが可能となる。

一方、検索エンジンにヒットさせたくないページがある場合は次の対策をするとよい。

■特定のメタ要素<meta name=”robots” content=”noindex,nofollow”>

■robots.txtの記述

■.htaccessの設定

■Basic認証の利用

Web広告

Web広告として代表的なものは以下の3種類。

ペイパークリック公庫k(Pay Per Click広告 – PPC広告)

広告の掲載だけでは費用が発生せず広告のクリック数に応じて課金されるシステムの広告。

アドワーズ広告

検索エンジンの検索結果に連動して表示されるPPC広告。単にGoogle検索結果に表示されるPPC広告を指す場合もある。

アフィリエイト広告

成果報酬型のインターネット広告。広告のクリック数や売り上げ数などの何らかの成果に応じて広告料が課金されるシステム。

コンバージョンレート

Webサイトへのアクセス数やユニークユーザー数のうち、どの程度が収益(商品購入、会員登録など)に結びついたかを示す割合。

ROI

投資利益率(Return On Investment)の略で、投資した資本に対して得られる利益の割合。

>おとママのお買得商品×美容×好きなもの

おとママのお買得商品×美容×好きなもの

現在子育て中で忙しくしていますが、 自分が好きでいいなと思った物や 私が実際に使っていいと思った物、またセールなどでお得な商品などを紹介しています。よかったらたちよってみてください✨

CTR IMG