技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

Posts in the ブラウザ category

Javascriptのエラーチェックやデバッグの方法で覚えたことがあったのでメモしておく。
デバッグの方法に関しては,各種ブラウザによって若干の差異があるので,今回はFirefoxを例にして説明する。
 

Javascriptのエラーチェック

Javascriptのエラーを確認するには,以下の2つの方法が存在し,どちらも行うことが望ましい。
 

JSLintによるエラーチェック

JSLintと呼ばれるJavascriptの構文チェックツールが存在する。私は,エディタはVimを使っているので,syntasticというVimプラグインとJSLintを連携させることで,VimでJavascriptを編集しながら随時構文チェックを行っている。
 
HomebrewでJSLintをインストールするには以下のコマンドを実行する。

brew install jslint

 
VimにSyntasticを導入した状態で.vimrcに以下の内容を記述することで,JSLintによる構文チェックを有効化することができる。

let g:syntastic_mode_map = { 'mode': 'active',
      \ 'active_filetypes': ['javascript'],
      \ 'passive_filetypes': [] }
let g:syntastic_javascript_jslint_conf = "--white --undef --nomen --regexp --plusplus --bitwise --newcap --sloppy --vars"

 

コンソールによるエラーチェック

Firefoxを開いた状態で,MacではCommand + Alt + I,WindowsではCtrl + Shift + Iというショートカットキーを入力することで,デベロッパーツールを開くことができる。デベロッパーツールの中に,コンソールというメニューがあるので選択する。
 
Javascriptの構文にエラーがあり,Firefoxが解釈できない場合には,コンソールにエラーログが出力される。
 

Javascriptのデバッグ方法

Javascriptのデバッグには,主に以下の2つの方法が存在する。
 

console.log()によるデバッグ

console.log()というJavascriptの関数をJavascriptのソース内に記述しておくことで,Firefoxのコンソールに任意のログを出力することが出来る。
 
console.log()の使用例

console.log('犬可愛いよー!');

 

ブレークポイントによるデバッグ

FirefoxやGoogle Chromeには,Javascript実行時にブレークポイントを使用する機能が用意されている。
ブレークポイントを使用することで,Javascriptのコード上の任意の位置で処理を一時停止することができ,この状態で,一行ずつ処理を進めたり,変数の中身を監視することが出来る。
 
まずは,Firefoxを開いた状態で,MacならCommand + Alt + I,WindowsならCtrl + Shift + Iでデベロッパーツールを開く。ツールの中のデバッガを選択する。
次に,左側のペインに表示されているソースというタブの中のリストから,対象にしたいJavascriptファイルを選択する。
 
breakpoint_lecture_source_callstack
 
すると,真ん中のペインに,選択したJavascriptファイルのソースが表示される。ブレークポイントを設定するには,ブレークポイントを設定したい行の行番号をクリックする。
 
breakpoint_lecture_breakpoint
 
これでブレークポイントの設定が完了した。続いて,Command + RやF5キーなどでページの再読み込みを行う。
ページの再読み込みが完了すると,ブレークポイントを設定した行でJavascriptの処理が一時停止していることが確認できる。
 
この状態から処理を進めるには,ステップ移動を行う必要がある。ステップ移動には,ステップオーバー・ステップイン・ステップアウトの3つの移動方法が用意されており,いずれかの移動を手動で行う必要がある。
 
breakpoint_lecture_step
 
ステップオーバー・ステップイン・ステップアウトのそれぞれの意味について説明する。
 

ステップオーバー

現在の行を実行し、次の行に進める。もし現在の行に関数呼び出しがあったとしても関数へジャンプせずに関数の処理を行い、次の行に進む。
 

ステップイン

現在の行を実行し、次の行に進める。もし現在の行に関数呼び出しがあった場合、その関数にジャンプし、呼び出した関数の内部に進める。
 

ステップアウト

ステップインで,呼び出した関数の内部に進んだ場合,物凄く長い行の関数だった場合などに,その関数から抜けたいときに使用する。関数の最終行まで進める。
 
上記3つの移動方法を使って,ステップ移動を行いながら,右側のペインにて,各変数の中身を監視することが出来る。更に,変数の値をクリックすることで変数の値を書き換えることも出来る。
 
breakpoint_lecture_variables
 

コールスタックとウォッチ式について

ステップ移動と変数の監視以外に,重要な機能としてコールスタックとウォッチ式がある。長くなりそうなので,ここでは触り程度に説明する。
 
コールスタックとは,現在の関数がどこから呼ばれているかを教えてくれる機能である。ステップインやステップオーバーを多用していると,今どこにいるか分からなくなるときがある。そういったときは,これを見ることで,現在見ている行はどこから呼び出されたかを確認することが出来る。
 
ウォッチ式とは,ソース中の任意の変数をあらかじめ登録しておくことで,変数がスコープから外れてしまった場合でも監視を続けることが出来る機能である。Firefoxのデバッガは基本的には,現在の行のスコープにある変数,もしくはグローバルスコープしか監視してくれない。グローバルスコープから対象の変数を確認しても良いが,グローバルスコープ上から監視するのは非常に煩雑になっており,面倒である。なので,特定の変数を常に監視したいときには,ウォッチ式を使用する。
 
 
以上
 
 
参考
JavaScriptのデバッグ – ブレークポイントの使用 | CodeGrid

CSSのスタイル適用には,優先順位があることを先日知った。
 

セレクタの種類による優先順位

基本的には後から読み込まれたスタイルが優先されて適用されるが,それは獲得ポイントが同じであった場合に限る。
実は,セレクタの種類によって「ポイント」というものが割り振られており,この「ポイント」をより多く獲得しているスタイルが優先して適用される。
 

セレクタごとのポイント

ポイントの獲得は,id,classなどのセレクタによって行われる。

セレクタ ポイント
id 100
class 10
p,h1などの要素 1
*(全称セレクタ) 0

 

ポイント獲得の例

/* 100ポイント */
#sample {}

/* 10ポイント */
.sample {}

/* 1ポイント */
p {}

/* 0ポイント */
* {}

/* 110ポイント */
.sample #sample {}

/* 12ポイント */
p #sample li {}

 
 
以上
 
 
参考
CSSの優先順位~CSSテクニック~

XSS脆弱性への対策方法について勉強した。サニタイズ言うなキャンペーンにも目を通した。Webアプリケーションのセキュリティに詳しい,高木浩光先生や徳丸浩先生の考え方を含めながら,まとめてみる。
 

XSSとは

ソフトウェアのセキュリティホールの一つで,Webサイトの訪問者の入力をそのまま画面に表示する掲示板などのプログラムが,悪意のあるコードを訪問者のブラウザに送ってしまう脆弱性のこと。
悪意を持ったユーザがフォームなどを通してJavaScriptなどのスクリプトコードを入力した時に,プログラム側に適切なチェック機構がないと,そのスクリプト内容がそのままHTMLに埋め込まれ,ページを閲覧したコンピュータでスクリプトが実行されてしまうことがある。
 

サニタイズとは

Webサイトの入力フォームへの入力データから,HTMLタグ,JavaScript,SQL文などを検出し,それらを他の文字列に置き換える操作のこと。「無害化」とも呼ばれ,サニタイジング操作により,入力データ中に含まれる悪意のあるHTMLタグ,JavaScript,SQL文などが解釈・実行されることを防ぐ。
 

サニタイズはするべきではない

ここまで見て,まず考えるのが「XSS対策としてサニタイズすれば良いのではないか」ということであるが,サニタイズはXSS対策の保険的なものであり,本来,サニタイズは推奨されない。
 
日本における「サニタイズ」という言葉の持つ意味やニュアンスを厳密に定義すると「入力処理で受け取ったデータに含まれる有害(別のリテラルで解釈可能)なメタ文字に対して,エスケープ処理を行うこと」となる。
ここで注意したいのは,「サニタイズ」は「バリデーション」とは全く異なるという点である。バリデーションを行うことは一般的なので,ここでは深く説明はしないが,「バリデーション」という言葉の定義は「入力処理で受け取ったデータに対して,データの妥当性をチェックすること」であり,サニタイズとは異なる。
 
では,何故サニタイズをしてはいけないのか,ということについての理由を説明する。まず,大前提として「サニタイズ」は間違った習慣が根付いてしまったものであり,本来は推奨されるべきではない,ということを念頭に置いてほしい。
 
サニタイズが推奨されないことには,以下の2つの理由がある。

  • プログラマの都合で,ユーザーが入力した内容を勝手に改変するべきではない
  • サニタイズが行われると,システムが汚染される

以下,それぞれの理由について説明する。
 

プログラマの都合で,ユーザーが入力した内容を勝手に改変するべきではない

いくらセキュリティ上の危険があるからといって,ユーザーが入力した内容を勝手に改変してよい理由はない。もし,メタ文字のエスケープが必要になる入力が行われたとしたら,それは本来はエラーにするべきである。
 

サニタイズが行われると,システムが汚染される

サニタイズは「スクリプトで受け取ったデータに含まれる,<>&"といったメタ文字を,JavaScriptのリテラルとして解釈できてしまう」という問題への付け焼刃的な対策方法である。だが,必ずしもXSSへの対策にサニタイズを行う必要はなく,出力処理で適切にエスケープ処理を行うことで,XSS脆弱性を回避することが可能である。
ここで大切なのは「サニタイズ」という言葉の定義を正しく理解することである。「サニタイズ」とは「入力処理で有害なメタ文字をエスケープ処理すること」である。「出力処理で有害なメタ文字をエスケープすること」を「サニタイズ」とは呼ばない。
 
ここで,どうして「入力処理」ではなく,「出力処理」でメタ文字をエスケープすることにこだわるのか,ということについて説明する。その理由は,メタ文字のエスケープ処理がシステムにもたらす「汚染」とも呼ぶべき影響範囲をなるべく小さくするためである。
 
ここでの「汚染」とは,入力データがエスケープ処理によって,本来のデータとは異なるデータに書き換えられることによって発生する,システムへの害のことを指す。
もし,入力処理でメタ文字のエスケープ処理を行った場合,エスケープ処理の影響は,システム内部やDBにまで波及する。つまり,システム内部やDBにて,エスケープ処理されたデータを,本来のデータに戻すための2次3次的な変更が発生することになる。
一方,出力処理でメタ文字のエスケープ処理を行った場合,エスケープ処理の影響はシステム内のどこにも波及することはない。
 
以上の理由から,XSS対策に,サニタイズ(入力処理でのメタ文字のエスケープ処理)は推奨されない。XSS対策には,出力処理でのメタ文字のエスケープ処理を行うべきである。
 

まとめ

  • サニタイズとは,「入力処理でメタ文字をエスケープすること」である
  • XSS脆弱性対策には,サニタイズは行わず,出力処理で適切にエスケープ処理を行う

 
 
以上
 
 
参考
クロスサイトスクリプティングとは 【 XSS 】 【 Cross Site Scripting 】 – 意味/解説/説明/定義 : IT用語辞典
サニタイジングとは 【 sanitizing 】 〔 サニタイズ 〕 – 意味/解説/説明/定義 : IT用語辞典
高木浩光@自宅の日記 – WASF Times版「サニタイズ言うな!」
XSS再入門
XSS: 今こそXSS対策についてまとめよう – 徳丸浩の日記(2008-08-22)

SSLについてよく分かっていなかったので勉強した。忘れないように備忘録として残しておく。
 
SSLとは

Netscape Communications社が開発した、インターネット上で情報を暗号化して送受信するプロトコル。現在インターネットで広く使われているWWWやFTPなどのデータを暗号化し、プライバシーに関わる情報やクレジットカード番号、企業秘密などを安全に送受信することができる。
 
SSLは公開鍵暗号や秘密鍵暗号、デジタル証明書、ハッシュ関数などのセキュリティ技術を組み合わせ、データの盗聴や改ざん、なりすましを防ぐことができる。OSI参照モデルではセッション層(第5層)とトランスポート層(第4層)の境界で動作し、HTTPやFTPなどの上位のプロトコルを利用するアプリケーションソフトからは、特に意識することなく透過的に利用することができる。SSL 3.0をもとに若干の改良が加えられたTLS 1.0がRFC 2246としてIETFで標準化されている。

 

疑問

・SSLは無料で利用できないのか
Googleで「SSL」を調べると、まず出てくるのが日本ベリサイン株式会社のページ。ここではSSLを利用するにはお金がかかると言われる。
 

SSLは無料で使うこともできるがいろいろと問題がある

調べてみると、どうやら意外と簡単に自分でSSLの認証局を作ることができるらしい。では、どうしてベリサインなどの有料SSLがメジャーになっているのか。
 
それは信頼性に問題があるからだった。
 
SSLを使った通信には以下の3つの特徴があるのだが、これの2つ目「サーバ認証」には信頼性が伴わなければいけない。そこで、セキュアなシステム構築の実績が高いベリサインなどが選ばれているということだ。
 

  • 暗号化
  • サーバ認証
  • 改竄検出

 
SSLを用いた通信を利用するには認証局から発行された証明書をあらかじめブラウザが信頼するように設定しなければならない。
SSLで通信を開始すると、ウェブサーバから受け取ったサーバ証明書と認証局から発行された証明書をブラウザが検証して正当性を確認する。
ブラウザは登録された認証局から発行された認証書しか信頼しないように設定されている。デフォルトでは、ブラウザはベリサインなどの世界的に有名な認証局しか信頼しないように設定されているので、自分で作った認証局から発行された証明書を使う時はブラウザにあらかじめ認証局から発行された証明書を信頼できるものとして登録しておかないと警告されてしまう。
 

まとめ

・お金は払いたくないけど、個人でどうしてもSSLを利用したい時はSSL認証局を作ることもできる。
 
・不特定多数の人間が利用するウェブサービスでSSLを使いたい時は、ベリサインなどの世界的に有名なSSLサーバ証明書を発行してくれるサービスを利用する。
 
 
SSLの詳しい仕組みについてはネット上に流れている知識だけではなく、本を1冊読んだ方が良さそうなので仕組みが完全に理解できたらまたまとめる。
 
 
参考
日本ベリサイン株式会社 暗号の歴史
SSLの仕組み | トラスティワークス
高度なセキュリティ設定 – Chrome ヘルプ
認証局を立ててぼろもうけしたいんですが>無理な理由を理解しよう
オレオレ認証局の作り方~SSL証明書を無料で作る方法 on CentOS 5

Vimの操作に普段から慣れておく為にFireFoxにVimperatorを導入してみた。VimperatorはVim風の操作でFireFoxを操ることが出来るアドオンである。
 
以下、Vimperatorの基本操作をメモしておく。
 

Vimperatorの基本操作

Vimperatorの基本操作
キー 説明
<Esc>,<C-[> ノーマルモードへと移行する。Esc、もしくはCtrl+[で行う。
: ノーマルモードの状態からコマンド入力モードへと移行する。
/ ノーマルモードの状態からページ内検索モードへと移行する。ページ内検索モードでは、検索ワードを入力した後に[Enter]を押すことで検索を確定させる。検索確定後は、”n”で前方検索、”N”で後方検索を行うことが出来る。
f ノーマルモードの状態からhintモードへと移行する。ページ内のリンク(アンカー要素)と一部の要素に番号を割り振り、入力された番号と同じ要素にカーソルを合わせる。
h,j,k,l カーソルを左,下,上,右に動かす。Vimpratorではカーソルキーでも同様の操作ができる。
y ヤンク。現在開いているタブのURLをコピーする。
H,L “H”で前のページへ移動。”L”で次のページへ移動。
tabopen コマンド入力モードの状態で入力する。新しいタブを開く。
tabclose コマンド入力モードの状態で入力する。タブを閉じる。”d”でも同様の操作ができる。
<C-Tab> ノーマルモードの状態で入力する。Ctrl+Tab。次のタブへ移動する。
<C-Shift-Tab> ノーマルモードの状態で入力する。Ctrl+Shift+Tab。前のタブへ移動する。
t ノーマルモードの状態で入力する。tabopenコマンドへのショートカット。新しいタブを開いて検索する時に便利。”tabopen google 検索ワード”のように打ち込むと検索が出来る。
o ノーマルモードの状態で入力する。openコマンドへのショートカット。現在のタブで検索する時に便利。”open google 検索ワード”のように打ち込むと検索が出来る。
u ノーマルモードの状態で入力する。閉じたタブを復元する。”undo”の頭文字。
a ノーマルモードの状態で入力する。bmarkコマンドへのショートカット。現在開いているページのブックマークを追加できる。”add”の頭文字。
bmarks コマンド入力モードの状態で入力する。”bmarks”と入力した後に”Tab”で一覧からページを選択できる。その後、”Enter”で確定する。
gh ホームに設定されているウェブサイトにジャンプする。

 

_vimperatorrcを設定する

vimperatorをカスタマイズしたい時は_vimperatorrcに設定を記述することが出来る。
 
_vimperatorrcを作成するには、コマンドモードにて”:mkvimperatorrc”や”:mkv”と打ち込めば良い。
 
_vimperatorrcが作成された場所は、Shift+^にて表示することができる。
 
 
自分の場合は、_vimperatorrcに以下の記述を追加して、Backspaceキーで前のページに戻る機能を無効化している。
コマンド入力モードにてコマンドを入力している際に、誤字に気付いてBackspaceキーで消していると、勢い余ってページまでバックしてしまうからだ。
この記述でBackspaceキーで前のページに戻る機能のみを無効化できる。
 

"Backspaceを無効化する。
map <BS> ""
"正常に読み込めたことを通知する。
echo "_vimperatorrc sourced"

 
 
以上
 
 
参考
vimperatorrc(rcと略す) 作り方、場所、開き方
[firefox][vimperator]Vimperatorでまず覚えたいコマンドとか一覧