技術ブログ - 毎日が成長！

‘ツール’ タグのついている投稿

XSS Me 実行結果のレポートについてまとめてみた

2011年2月10日 by takahashi

はじめまして。開発・運用部の高橋です。

今回はXSS脆弱性対策のツールである XSS Me の実行結果のレポートについてまとめました。使い方については既にまとめている方々がいらっしゃいますが、レポートの見方についてはなかなかないんですよね。そこで、ここではレポートの見方を中心にお話します。

XSS Me とは

まず始めに XSS Me について簡単な説明を。 XSS Me は Firefox のアドオンで、XSS脆弱性の対応状況を調べることができるツールです。 テストの実行から実行結果のレポート出力まで、全てブラウザ上でおこなえるのが特徴です。

入手方法と使い方

さて、肝心の使い方に関してですが、先に述べたように既に有益な情報がありますのでそちらをご覧ください。

上記サイトを参考にテストの実行まで終わりましたら、次はテスト結果のレポートです。

レポートの見方

テストが完了すると、下記画像のようなレポートが別タブで出力されます。それでは上から順に説明します。

XSS Heuristic Test Results

XSSの危険性のある記号について、それぞれエスケープ等の処理がされているか表示されます。レポートに書かれている通りですね。 なお、テストの対象となる記号ですが、オプションから追加・削除がおこなえます。

XSS String Tests Summary (xxx tests executed)

この項目が今回のメインとなる部分です。 ここには実行されたテストの結果概要が表示されます。 全xxx件のテスト結果が、Passes、Warnings、Failuresの3項目に分類されます。ここではFailuresはありませんが、もし見つかった場合には赤色で表示されます。 以下、各項目の説明です。

項目 内容
Passes
  • テストを通ったもの
  • XSS脆弱性は見つからなかった
Warnings
  • 他のブラウザではXSS攻撃の被害を受ける可能性があるもの（他の脆弱性検査ツールでは問題ないと判断されたものが挙げられることがあります）
Failures
  • テストを通らなかったもの
  • XSS攻撃によって被害を受ける可能性がある

この3項目のうち、Warningsが厄介です。 他のブラウザでは危険性があると言われても、それはこのツールじゃ確かめられませんよね。 また、Warningsに関する情報が少なくてどのように判断すれば良いのかわかりづらいのも厄介ですね。

XSS String Test Results

先の XSS Heuristic Test Results の詳細説明です。 問題点や注意点が記載されています。ここを参考にして修正するのが良さそうです。

その他感想、おまけ

以上が XSS Meにおけるレポートの見方です。 以下に、XSS Me に関して気になる点や、私個人が利用してみた感想等をまとめてみました。

良かった点

  • 別のアプリケーションを起動する必要がなく、全ての作業をブラウザ上でおこなえる
  • テスト結果が一目見てわかるので、修正が必要な箇所の割り出しに時間がかからない

気になる点

  • フォーム周りの検査しかできないため、フォーム以外の箇所に潜んでいるXSS脆弱性に関しては検査できない
  • ブラウザ依存のため、他のブラウザではXSS脆弱性が見つかる可能性もある

上記を踏まえると、XSS Me は簡易的なテストとして利用するのが適していると思います。 XSS Me だけではなく、他のツールと組み合わせるとより効果的だと思います。

最後に私個人の使い方をご紹介します。

私はお昼や打ち合わせで席を外す際に XSS Me を実行しておき、戻ってきたらレポートを確認するという使い方をしていました。 それというのも、HTML要素の多いページだとテストにかかる時間が非常に長いからです。 私の場合、全てのテストを実行したら5000件を超え、テスト終了まで1時間強かかることがありました。 テストの件数が多い場合は、無駄がなくなる使い方をした方が良さそうです。

参考にさせていただいたサイト

今回のエントリではこちらのサイトを参考にさせて頂きました。 ありがとうございました。

http://labs.securitycompass.com/index.php/exploit-me/xss-me/xss-me-faq/

 

タグ:, , ,

ブブゼラを聞きながらEmacsでSimplenoteを操作してみました

2010年6月30日 by ogura

（はてブコメントへの返信を末尾に追記しました。2010年7月2日）

全国1000万人のEmacs + iPhone + Simplenoteユーザーのみなさん、こんにちは。 これまで、Windows→Linux→BeOS→Mac OS XとOSを渡り歩いてきましたが、その間ずっとEmacsのお世話になっている、プログラマーのおぐらです。

iPhoneでメモをとる際、みなさんそれぞれお気に入りのアプリケーションを使われていると思いますが、私は

  • シームレスな同期
  • シンプルなつくり
  • iPad版がある
  • Webインターフェースがある

といったあたりに魅力を感じてSimplenoteを使っています。明示的に同期ボタンを押さずとも必要に応じて自動的に同期してくれる挙動がとくに助かっています。

ブラウザから利用する場合は https://simple-note.appspot.com/ にアクセスします。

iPhone以外からSimplenoteのメモを編集する場合は当然ブラウザから行うわけですが、読み書きするものはとにかくEmacs上でやりたくなるのがEmacsユーザーというもの。なにかいいソリューションはないかな…と探してみたところ、simplenote.elというそのまんまなブツを見つけてしまいました。これがなかなかの優れものでしたので、インストール方法と使い方を簡単にご紹介します。

インストール！

インストールとは言っても実体は1つのelispファイルなので、ダウンロードしたものを適当なパスに置いて.emacsから読み込めばOKです。

$ wget http://github.com/cefstat/simplenote.el/raw/master/simplenote.el
$ mv simplenote.el elisp置き場

.emacsには以下のように記述します。

(require 'simplenote)
(setq simplenote-email "email@company.com") ; ログイン用メールアドレス
(setq simplenote-password "yourpassword") ; ログイン用パスワード
(simplenote-setup)

デフォルトでは、Simplenoteと同期した時に ~/.simplenote ディレクトリにキャッシュが生成されます。このディレクトリを変更したい場合は simplenote-setup を呼び出す前に simplenote-directory 変数の値を変更しておきます。

(setq simplenote-directory "ディレクトリパス")
(simplenote-setup)

使い方！

simplenote.elには、

  • サーバー上に保存されているメモをブラウズ＆編集する
  • 既存のローカルファイルをSimplenoteと同期させる

という2通りの使い方があります。

サーバー上に保存されているメモをブラウズ＆編集する

ブラウズモードに入るにはEmacs上でコマンド Meta – x simplenote-browse を実行します。サーバーとの通信が完了すると、以下のようにメモの一覧が表示されます。

（あっ！半角カナが化けてる…）

各メモのタイトル部分で Ctrl – m やら Enter を押すと、そのメモの編集バッファが開きます。

なお、ここで内容を変更＆保存してバッファを閉じても変更はサーバーには反映されません。サーバーに反映するには、明示的に [Sync with server] を押す必要があります（シームレスになるといいですね）。同様に、[Delete] を押してメモを削除した場合も同期を行わない限りサーバーから削除されることはありません。

[Create new note] で新しいメモを作成＆保存した場合は以下のような表示になり、やはり同期を行うまではローカルにのみ存在するメモとなります。

なお、サーバーに反映されていない変更内容はローカルのキャッシュファイルに保存されるため、同期前にEmacsを終了させても大丈夫です。

既存のローカルファイルをSimplenoteと同期させる

既にローカルに存在するファイルを同期する場合は、対象のファイルを開いた状態で Meta – x simplenote-create-note-from-buffer を実行します。

同期が完了すると、バッファの末尾に識別用のキーがコメントとして埋め込まれます。

この時点でブラウザからSimplenoteにアクセスしてみると、以下のようにちゃんと同期されていることが確認できます。

以降は、このファイルを開いている時に Meta – x simplenote-push-buffer および Meta – x simplenote-pull-buffer を実行することでローカルからの送信およびサーバーからの取得を行うことができます。ただし、キーを含んだコメント部分を削除してしまうと、これらの同期処理は動作しなくなりますので注意してください（メモ自体はサーバー側に残ります）。

さいごに

スクリーンショットを多めに載せたのにも関わらず、Emacsネタということでたいへん地味な見栄えになってしまったのが悔やまれますが、なかなか便利なスクリプトですのでEmacs + iPhone + Simplenoteユーザーな方はぜひお試しください。

追記 (2010年7月2日 19:12)

はてブ経由でid:kitokitokiさんからコメントをいただきました。

iphoneを持っていないのですが、ハックをいれるとしたらこんな感じでしょうか。検証できていないコードですみません。http://gist.github.com/458545 2010/06/30

gistに書かれたコードでは、defadviceまたはadd-hookでバッファ保存時にSimplenoteと同期させるようになっています。

これで、[Create new note]で新しいメモを作成した際もシームレスに同期されますね。ありがとうございます！

 

タグ:, ,

リサイズ・トリミング、ひとりでできるもん

2010年6月9日 by maruyama

おひさしぶりの更新となります、丸山です。こんにちは。 一昔前に比べてプログラマーに求められる守備範囲って広がってきていると思いませんか？

■ プログラマーの画像編集

システムで使用する画像素材は、クライアントやデザイナーから提供されることが多いと思います。 プログラマーのお仕事はプログラムを書くことです。 しかしながら、素材を渡されて「いい感じに調整をしておいてよ」といわれてしまうこと。ありませんか？ 普段画像編集に関わっていないとちょっとした加工にも困ることがあると思います。 切り抜きやサイズ変更くらいはプログラマーであってもさっと対応できたらステキですよね。

画像編集といえばPhotoshopが有名です。でも、操作がよく分からないし価格もネック…と感じる方も多いのが現状です。 今回は、ブラウザーでインターネットに接続できる環境さえあれば誰でも無料で使うことができる「Pixlr」をご紹介したいと思います。 実際の現場でも必要に迫られることが多い「切り抜き」と「サイズ変更」の操作方法を説明します。

■ Pixlr Editor と Pixlr Express の違い

Photoshopに慣れている方は「Pixlr Editor」が断然おすすめです。 操作可能なことが似ているのはもちろん、Photoshopと同様のショートカットもかなり使うことができます。 数あるオンライン画像編集ツールの中でも「Pixlr」をご贔屓にしたくなる一番の理由がショートカットだったりします。 英語メニューでもあまり不自由は感じませんが、メニューを日本語化することもできます。 出力できるファイル形式はJPEG,PNG,BMP,PXD(Pixlr Editor 独自形式)の4つです。

簡単な写真の加工のみをしたい場合は「Pixlr Express」がおすすめです。 できることは限られてしまいますが、とてもわかりやすいインターフェースになっています。 メニューは英語になりますが、加工後のイメージがわかりやすいアイコンになっているので戸惑いは少ないと思います。 出力できるファイル形式はJPEGのみです。 今回は簡単な「Pixlr Express」で加工をする方法をご紹介いたします。

■ 「Pixlr Express」へアクセス！

http://www.pixlr.com/ をブラウザーで開いてください。 画面上部にあるメニューのうち「Pixlr Express」をクリックするだけで利用することができます。

■ 編集する画像を選びます

編集する画像はローカルのファイル、またはURLで指定をします。 「Pixlr Express」で開くことができるファイルの拡張子は jpg,jpeg,gif,png,psd です。 PSDファイルはレイヤー情報のない状態にはなりますが開くことができます。 ベクターファイルはさすがに開けませんがPSDファイルが開くだけでもありがたいですよね。

画像読み込み後の画面イメージはこのようになります。

■ 画像の一部を切り抜きする(トリミング)

左の操作パネル「Basic」を開きます。 「Basic」パネル内一番上の「Crop」が「切り抜き」をするメニューです。

Width(横幅)とHeight(高さ)は元画像の数値が入っています。

この数値を変更することで切り抜きをするサイズを指定できます。 Width(横幅)=300px、Height(高さ)=100pxを入力してみました。

画像の上にある白い枠が小さくなりました。 この白い枠はドラッグをして移動したり、大きさを変更したりすることができます。

切り抜きをする場所、大きさを決定したらボタンをクリックすると確定できます。

失敗をしたらボタンをクリックすれば元に戻すこともできます。

■ 画像を拡大・縮小する(リサイズ)

操作パネル「Basic」から「Resize」を選びます。言葉の通り「リサイズ」をするメニューです。

実際の現場では拡大よりも縮小をすることか多いと思います。 作りたい画像のサイズをWidth(横幅)とHeight(高さ)に入力します。

Width(横幅)とHeight(高さ)の下にあるチェックボクスは縦横のアスペクト比(縦と横の比率)を維持するかどうかの選択になります。 チェックをつけていればアスペクト比は維持されます。チェックの付いた状態で、Width(横幅)を入力するとHeight(高さ)は自動的に変更されます。もちろん逆にHeight(高さ)を入力すればWidth(横幅)が自動的に変更されます。

今回はWidth(横幅)=250pxとして入力してみました。

大きさを決定したらボタンをクリックすると確定できます。

■ 回転や反転もできます

操作パネル「Basic」の3つめは回転や反転をするメニューです。

アイコンを見れば操作方法はわかりますよね。 ボタンを押すだけで簡単に90度回転をしたり左右反転させることができます。

■ 写真の加工も簡単です

ここまで操作パネル「Basic」の説明をしました。他にも2つのメニューが用意されています。 ボタンをポンポン押すだけで写真のイメージを簡単にがらっと変えることもできます。

レトロカメラっぽく加工をしてみました。

■ 保存をしましょう

画像は加工できても保存できなければ意味がありません。 最後にボタンをクリックすると保存ダイアログが表示されます。

「SAVE」をクリックすればローカルにファイルが保存できます。 Pixlr Expressは保存形式はJPEGのみになります。 いかがですか？慣れてしまえば切り抜きやサイズ変更が数分で思い通りにできるようになります。 PixlrはFirefoxのアドオンもあり、画像キャプチャ → 加工をよくする方にはあわせてお試しいただくとより便利に感じると思います。

オンライン画像編集ツールはPixlr以外にもいろいろあるのでしっくりくるものを探してみてください。 個人的には「Sumo Paint」が気になっていますが、やっぱりPhotoshopって便利だなあ。という結論になりそうな予感です。

 

タグ: