その他のWeb関連技術

その他のWeb関連技術

ここまでで述べられてないWeb関連技術についてを述べる。

なお、ここでは具体例はあまり載せられていません。悪しからず。

文書 #

XHTML #

XHTMLとは、HTMLをXMLの文法で定義し直して書かれた文書である。

HTMLとの相違点は以下の通り。

  • 文書の先頭にXML宣言文が必要
  • 文字の大文字・小文字が区別される
  • 要素は必ず開始タグと終了タグで囲まれてないといけない

マイクロデータ #

マイクロデータとは、文書の意味や属性を示すデータを、メタデータとして文書に埋め込ませたものである。

マイクロデータを利用することで、検索エンジンなどのプログラムにWebページの詳しい情報を伝えることができる。

マイクロデータで、以下の3つの属性を使用して表現する。

  • itemscope ・・・ 意味付けブロックの開始の宣言
  • itemtype ・・・ データの種別(URL)
  • itemprop ・・・ データのプロパティ名

RDFa (Resource Description Framework in Attributes) #

RDFaとは、RDFによるメタデータをXHTMLで書かれた構造活文書に埋め込むための仕様である。

その前にRDFとは何か？についてだが、RDFはメタデータを表記するためのデータ形式の一つである。

(RDFの記載例は略)

一見マイクロデータと用途は同じに見えるが、RDFaはRDF(XML由来)を元にしているため、XML文書でも利用できるという特徴がある。

OGP (Open Graph Protocol) #

OGPは、Webページの内容を示した情報を、プログラムから読める形でWebページに付加しておくための仕様である。

活用例としてはSNSがある。OGPに対応したページにある「いいね!」ボタンなどをクリックすると、その情報が自分のSNSのページに記載されたり、または他のリコメンデーションなど、様々な機能に活用される。

データ操作 #

JavaScript #

JavaScriptというオブジェクト指向プログラミング言語があり、この言語で実装したスクリプトを、HTML文書に組み込んで使用することができる。

HTMLからJavascriptを利用するには、script要素を利用してHTML文書に直接書く方法（下例）と、

<script type="text/javascript">
 //Javascriptのコードを記述する
</script>

同じくscript要素のsrc属性にJavascriptのファイルを指定する方法（下例）がある。

<script type="text/javascript" src="test.js"></script>

DOM(Document Object Model) #

DOMとはHTML,XML文書にJavaScript等のプログラムからアクセスするためのAPIである。

JavaScriptを用いてDOMを利用する事で、文書を取得したり操作することが可能になる。

Ajax(Asynchronous Javascript + XML) #

Ajaxとは、ブラウザ内で非同期通信や動的ページ置き換え等を行う技術である。

AjaxはJavascriptのクラスであるXMLHttpRequestを利用して実現する。それを行なって通信結果をJavascriptでCSSで動的にWebページに反映する。非同期通信により、ユーザーがフォームなどに入力をしていてもバックグラウンドでデータを取得することが可能になる。

Ajaxで転送されるデータとしてはJSONがよく用いられる。

通信 #

セッション #

セッションとは、ユーザーがログインからログオフするまでの一連の通信のことである。

HTTPは状態を持たないステートレスなプロトコルであるため、ユーザーがあるサイトに今ログインしている状態なのかを判別する仕組みがない。そのため、画面操作をしているユーザーのログイン状態を判別する仕組みとしてこのセッションが設けられている。

セッションは、Cookieなどといった技術を用いて実現する。１度目のアクセスでWebサーバからブラウザにCookieが送信され、ブラウザはURLとそのCookieを紐づけて管理し、次のアクセスではそのCookieを送信する。

Webサーバはその受け取ったCookieを確認し、前回アクセスのあったユーザーと認識できれば、前回のアクセスの続きとして情報を送信する。

データURI #

データURIとは、画像などのデータをBase64を用いて暗号化し、HTMLやCSSに直接埋め込んだ際のURIの事である。

暗号化するので本来よりも容量が大きくなることがあるが、HTMLに埋め込まれるため、Webサーバへのリクエスト回数を減らすことが可能になる。

Webサイトへの攻撃手法 #

SQLインジェクション #

SQLインジェクションとは、入力フォームなどにSQL文を構成する値を入力させることで、アプリケーションに本来意図しないようなSQLを実行させ、データベースを不正に操作する攻撃手法のことである。

アプリケーションが使っているSQL文を推測する必要があるが、攻撃が成功してしまうとデータの改竄や消去、情報漏洩が発生する恐れがある。

対策としては、以下のような方法がある。

  • 入力値で特殊文字を受け付けないなどする
  • (開発言語により有無あるが)Prepared statement(事前にコンパイル可能なSQL文)を利用する

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

クロスサイトスクリプティングとは、ユーザが悪意のあるスクリプトを生成するWebサイトを閲覧したときに、そのサイトからユーザのブラウザにスクリプトが埋め込ませ、及びその状態で攻撃対象サイトに強制的に遷移させることで、ユーザやサーバに被害を与える攻撃手法である。

スクリプトが埋め込まれた状態で他の攻撃対象サイトに遷移させると、そのサイト上でスクリプトが実行され、個人情報取得やなりすましなどの攻撃をされる恐れが有る。

ブラウザ側でJavascriptを無効にすれば防げるが、Javascriptを利用するサイトが閲覧できなくなるためお勧めではない。

閲覧者側としてはブラウザのアップデートやセキュリティソフトの導入、サイト管理者側としては入力値のチェックなど、XSSに対応したアプリケーションを構築する必要がある。

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

クロスサイトリクエストフォージェリとは、ユーザがあるWebアプリケーションにログインしている(セッションを確立)時に、外部の攻撃者がそのユーザになりすまして、用意したHTTPリクエストを送信することで、ユーザの意図しない動作を行わせる攻撃手法である。

ユーザがWebアプリケーションにログインしている時に、外部の攻撃者が用意したサイトを閲覧すると、悪意のあるスクリプトを実行させることでセッションのデータ(Cookieなど)を盗み見られてしまう。それを利用してHTTPリクエストを作成し、Webアプリケーションに送ってしまうと、外部の攻撃者がそのユーザの状態でいろいろな操作を行えてしまう。

対策としてはWebアプリケーション側でHTTPリクエストを詳しく確認させたり、またはその他の照合情報などを利用してユーザのチェックを行うなどがある。

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

ディレクトリトラバーサルとは、URL等のパラメータで示されているファイルから../といったような親ディレクトリを示す文字列等を追加することで、本来Web利用者がアクセスできないようなファイルにアクセスしようとする攻撃手法である。

対策としては、ファイルのパーミッション(アクセス権)を適切に設定し、他ユーザがアクセスできないようにする等ある。

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

Webサイトには、ユーザへのHTTPレスポンスを生成する時に、そのHTTPヘッダの値を外部から入力されたパラメータを利用して生成する物が存在する。

そこに外部の攻撃者が任意の値を設定させることで、ユーザにレスポンスを送り意図しないような動作を行わせる攻撃手法のことを、HTTPヘッダインジェクションという。

例えば、HTTPレスポンスのLocationヘッダはURLを設定するが、このURLに"Set-Cookie:..“を付け足して設定すると、ユーザーに不正なCookieまでも送ってしまう。このように、HTTPヘッダを任意に設定することでユーザーに悪影響を及ぼす場合がある。

対策としては、HTTPヘッダを出力するAPIを使ってHTTPヘッダを作り出すなど行う。

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

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

統合脅威管理とは、ネットワークを複数の脅威から統合的に保護すること、及びそれを実現するための製品、システムのことである。

セキュリティに関するシステムといえばファイアウォール、アンチウイルス、VPN、フィルタリングなど色々あるが、それらを統合して1つのシステムとした物が統合脅威管理として挙げられる。

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

侵入検知システムとは、ネットワークからの不正アクセスを検知するシステムのことである。

種類としてはネットワークの通信内容を検査するネットワーク型IDSと、サーバに異常がないかを監視するホスト型IDSがある。

Webサイト、アプリケーションの構築手法 #

MVCアーキテクチャ #

様々なプログラムに応用できる汎用的な設計パターンのことをデザインパターンという。

MVCアーキテクチャとは、Webアプリケーションにおけるデザインパターンの1つであり、ソフトウェアを以下の3つに分けて設計する手法を指す。

モデル(Model) ・・ 業務処理など主要な処理を行う
ビュー(View) ・・ 画面などの表示処理を行う
コントローラ(Controller) ・・ モデルとビューの橋渡しを行う

イメージとしては、ビューがユーザーから入力を受け取り、処理依頼をコントローラに送る。その後、コントローラはモデルに処理を要求し、モデルはその処理を受け取って外部のDB塔を使い処理を完了させる。モデルは処理を完了すると、コントローラに通知する。通知を受け取ったコントローラは、処理結果をビューに送り出力させる、という流れで処理が行われる。

CMS(Content Management System) #

CMSとは、Webページをなすテキストや画像ファイルといったコンテンツを一元的に管理し、Webページの作成や更新が可能なソフトウェアの事である。

HTMLやCSSの知識がなくとも、コンテンツを用意すればCMSがWebページをビルドしてくれる。例としては、ブログサービスのWordPressや本ブログの元ともなっているHugo、またWikiなどがある。

画像ファイル #

画像ファイルの種類 #

画像ファイルの種類はいくつかある。以下にその一部を記載する。

BMP ・・ フルカラーに対応したWindowsの標準画像フォーマット。一般的に圧縮されないことが多くファイルサイズが大きくなるため、Webサイトでの使用は不適切。
GIF ・・ 256色まで対応する可逆圧縮の画像フォーマット。画質の劣化がないため、単純なイラストに向いている。アニメーションも作成できる。
PNG ・・ フルカラーに対応した可逆圧縮の画像フォーマット。GIFの代替として登場した。圧縮率はGIFよりは良いがJPEGには劣る。
JPEG ・・ フルカラーに対応した非可逆圧縮の画像フォーマット。ファイルサイズはより小さくできるが、非可逆圧縮のため画質はもとより低下する。多少の画質劣化が問題にならない写真に向いている。
SVG ・・ XMLで記述するベクターデータのフォーマット。拡大縮小しても画像が劣化しない。Javascriptによる制御も行える。

インターレース #

インターレースとは画像の表示形式の一つで、画像データの受信中に粗い解像度の画像を表示し、データを受信するに従って徐々に高解像度の画像を表示するという手法である。

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

Webサイトの集客と収益 #

Webサイトの集客・収益に用いられる手法についてを述べる。

SEO(Search Engine Optimization) #

SEOとは、検索エンジン最適化(Search Engine Optimization)の事であり、検索エンジンで検索した時に自分のWebサイトがなるべく上位に来るように工夫する事をいう。

簡単な方法としては適切なページタイトルを設定したり、マイクロデータやRDFaを設定するなどといった物がある。SEOを専門に行う業者も存在する。

検索ロボット #

検索ロボットとは、検索エンジンのデータベースを作成するために、全世界のWebページをダウンロードするプログラムである。

検索ロボットにとって分かりやすい記述をすると、SEOが行えやすい。逆に検索エンジンにヒットさせたくないときは、Basic認証や、robots.txtファイル(サイトをクロールされないように制御するファイル)を設定する。

Web広告 #

Web広告として、代表的なものは以下の通り。

ペイパークリック広告(PPC) ・・ 広告をクリックした回数に応じて課金される。
アドワーズ広告 ・・ 検索エンジンの検索結果に連動して表示されるPPC広告。
アフィリエイト広告 ・・ 成果報酬型のインターネット広告で、広告のクリック数、またその広告をもとに売上に繋がったなどの結果に応じて広告料が支払われる。

コンバージョンレート #

コンバージョンレートとは、Webサイトへのアクセス数やユーザー数のうち、収益に結びついた割合のことである。

ここでいう収益とは、商品購入や会員登録などのことを指す。（定義はWebサイトによって異なる）

ROI #

ROIは投資利益率(Return On Inversion)の事で、投資した資本に対して得られる利益の割合のことである。