この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

今回は、スマートフォンアプリ等のHTTP、HTTPS通信をWi-Fi接続から、プロキシツールBurp Suiteを経由させることによって通信内容を確認します。脆弱性診断の為の方法ではありますが、サーバサイドやアプリの開発にも利用できるかと思います。

はじめに

Burp Suiteは、ウェブアプリケーションの脆弱性検査を行うことができるツールです。利用の仕方により不正アクセス行為と判断される可能性があります。またサービス停止やデータの破損が起こる場合もありますので事前にバックアップを行うなどしてください。そして必要に応じて管理者の許可を得て利用してください。

概要

ノートパソコンの無線LANをAPモードにして、通信を経由させる方法などもありますが、環境によって設定が複雑な場合や、うまく動作しないことがあります。今回はプライバシーセパレータなどの設定されていないWi-Fiルータにスマートフォン接続。スマートフォンの通信を、Wi-Fiルータ経由で接続できるPCにプロキシツールを用意し内容を確認します。

前回は、プロキシツールOWASP ZAPを利用する投稿をしましたが、今回はBurp Suiteを利用してみます。英語のメニューがわかりにくい場合は、Burp Suiteを日本語化する方法も試してください。

また以前に投稿した、Kali Linuxには、Burp Suiteの他にも、OWASP ZAPやwiresharkがインストールされています。
wiresharkなどで別のプロトコルの通信など詳細に確認を行うことも可能です。

Burp Suiteについて

Burp Suiteは、PortSwigger社が開発を行っているプロキシツールで、JAVAで作成されているためWindowsやMac、Linuxなどの環境で動作します。Burpは、日本語の処理など難がある部分もありますが、手動で脆弱性診断を行う場合に有用なツールです。Free EditionとProfessional Editionがあり、今回の内容はFree Editionでも行うことができます。

• PortSwigger社 Burp Suiteの入手先
  https://portswigger.net/
• Burp Suiteを日本語化する方法
  https://doruby.jp/users/r357_on_rails/entries/BurpSuite-Japanese

確認機種

参考までに今回は下記のような環境で確認しています。

• macOS Sierra
• Burp Suite 1.7
• iphone 7 ios10
• Android 4.2.2

Burp Suiteの設定

まず通信を経由させるPCでプロキシツールBurp Suite起動します。Burp Suiteのデフォルトの設定では、自身を起動しているローカルPCからの接続のみを許可しているので、他の端末からも接続を受け付けるよう設定を変更します。
設定箇所は、ProxyタブのOptionsタブ内Proxy Listenersで、デフォルトのものを選択しEditからBind to addressをAll interfacesに変更するなどします。
デフォルトのものを変更せずに、Addでポートを変えたものや、受け付けるインターフェースを変えたものを用意し切り替えるという方法にすることも可能です。(もちろん同じポートに複数設定はできません)
また、このPCのIPアドレスを確認しておきます。

ios端末の設定

Burp Suiteを起動しているPC経由で通信を行うように、ios端末を設定します。設定、Wi-FiでプロキシPC側と通信が行えるAPと接続を行います。HTTPプロキシを手動に設定し、プロキシPCのIPアドレスとBurp Suiteで設定を行ったポート番号を指定します。

Burp Suiteのinterceptがoffになっていることを確認し、端末のsafariなどのブラウザで通信が行えるか確認します。
次にSSL通信の内容を確認できる状態にするための設定を行います。端末のブラウザで http://burp/ を表示します。
表示がされない場合は、プロキシPCのIPアドレスやポートを指定して接続してみてください。
右上のCA certificateをタップし、端末に証明書を導入します。
 

android端末の設定

android端末でもios端末と同様のことを行いますが、OSや機種によって設定方法が異なる場合や、そもそも設定変更できる部分がないものも存在するので注意が必要です。
Wi-Fiで長タップ？ネットワークの変更を選択します。プロキシホスト名、プロキシポートにBurp Suiteが起動しているプロキシPCの情報を入れます。

端末のブラウザで http://burp/ を表示します。右上のCA certificateをタップし、端末に証明書を一旦内部ストレージにダウンロードします。
設定、セキュリティで、内部ストレージからインストールをタップし、先ほどダウンロードした証明書を導入します。
 

Burp Suiteで通信の確認

上記の設定をしたうえで、アプリを使い通信を行うと、通信内容がBurp Suiteで確認が行える状態になっています。
ProxyタブのHTTP historyでHTTPS通信が行われているか、内容が取得できているか確認してみてください。

おわりに

iosアプリは、ATS(App Transfer Security)の有効化が今後必須になるようです、対応のためHTTPS通信の確認が今以上に必要になってくるかもしれません。今回紹介した方法をテストや確認に活用していただければと思います。
以上、スマホアプリの通信をBurp Suiteで確認する方法についての紹介でした。

関連記事など

• Kali Linux 2017.1 導入と日本語化
• Kali Linux(2016.2)の日本語利用について
• Mac版のOWASP ZAPで脆弱性チェックの設定
• Burp Suiteを日本語化する方法
• Rubyのサポート期間一覧

脆弱性診断サービスなど

弊社、アピリッツではセキュリティ診断サービスを行っております。

下記リンクから内容の確認と、問い合わせが可能です。

http://security.appirits.com/

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

「インターン生と新卒はこの４つだけでも覚えて帰ってね！٩( ᐛ )و」という習慣について。

１．十分に理解していないコマンド(コード)を使わない

初心者はしばしば「どお”じでぞんなごどす”るの”！」と言いたくなるコマンドを実行します。本番環境や共有サーバーで理解してないコマンドを打つのは油田で花火大会するぐらい危険です。ローカル環境でさえオプションも含めてちゃんとコマンドの意味を理解してから実行する習慣が必要です。

unixのコマンドは非対話が基本なので「え？　本当にやってええの？　取り返しつかんで？」とは確認してくれません。crontab -l と crontab -r は全然違います。あぁ！　試しに打とうとしないで！

とにかく「なんでこのコマンド打ったの？」「このオプションはなに？」という質問が来る前提で作業します。同じように目的を達成出来る他のコマンドを使わずに、そのコマンドを選んだ理由まで答えられると尚良いです。業務では「よくわからないおまじない」と言う概念はありません。

２．変更する前に復旧出来るようにしておく

設定を弄ったら開発環境が壊れちゃった……。
一日がかりで直す羽目になったみんなー！　元気ぃー！？ （ゝω・）v

変更する前に切り戻し出来るように準備しておくと余計な時間が取られません。設定ファイルの変更前にcpでバックアップを取る、git管理する、仮想環境のスナップショットを作成するなど。

特に環境を作った直後や初心者期間は必ず失敗したり上手く行かなかったりします。死んだ顔でOSを入れ直すのを避けるために復旧手段を定期的に確保しましょう。初心者以外も「今この本番環境のDBを間違えてドロップしたらどうなるんだろう…」といった無害で危険な妄想を日頃からしておくと良いことがあるかも知れません。備えよう。

３．何か変更や作業をしたら意図通りになったか確認する

「もしかして道に迷ってる？」
「今いる位置がわからないから迷ってるかどうかもわからない」

変更したら確認するまでが作業、家に帰るまでが遠足。何か設定の変更をしたり作業を終えたら、次の作業へ移る前に出来るだけ反映されたかどうかを確認します。

これをサボると上手く行かなくなった時に原因の切り分けが難航しがちです。どこまでは上手く行っていて、どこからが上手く行かないのか認識するために確認を適宜挟みましょう。

４．事前に見通しを立ててみる

今から取りかかろうとしている作業を細分化して「どんな作業が必要で」「どれくらい時間がかかりそうか」を考えてみます。最初に見通しを立てる習慣があると思わぬ作業上の障害が予見できたり効率よく進めることが出来ます。

というより、何が必要か大雑把にでも見通しを立てずに作業を始めると手戻りや計画変更、他人の作業待ちが延々と発生します。必要な作業を綿密に洗い出して影響範囲やリスクを調べることが出来れば既に仕事は8割くらい終わっています。実際にコマンドを打ったりコードを書く時間は作業全体で見ると短いものです。

まとめ

４つに共通して言えるのが「業務なら絶対におさえておくべきポイントだけど、業務以外では教わる機会がない」という点ですね。意外にこの辺が言語化されてなかったので今回はこんな記事を書きました。覚えて帰ってね！٩( ᐛ )و

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

ユーザーからの画像投稿を扱うシステムを作る場合、画像のサイズや向き、位置情報などを取得したいときがあると思います。

またrubyにおいて画像の情報を取得するgemは様々ありますが、gemごとにどのような違いがあるか分かりません。

そこで特にオーソドックスなgem
・mini_exiftool
・exifr
を使って、下↓の写真の情報を取得してみます。

1. mini_exiftool
・実行ファイル

require 'mini_exiftool'
t = MiniExiftool.new "ファイル名"
p t.to_hash

・出力結果

 {
        "ExifToolVersion"=>10.31,
        "FileSize"=>"2.2 MB",
        "FileModifyDate"=>2016-10-31 18:16:03 +0900,
        "FileAccessDate"=>2016-10-31 18:42:27 +0900,
        "FileInodeChangeDate"=>2016-10-31 18:16:03 +0900,
        "FilePermissions"=>"rw-r--r--", "FileType"=>"JPEG",
        "FileTypeExtension"=>"jpg",
        "MIMEType"=>"image/jpeg",
        "ExifByteOrder"=>"Big-endian (Motorola, MM)",
        "Make"=>"Apple",
        "Model"=>"iPhone 6",
        "Orientation"=>"Rotate 90 CW",
        "XResolution"=>72,
        "YResolution"=>72,
        "ResolutionUnit"=>"inches",
        "Software"=>"10.0.2",
        "ModifyDate"=>2016-10-27 09:44:46 +0900,
        "YCbCrPositioning"=>"Centered",
        "ExposureTime"=>(1/507),
        "FNumber"=>2.2,
        "ExposureProgram"=>"Program AE",
        "ISO"=>32, "ExifVersion"=>"0221",
        "DateTimeOriginal"=>2016-10-27 09:44:46 +0900,
        "CreateDate"=>2016-10-27 09:44:46 +0900,
        "ComponentsConfiguration"=>"Y, Cb, Cr, -",
        "ShutterSpeedValue"=>(1/507),
        "ApertureValue"=>2.2,
        "BrightnessValue"=>7.94202454,
        "ExposureCompensation"=>0,
        "MeteringMode"=>"Multi-segment",
        "Flash"=>"Off, Did not fire",
        "FocalLength"=>"4.2 mm",
        "SubjectArea"=>"1631 1223 1795 1077",
        "SubSecTimeOriginal"=>707,
        "SubSecTimeDigitized"=>707,
        "FlashpixVersion"=>100,
        "ColorSpace"=>"sRGB",
        "ExifImageWidth"=>3264,
        "ExifImageHeight"=>2448,
        "SensingMethod"=>"One-chip color area",
        "SceneType"=>"Directly photographed",
        "ExposureMode"=>"Auto",
        "WhiteBalance"=>"Auto",
        "FocalLengthIn35mmFormat"=>"29 mm",
        "SceneCaptureType"=>"Standard",
        "LensInfo"=>"4.15mm f/2.2",
        "LensMake"=>"Apple",
        "LensModel"=>"iPhone 6 back camera 4.15mm f/2.2",
        "GPSLatitudeRef"=>"North",
        "GPSLongitudeRef"=>"East",
        "GPSAltitudeRef"=>"Above Sea Level",
        "GPSTimeStamp"=>"00:44:46",
        "GPSSpeedRef"=>"km/h",
        "GPSSpeed"=>0,
        "GPSImgDirectionRef"=>"True North",
        "GPSImgDirection"=>190.0831889,
        "GPSDestBearingRef"=>"True North",
        "GPSDestBearing"=>190.0831889,
        "GPSDateStamp"=>"2016:10:27",
        "GPSHPositioningError"=>"25 m",
        "Compression"=>"JPEG (old-style)",
        "ThumbnailOffset"=>2014,
        "ThumbnailLength"=>10251,
        "ImageWidth"=>3264,
        "ImageHeight"=>2448,
        "BitsPerSample"=>8,
        "ColorComponents"=>3,
        "YCbCrSubSampling"=>"YCbCr4:2:0 (2 2)",
        "Aperture"=>2.2,
        "GPSAltitude"=>"73.7 m Above Sea Level",
        "GPSDateTime"=>2016-10-27 00:44:46 UTC,
        "GPSLatitude"=>"35 deg 39' 59.74\" N",
        "GPSLongitude"=>"139 deg 42' 14.82\" E",
        "GPSPosition"=>"35 deg 39' 59.74\" N, 139 deg 42' 14.82\" E",
        "ImageSize"=>"3264x2448",
        "Megapixels"=>8.0,
        "RunTimeSincePowerUp"=>"5 days 21:26:54",
        "ScaleFactor35efl"=>7.0, "ShutterSpeed"=>(1/507),
        "SubSecCreateDate"=>2016-10-27 09:44:46 +0900,
        "SubSecDateTimeOriginal"=>2016-10-27 09:44:46 +0900,
        "ThumbnailImage"=>"(Binary data 10251 bytes, use -b option to extract)",
        "CircleOfConfusion"=>"0.004 mm",
        "FOV"=>"63.7 deg",
        "FocalLength35efl"=>"4.2 mm (35 mm equivalent: 29.0 mm)",
        "HyperfocalDistance"=>"1.82 m",
        "LightValue"=>12.9
        }

大量のデータが取得できました。ソフトウェアのバージョンまで取得しています。
一方で出力までに時間がかかり、初めて実行した時は10秒ほどかかりました。

また、

"ExifImageWidth"=>3264,
"ExifImageHeight"=>2448,
"ImageSize"=>"3264x2448"

のように重複してそうなデータもあるようです。

2. exifr

・実行ファイル

require ‘exifr’
@exif = EXIFR::JPEG.new(‘IMG_1546.JPG’)
p @exif.to_hash

・出力結果

{
    :width=>3264,
    :height=>2448,
    :bits=>8,
    :comment=>nil,
    :make=>"Apple",
    :model=>"iPhone 6",
    :orientation=>#<EXIFR::TIFF::Orientation:RightTop(6)>,
    :x_resolution=>(72/1), :y_resolution=>(72/1),
    :resolution_unit=>2,
    :software=>"10.0.2",
    :date_time=>2016-10-27 09:44:46 +0900,
    :ycb_cr_positioning=>1,
    :exposure_time=>(1/507),
    :f_number=>(11/5),
    :exposure_program=>2,
    :iso_speed_ratings=>32,
    :date_time_original=>2016-10-27 09:44:46 +0900,
    :date_time_digitized=>2016-10-27 09:44:46 +0900,
    :shutter_speed_value=>(1/506),
    :aperture_value=>2.2,
    :brightness_value=>(25891/3260),
    :exposure_bias_value=>(0/1),
    :metering_mode=>5,
    :flash=>16,
    :focal_length=>(83/20),
    :subject_area=>[1631, 1223, 1795, 1077],
    :subsec_time_original=>"707",
    :subsec_time_digitized=>"707",
    :color_space=>1,
    :pixel_x_dimension=>3264,
    :pixel_y_dimension=>2448,
    :sensing_method=>2,
    :exposure_mode=>0,
    :white_balance=>0, :focal_length_in_35mm_film=>29,
    :scene_capture_type=>0,
    :gps_latitude_ref=>"N",
    :gps_latitude=>[(35/1), (39/1), (2987/50)],
    :gps_longitude_ref=>"E",
    :gps_longitude=>[(139/1), (42/1), (741/50)],
    :gps_altitude_ref=>"\x00",
    :gps_altitude=>(4943/67),
    :gps_time_stamp=>[(0/1), (44/1), (46/1)],
    :gps_speed_ref=>"K",
    :gps_speed=>(0/1),
    :gps_img_direction_ref=>"T",
    :gps_img_direction=>(109678/577),
    :gps_dest_bearing_ref=>"T",
    :gps_dest_bearing=>(109678/577),
    :gps_date_stamp=>"2016:10:27"
}

画像の情報のほかに、カメラやiPhone本体の情報も取得されました。
MIMETypeが出力されていないですが、そもそもexifrはJPEGとTIFFのファイルしか対応していないようです。
出力までの速さはmini_exiftoolに比べて早かったです。

まとめ
【共通】
画像の幅・高さ
写真を撮影した日時・位置情報
カメラの設定や部品の情報

【mini_tool】

• 実行時間が長い
• pngもgifも使える
• キャメルケース
• オブジェクト形式
• 情報が豊富

【exifr】

• 実行時間が短い
• png、gifなどに未対応
• スネークケース
• シンボル形式
• データの名前がが分かりやすい

参考にさせていただきましたm(_ _)m
画像ファイルからEXIF情報を取り出す
RubyでEXIFを見る。mini_exiftoolを入れる。

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

プログラミング初心者が、いきなり参考書を手にしてもなかなか理解できず、諦めてしまうことも多々あると思います。 そんなとき、「とりあえず資格を取ってみる」ことが結構役立つかもしれません。

資格受験の良さ

• 理解できなくても、とりあえず進められる

プログラミングを始めて勉強する人がまずつまずくのが、「参考書の意味わからなさ」だと思います。読んでもわからない、でも理解しなきゃ先に進めない…というところで本を閉じ、あなたのプログラマ人生は幕を閉じます。
その点資格勉強となると、「とりあえず丸暗記して、点数が取れればいいや」と割り切れるので、パッパと前に進むことができます。わからなかったところも、勉強を進めていくうちに「ああ、あの時のあれはこういうことだったのか」と腹落ちすることが多いです。

• 参考書が意外とわかりやすい

これが意外だったんですが、資格の参考書は初心者が読んでもわかりやすいです。今まで「たのしいRuby」を読んで勉強していたのですが、それよりも「Ruby技術者認定試験合格教本」のほうがずっと勉強しやすかったです。解説も割と親切で、この本から勉強を始めても良かったかもな、とさえ思いました。

• 「憶えよう」と思える

参考書を読んで、その通りにプログラムを書いて、アプリケーションが一つできた。「やった！」と思うのですが、結局頭の中に残っているのはぼんやりとした文法と構造のみ。本に書いてあるまま書き写しただけだからです。数あるメソッドの中で頭に残っているのは僅かではないでしょうか。
その点資格勉強では、憶えなければ点が取れないので取り合えず暗記します。これが結構役に立ちます。
本当なら「プログラムを沢山書いているうちに自然と憶える」のが理想なのかもしれませんが、とりあえず全部憶えてしまうことで参考書に書いてあるプログラムが読み取れるようになったり、自分でプログラムを書き出すことができるようになります。知識を得るとだんだんとプログラミングが楽しくなってくると思います。

• 締め切りがある
  独学で辛いのが、勉強の目標となる締め切りが無いこと。「この日までは頑張ろう！」と思うことで、めんどくさい勉強も耐えることができます。
• 金が絡むと必死になれる
  これが一番大きい。プログラミング言語の資格は往々にして受験料が高いので、一度落ちると高級焼肉３回分くらいのお金をドブに捨てることになります。お金が絡まなきゃ本気になれない人には、資格受験を強くお勧めします。

ちなみに私は今回ruby silverを受験したのですが、プログラミング初心者（rubyや他の言語に全く触ったことが無い人)でも100時間程度本気で勉強すれば受かるかな、という印象でした。
もちろん多くの方が言う「プログラミングは書いて憶えろ」は本当に役に立つ正攻法だと思いますが、それでは太刀打ちできなかったという方はぜひ一度「とりあえず」資格を受けてみてはいかがでしょうか。

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

macOS Sierraで、OWASP ZAPを使い通信内容の確認と診断を開始するまでに必要な設定や手順についてまとめました。Mac OS Xでも、ほぼ同様の方法です。OWASP ZAPは、ウェブアプリケーションの脆弱性検査のためのツールです。

はじめに

OWASP ZAPは、ウェブアプリケーションの脆弱性検査を行うことができるオープンソースのツールです。利用の仕方により不正アクセス行為と判断される可能性ががあります。またサービス停止やデータの破損が起こる場合もありますので事前にバックアップを行うなどしてください。そして必要に応じて管理者の許可を得て利用してください。
前回のKali Linuxの日本語化に続き、今回はmacOS Sierraに、OWASP ZAP 2.5の導入を行います。

Webアプリケーションの診断等始める場合は、徳丸本など参考にして、十分理解してから行ってくださいね。
徳丸試験の紹介と合格する方法
https://spirits.appirits.com/role/engineer/security-engineer/5418/

新しく記事書きました、脆弱性診断ツール OWASP ZAP についても参考にどうぞ。
https://spirits.appirits.com/role/engineer/security-engineer/6129/

ローカルプロキシについて

プロキシというと、一般的にDeleGateやSquidなどウェブキャッシュ用のものや、最近だとnginxなどをリバースプロキシに利用しているところが多いかと思います。
ウェブアプリケーションのセキュリティ診断などで利用するプロキシは、PCインストールし、ブラウザとウェブサーバ間のデータ内容の確認、リクエストを変更して送信などを行うローカルプロキシのことを主に指します。
ローカルプロキシにも動作環境や機能などの違いで特徴があり、今回紹介するOWASP ZAPや、Burp Suite、Fiddler、Mac用ですとCharlesなどがあります。

OWASP ZAPの特徴などについて

• ソースコードが公開されており、無償で利用できる
• JAVAプログラムのためMacなど各種OSで動作する
• 手始めに行うのに向いている自動診断機能つき
• 比較的、日本語化が進んでいる（ 同種類のツール、BurpSuiteを日本語化する方法もある）

独立行政法人情報処理推進機構(IPA)では、ウェブサイトにおける脆弱性検査手法（ウェブアプリケーション検査編）で、SQLMap、Fiddler、Paros、Ratproxyと共にOWASP ZAPが紹介されています。SQLMapは、Kali Linuxにも導入されてますね。
OWASP ZAP localizationの少しスクロールしてJapaneseの部分、日本語化を行ってる方達です。

私も、OWASP ZAPの日本語化に参加しております。メニューや設定など、目に付くところを集中的に行いました。検出結果や階層が深い部分については、これからといったところです。

OWASP ZAPのインストールと初回起動

今回は、投稿時点で最新のOWASP ZAPのバージョン2.5を、macOS Sierraにインストールします。
基本的にOSごとの違いはあまりないので、他のOSの場合は読み替えていただければと思います。
JREが、Mac OS版にはバンドルされていますが、他OSでは別途インストールが必要です。

OWASP Zed Attack Proxy Projectからダウンロードページで選択してください。

特に変わったこともないかと思いますが、ダウンロードしインストールしてください。

起動時、「開発元が未確認のため開けません」と表示されますが、指示通りにシステム環境設定のセキュリティとプライバシーを開き確認し、下部のこのまま開くを押します。

また、ソフトウェアライセンスについて表示されるので、読んでから進んでください。
起動すると、セッションの保存の選択があります。今回は、一番下の「この時点で、セッションを保存せず操作します。」で進めてしまいます。

OWASP ZAPの設定

あとで行うこともできますが、アップデートを行うか聞かれます。
再度行う場合は、メニューの「ヘルプ」から、「アップデートのチェック」で、「アドオンの管理」ウィンドウを開きます。

マーケットプレイスで、Active scanner rulesなど必要なものを選択し、Install Selectedで導入します。
また、インストール済みのアドオンも選択してUpdate Allを行います。

ウェブブラウザの設定

特にセキュリティ診断などを行う場合は、誤って別のサイトにリクエスト送信など避けるため、診断用にウェブブラウザ独立でプロキシを変更できるFirefoxを導入して、更にプロファイルを分けることをお勧めします。

Firefoxのプロファイル

プロファイルマネージャを使用して、Firefox のプロファイルを作成または削除するなどを参考にしてください。
各種起動方法があると思いますが、私は単純にターミナルで下記を入力してしまいます。
初めに診断用のプロファイルを新規で作成してしまいます。以降はそのまま使用します。

/Applications/Firefox.app/Contents/MacOS/firefox -P

プロキシの設定

OSまたは、ウェブブラウザのプロキシの設定を設定します。ここでは私が行っているFirefoxのアドオンを使った方法を紹介します。FoxyProxy StandardをFirefoxに導入します。

ローカルホストに、ローカルプロキシOWASP ZAPのポート番号を指定します。(他のものと同一にならないようにあらかじめ他のツールも変更しておく)

この様に、複数作成して切り替え出来るようにしておくと何かと便利です。

証明書のインポート

OWASP ZAPで、HTTPS通信データを確認出来るようにするため、ウェブブラウザに証明書のインポートを行います。いわゆる中間者(MITM)攻撃と同様の状態を作り出します。

まず、OWASP ZAP側のメニューから、「ツール」、「オプション」、「ダイナミックSSL証明書」と進んで。
「生成」してからファイルを「保存」します。

次に、Firefox側で、「オプション」、「詳細」、「証明書」、「証明書を表示」、「認証局証明書」
「インポート」でファイルを読み込みます。「この証明局によるWebサイトの識別を信頼する」にチェックを入れます。

通信データの確認

この状態で、対象となるサーバをウェブブラウザで閲覧します。適度に画面遷移してみてください。先にウェブブラウザやアドオンがアップデート確認などの為の通信を拾ってしまうかもしれません。

画面下部にある履歴タブでリクエストを選択すると、画面右上のリクエストタブ、レスポンスタブで、通信の様子とデータの内容が確認できます。検証できる環境がない場合は、やられサイトを利用してください。AppGoat、Badstore、Metasploitable2 などが有名です。私は、OWASP Mutillidae IIなど各種導入されている、OWASP BWAをよく利用します。また手っ取り早く、VirtualboxにWordpressを導入するなどでも、OWASP ZAPの検証にはなるでしょう。

おわりに

今回は、OWASP ZAPを使い通信内容の確認と診断を開始するまでに必要な設定や手順についてまとめました。実際の使用方法などについては、次回以降に掲載していきます。
前回は、Kali Linux(2016.2)の日本語利用についてでしたが、もちろんZAPも導入されておりますので、参考にしていただければなと思います。

関連記事など

• 徳丸試験の紹介と合格する方法
• Kali Linux 2020.2 導入と日本語化
• Kali Linux(2016.2)の日本語利用について
• スマホアプリのHTTPS通信をBurp Suiteで確認
• BurpSuiteを日本語化する方法
• Rubyのサポート期間一覧

脆弱性診断サービスなど

弊社、アピリッツではセキュリティ診断サービスを行っております。

下記リンクから内容の確認と、問い合わせが可能です。

http://security.appirits.com/

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Kali Linux(2016.2)のインストールと日本語利用についてまとめました。Kali Linuxは、セキュリティ診断用ツールが標準で用意されている、Linuxディストリビューションです。新バージョン2017.3については、関連の記事を参照ください。

はじめに

Kali Linuxは、セキュリティ診断ツールを含むLinuxディストリビューションです。Kali Linuxは、利用の仕方により不正アクセス行為と判断される可能性ががあります。またサービス停止やデータの破損が起こる場合もありますので事前にバックアップを行うなどしてください。そして必要に応じて管理者の許可を得て利用してください。

Kali Linux 2017.3 リリース

Kali Linux 2017.3 がリリースされてます。とても導入が楽になってます。新バージョンについては下記の記事も参照ください。
Kali Linux 2017.3 導入と日本語化

Kali Linuxの特徴などについて

• Debianの派生のLinuxディストリビューションです。
• デジタルフォレンジック、ペネトレーションテスト(侵入テスト)用などのツールが用意されている。
• 基本的に、root権限で作業を行う。
• 現在は、ローリングリリースを採用している。
• バージョン2016.2がリリースされた。(直接ダウンロードできる仮想環境イメージファイルは、まだ2016.1でした。)

Kali Linux 公式サイト
https://www.kali.org/

主な収録ツール

Nmap、Aircrack-ng、Wireshark、Metasploit Framework、Armitage、Burp Suite、OWASP ZAP、BeEF、sqlmap、wpscan などなど多数

※Owasp ZAPについては、Mac版のOWASP ZAPで脆弱性チェックの設定として記事を書いております。

Kali Linuxを実機にインストールする場合

現在、VirtualBox、VMwareなどの仮想環境が、用意しやすい状況にありますが、用途を限定すれば旧式モデルのPCなどでも十分利用できます。
私は下記のツールを利用し、インストール用のUSBメモリを作成しました。
失敗しやすいポイントだけ書くと、起動時にUSBメモリからブートするようBIOSを設定し、インストール途中にCDを入れるように聞かれたら、USBメモリを抜いてから再度挿してください。

UNetbootin インストール用のUSBメモリを作成ツール
https://unetbootin.github.io/

VirtualBox上にインストールする場合

仮想化ソフトウェア、VirtualBoxをインストールし、Kali Linuxのイメージを導入、起動させます。

VirtualBox 公式サイト
https://www.virtualbox.org/

Kali Linux Downloads – Virtual Images イメージファイルのダウンロード先
https://www.offensive-security.com/kali-linux-vmware-virtualbox-image-download/

書いている時点で、直接ダウンロード出来るのはバージョン2016.1です。
中段のPrebuilt Kali Linux VirtualBox Imagesタブをクリックしダウンロードします。
ダウンロードした、Kali-Linux-2016.1-vbox-XXXXX.7zを展開します。(7z形式を展開できるソフト利用)
VirtualBoxを起動し、ファイル、仮想アプライアンスのインポートで、先ほど展開したKali-Linux-2016.1-vbox-XXXXX.ovaを選択しインポートします。
デフォルトの設定でも問題はないですが、ネットワークの割り当ては、診断対象環境との通信の関係上、ブリッジ などがよいかと思います。その他は、好みによって設定を変更します。私はメモリを4GBぐらいにしています。

Kali Linuxの起動を行いログインします。
　ユーザー名:root
　パスワード:toor

他のパッケージ導入前に、既存のパッケージを最新に更新してしまいましょう。

apt-get update
apt-get dist-upgrade (バージョン2016.2をdist-upgradeにして導入してしまいます。)

※うまく動作しない場合があるようです。(バージョン2016.1から2016.2の移行期のため？)
Kaliインストール後、apt失敗についても暫定対応ですが参考にしてみてください。

またバージョン2016.2が直接ダウンロード出来るようになったiso版で導入を行い。下記のコマンドVirtualBoxのゲストツールを入れてしまう方法も検討してみてください。VirtualBox標準方式でのGuest Additionsの導入より気軽に行えると思います。

apt-get install virtualbox-guest-dkms

Kali Linuxの日本語利用について

英語環境のまま利用している方も多いようですが、ここでは日本語で利用できるように設定していきます。いわゆる日本語化です。下記3点を、順に進めます。

1. 日本語表示の設定（ロケール、フォーマット、キーボードレイアウト、タイムゾーン）
2. 日本語フォントの導入（日本語表示）
3. 日本語変換の導入（日本語入力）

1. Kali Linuxの日本語表示設定

バージョン2016.2を、isoから日本語を選択してインストールを行った場合は、日本語表示の設定はほぼ完了してますので、画面右上のキーボードレイアウトの変更を行ったら、次の日本語フォントの導入から行ってください。

画面の右上、電源右の▼をクリックし、設定画面を開きます。

Region & Languageをクリックします。

下記を参考に、Language、Formatの変更します。ログインのし直しを求められますが、一通り設定を行ってからのほうがよいでしょう。
また、Input Sources追加と順序の変更を行います。使用しなければUSを削除してしまっても問題ないです。

もう一度設定画面に戻り、Date & TimeのタイムゾーンをJSTにします。

2. Kali Linuxへ日本語フォントの導入

下記コマンドでフォントパッケージを導入すると、独特の中華フォントから馴染みのある日本語表示になるかと思います。

apt-get install fonts-takao

3. Kali Linuxへ日本語変換の導入

下記コマンドでパッケージを導入後、再起動することで日本語入力の漢字変換が可能になります。

apt-get install uim uim-anthy

Mozcがroot権限で、そのまま動かないため、ここではuimを利用します。
Mozcを利用したい場合は、一般権限で動作する別のディストリビューション(BackBoxなど)をお勧めします。
Mozc自体の変更でも動作させることはできるようです。

ウェブブラウザの日本語化など

最後にその他、各アプリケーションごとの対応が必要となりますが、ここではウェブブラウザに日本語言語パックとFlashを導入しておきます。

apt-get install firefox-esr-l10n-ja
apt-get install flashplugin-nonfree

Debianに標準搭載されているブラウザがfirefoxに変更されたため、Kali Linuxでもfirefoxが標準となってます。
ESR: Extended Support Release(延長サポート版)

関連書籍紹介

日本語で書かれたKali Linuxに関する書籍は、ほとんど出版されていませんが、下記の「サイバーセキュリティテスト完全ガイド」は、Kali Linuxについて詳しく解説されています。

サイバーセキュリティテスト完全ガイド ~Kali Linuxによるペネトレーションテスト~

関連記事など

• Kali Linux 2017.3 導入と日本語化
• Burp Suiteを日本語化する方法
• スマホアプリのHTTPS通信をBurp Suiteで確認
• Mac版のOWASP ZAPで脆弱性チェックの設定
• HTTPS使用暗号スイートをサーバーログ記録
• Rubyのサポート期間一覧

脆弱性診断サービスなど

弊社、アピリッツではセキュリティ診断サービスを行っております。

下記リンクから内容の確認と、問い合わせが可能です。

http://security.appirits.com/

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Kali Linuxは、セキュリティ診断用ツールが標準で用意されている、Linuxディストリビューションです。Version(2016.1)を導入直後は、パッケージを最新に更新したいところです。iso版は2016.2が直接ダウンロード出来るようになりましたが、仮想マシン版や以前インストールしたものからapt-get updateと入力してもエラーで実行できない場合があるので、解決方法を試してみました。

はじめに

今回、紹介する方法は、自分が検証環境で行った、少々強引にAPTを修正する方法ですで、テスト環境を用意する、バックアップを取ってからなど十分注意して行ってください。
また、公開時点での暫定的な方法であり、初期ダウンロード、リポジトリ、パッケージなどの状態により、変更される可能性があります。

エラーの内容

Kali Linux(2016.1)を導入し、パッケージの更新のため端末にコマンドを入力、下記のようにエラーとなりました。(iso版、VirtualBox版、light版で確認)

root@kali:~# apt-get update
E: Method http has died unexpectedly!
E: sub-process http received a segmentation fault

または、下記のように分かりにくいかも知れません。

W: The repository 'http://http.kali.org/kali kali-rolling Release' does not have a Release file.
N: Data from such a repository can't be authenticated and is therefore potentially dangerous to use.
N: See apt-secure(8) manpage for repository creation and user configuration details.
W: Failed to fetch http://ftp.ne.jp/Linux/packages/kali/kali/dists/kali-rolling/main/binary-amd64/Packages  404  Not Found
W: Failed to fetch http://ftp.ne.jp/Linux/packages/kali/kali/dists/kali-rolling/non-free/binary-amd64/Packages  404  Not Found
W: Failed to fetch http://ftp.ne.jp/Linux/packages/kali/kali/dists/kali-rolling/contrib/binary-amd64/Packages  404  Not Found
E: いくつかのインデックスファイルのダウンロードに失敗しました。これらは無視されるか、古いものが代わりに使われます。

リポジトリの追加

deb cdromみたいな行があると思いますが、それとは別に下記を追加します。
同様のものが既に記載されている場合は、変更する必要はないです。
追記したら念のため、apt-get updateを行い変化がないことも確認します。

リポジトリリスト編集

vi /etc/apt/sources.list

Kali sources.list Repositories の The Kali Rolling Repository を参考にしてください。
http://docs.kali.org/general-use/kali-linux-sources-list-repositories

deb http://http.kali.org/kali kali-rolling main contrib non-free
# For source package access, uncomment the following line
# deb-src http://http.kali.org/kali kali-rolling main contrib non-free

必要なパッケージを事前に入手

事前に下記のパッケージを入手します。適宜読み替えてください、例は、この記事の公開当時最新の64bit版です。頻繁に更新されてるため新しいものを選んでください。
liblz4は、light版のみ必要？後工程で言われたら導入するスタンスでもよいかと。

libapt-pkg5.0_1.3~rc2_amd64.deb
apt_1.3~rc2_amd64.deb
liblz4-1_0.0~r131-2_amd64.deb

curlやwgetなどのコマンドで入手するか、またはブラウザで確認しながら、任意の場所にダウンロードします。

libapt-pkg、aptは、http://http.kali.org/pool/main/a/apt/
liblz4は、http://http.kali.org/pool/main/l/lz4/

ブラウザでのパッケージダウンロードの様子

aptの入れ直し

まず、removeでaptを削除します。危険な作業なので、Yes, do as say!と入力を迫られます。
その後、先ほどダウンロードしたパッケージを導入します。成功したらupdateを試してみましょう。

apt-get remove apt
dpkg -i libapt-pkg5.0_1.3~rc2_amd64.deb
dpkg -i apt_1.3~rc2_amd64.deb
dpkg -i liblz4-1_0.0~r131-2_amd64.deb (light版など必要に応じて)
apt-get update

apt-get updateが動作したら

正常に動作したら、upgradeを実行し数回出る質問に答えつつ、先ほどダウンロードしたパッケージを削除しておきましょう。
今回は、Kali Linux(2016.1)を導入直後からのaptエラーについて解決方法を試してみました。
これによりKali Linuxを最新状態(2016.2など)に保てるようになりました。

脆弱性診断サービスなど

弊社、アピリッツではセキュリティ診断サービスを行っております。

下記リンクから内容の確認と、問い合わせが可能です。

http://security.appirits.com/

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

たまごです。 自分は付箋(物理)でタスク管理しているのですが、今日はその方法をご紹介したいと思います。

付箋(物理)の利点

まず、最初にデジタル全盛期のこの21世紀に、実態のある紙の付箋を使うメリットを説明します。

■可視範囲がスケーラブルである

デジタルタスク管理は、どうしても可視範囲がモニターのサイズに依存します。それ以上の情報を視認しようとすると、表示を小さくするか、スクロールするか、構造化して上のレイヤだけ表示するか、物理モニターを追加しなければなりません。

けれど、付箋は現実世界に展開するので、可視範囲の拡大が容易です。貼るところがなくなったら、増やせばいいです。この可視範囲を広くとれる点は、物理媒体の持つ圧倒的なメリットだと思います。

■仕様変更が容易である

スケーラブルとかぶりますが、物理付箋なら仕様変更が容易です。アプリケーションを使ってタスク管理していると、どうしてもそのアプリケーションの仕様を超えた使い方はできませんが(マクロやプラグインが許容されているなら書くという手もありますが)、紙の付箋にそんな縛りはありません。

色を増やしたいなと思えば、新しい付箋を買ってくればよいのだし、付箋の貼り方で優先度と緊急度を管理したいなと思えば、そういう貼り方をすればよいです。このスピード感は、物理媒体ならではだと思います。

■シェアしようがないので、オンオフを切り分けられる

クラウド系のタスク管理サービスでついついやってしまうのが、オフの時間に仕事のタスクをチェックしてしまうことです。でも、チェックするだけで、アクションは次の勤務まで持ち越しだったりします。どうせ、勤務した際にあらためてチェックするので二度手間になります。

人によって違うかもしれませんが、自分は、プライベートはプライベート、仕事は仕事で分けた方が頭がすっきりするタイプなので、「勤務場所でしかタスクの確認ができない」という紙付箋の持つ特性がとてもマッチします。

以上、リアル付箋に僕が感じるメリット三点でした。

付箋活用術

本題の付箋活用術に移りましょう。僕は、付箋をこう使っています。

モニターに貼って使うのですが、貼る場所によって意味合いを変えています。以下、順に説明していきます。

モニター上部

モニター上部には、左から順に「優先度高」「期限付きタスク」「優先度中～低」タスクを貼っています。

単純に左側に近づくにつれ、プライオリティが上がっていくイメージです。なので、とりあえずざっとタスクを確認したい時は、自分の場合、視線がモニターの左上に向かいます。

モニター右側

モニター右側には、優先度や期限が未整理な付箋を貼っています。これは、画面にかかるような形で、わざと邪魔になるように貼ります。「早く振り分けしろよ」ということです。

何故右側なのかというと、自分の場合、このモニターの右側にもう一台モニターがあるからです。マウスポインタが二つのモニターを行ったり来たりする際に、強制的に付箋が目に入るよう、この位置に貼っているわけです。

モニター真ん中

これは、たとえばミーティングで離席するけど、戻ってきたら速攻でやりたいタスクなど「なる早」系タスクを備忘的に貼ります。めちゃめちゃ邪魔な位置なので、ここに貼っておけば、まず忘れることはありません。

まとめ

以上、自分の付箋活用術でした。

これが基本形で、後は使いつつフレキシブルに運用しています。地味で泥臭いですが、なんだかんだ物理付箋は便利です。

参考になれば、幸いです。

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Rails ではデフォルトで app/helpers/ 以下にあるヘルパは全て読み込まれる。 即ち、コントローラの階層と同様の階層にあるヘルパ以外のヘルパに定義されているメソッドを使用可能となる。 これを抑止し、コントローラの階層と同様の階層にあるヘルパのみ読み込まれるようにする方法を記述する。

内容の詳細

例えば、以下のようなファイルがあったとする。

• app/controllers/products_controller.rb
• app/controllers/users_controller.rb
• app/helpers/products_helper.rb
• app/helpers/users_helper.rb
• app/views/products/index.html.erb
• app/views/users/index.html.erb

この時、デフォルト設定では、 app/views/products/index.html.erb上でapp/helpers/users_helper.rbにあるメソッドを使用できる。

これを抑止し、app/views/products/index.html.erb上ではapp/helpers/products_helper.rb上にあるメソッドのみを使用可能になるようにする。

デフォルト設定のデメリット

• 複数のヘルパファイルに同名のメソッドがあった場合、どちらが読み込まれるか解らない。
• 結果的に、メソッド追加時に、重複するメソッド名がないか、全てのヘルパを確認しなければならない。
• コントローラ名と同名のファイル名にする事で、どのコントローラで使用されるヘルパであるか解るようにする事ができるが、その利点があまり生かせない。

設定変更方法

config/application.rb に以下1行を追加すれば良い。

module AppName
  class Application < Rails::Application
    # 中略
    config.action_controller.include_all_helpers = false # この1行を追加
    # 中略
  end
end

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

自分の仕事や予定を管理する上で、以下のようなニーズを満たすツールを探してきました。

• 数日〜数週間の単位で取り組むタスクの予定と実績を管理したい
• 数週間先までの予定を見通し良く管理したい
• 1日の中の時間の使い方を見える化したい

なかなかぴったりとするものが見つからなかったので、ガントチャートとバーチカルダイアリーを合体させたような感じのA4スケジュールシートを自作しました。
マイナーチェンジをしながら、すでに3年以上使い続けています。

使い方としては、上半分に自分のタスクやプロジェクトの日程などを書き、下半分に日々のアポイントや時間の使い方などを書いていきます。

フォーマットはこちらに公開しますので、自由に使ってください。

• A4スケジュールシート

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

業務上、フラグを用いて制御が必要な場面があると思いますが
１つのテーブルに複数フラグ管理が必要でDBに○○フラグ、▢▢フラグ、△△フラグと
複数のフラグのカラムが追加が必要なケースがあると思いますが、
今回は上記の様な複数フラグのカラムを一つのビット演算で管理するケースになります。

ビット演算とは

ビット演算とは2進数で表された数値（ビットパターン）を操作する演算のことです。 主にAND、OR、NOTという演算から成り立ちます。

＆ (AND)

AND演算は2つのビットパターンを取り、1つのビットパターンを返す演算子です。 各ビットにおいて双方が1の場合は1を、それ以外の場合は0を返します。

1 & 1 = 1
0 & 1 = 0
1 & 1 = 1
0 & 0 = 0

| (OR)

OR演算も2つのビットパターンを取り、1つのビットパターンを返す演算子です。 各ビットにおいてどちらかが1の場合は1を、どちらも0の場合は0を返します。

1 | 1 = 1
0 | 1 = 1
1 | 0 = 1
0 | 0 = 0

~ (NOT)

NOT演算は1つのビットパターンを取り、1つのビットパターンを返す演算子です。 各ビットにおいて1の場合は0を、0の場合は1を返します。

~1 = 0
~0 = 1

ビット演算を使ったフラグ管理

数値をビットパターンで表すと、各桁が 0 か 1 で表されます。 したがって 0 を OFF、1 を ON と定義すると大量の状態（フラグ）を一つの数字として 管理することができます。

例えば記事を管理する画面があり１つの記事に対して画像を4つ設定出来る場合

article_image1 = false
article_image2 = false
article_image3 = false
article_image4 = false

この例では設定可能画像が4つだけなので何とかなりますが、数が増えると面倒です。
そんな時はビットパターンを使って状態を管理することを考えます。 以下のようなイメージです。

            image1  image2   image3  image4
article =   0       0        0       0

フラグを立てる

# 状態を初期化
article = 0000
# 画像1を設定
article = article | 1000
# 画像3を設定(画像2は未設定)
article = article | 0010

フラグを下げる

# 状態を初期化(画像1,3設定)
article = 1010
# 画像1を削除
article = article & (~1000)
# 画像3を削除
article = article & (~0010)

フラグを判定する

# 状態を初期化(画像1,3設定)
article = 1010

if ((article & 1000) > 0) 
  puts '画像1はtrueです'
else
  puts '画像1はfalseです'
end

if ((article & 0100) > 0) 
  puts '画像2はtrueです'
else
  puts '画像2はfalseです'
end

if ((article & 0010) > 0) 
  puts '画像3はtrueです'
else
  puts '画像3はfalseです'
end

if ((article & 0001) > 0) 
  puts '画像4はtrueです'
else
  puts '画像4はfalseです'
end

出力結果

画像1はtrueです
画像2はfalseです
画像3はtrueです
画像4はfalseです

仕組み

2進数のどの桁が1になっているかを見て、flagがtrueかfalseかを判定します。
元となるフラグの2進数と、現在のステータスの2進数を「&」演算子でビット演算を行うことで、両方が1の時だけtrueになります。

まとめ

このようにビット演算を使うことで簡単に大量のフラグを管理することができます。
フラグを増やしたい時は、定数を増やすだけで判定できるので、管理が簡単になります。

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

枠全体をクリック可能な縦幅可変のリンクを並べる対応を、アンカーのposition設定、inline-boxで実施する。

「記事のタイトル・画像・内容の一部を●●文字まで表示するリンクを作成して欲しい、もちろん枠全体をクリック可能で！」
上記のような要望がユーザーからされることが良くあります。調べてみると、個々の問題については対応方法があったりしますが、毎回調べるのも…ということで、全部対応したサンプルを作成してみました。

目次

今回の対応について、2つに分けて解説します。

• アンカーをdivタグ全体に広げる
• 縦幅可変の枠を並べる

アンカーをdivタグ全体に広げる

下記対応で実施可能です。
css

      div.box {
    position: relative;
  }
  div.box a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

html

      <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <p>テキスト</p>
    </div>
  </div>

「position: absolute」は絶対位置指定。親以外の要素から縁を切り、絶対的な位置に配置します。上記例では親要素の左上端から縦横100%分を範囲として表示しています。
また、親にしたいボックスに「position：static」以外のposition指定（上記例ではrelative）をします。指定をしない場合、親が「ブラウザウィンドウ」になるため、注意です。
　

縦幅可変の枠を並べる

要素の左上からの並び替えはfloat:leftを使用することが多いですが、縦幅が異なる要素を並べた場合に崩れが発生する可能性があります。
そのため、今回はdisplay: inline-blockで実施します。
css

      div.box-inner {
    width: 610px;
    letter-spacing: -.40em;
    background: #EEEEEE;
    padding: 3px 0px 0px 0px;
    border: 1px solid #333333;
  }
  div.box {
    display: -moz-inline-box;/* firefox */
    display: inline-block;
    /display: inline;/* ie */
    /zoom: 1;/* ie */
    vertical-align: top;
    letter-spacing: normal;
    width: 276px;
    background: #f2f9fe;
    border: 1px solid #35559d;
    overflow: hidden;
    font-size: 12px;
    padding: 10px;
    margin: 2px;
    position: relative;
  }

html

    <div class="box-inner">
  <div class="box">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああ</p>
    </div>
  </div>
  ...
</div>

対象の要素にdisplay: inline-blockを追加するだけです。
あとは行ごとに上寄せをするvertical-align: top;、inline-blockを使用した際に発生するスペースを除去するletter-spacing: -.40em; / letter-spacing: normal;を追加して表示を整えます。
　
以上が「枠全体をクリック可能な縦幅可変のリンクを並べる」対応になります。
　

サンプル：

css

      div.box-inner {
    width: 610px;
    background: #EEEEEE;
    padding: 3px 0px 0px 0px;
    border: 1px solid #333333;
    letter-spacing: -.40em;
  }

  div.box {
    display: -moz-inline-box;
    display: inline-block;
    /display: inline;
    /zoom: 1;
    vertical-align: top;
    letter-spacing: normal;
    width: 276px;
    background: #f2f9fe;
    border: 1px solid #35559d;
    overflow: hidden;
    font-size: 12px;
    padding: 10px;
    margin: 2px;
    position: relative;
  }

  div.box a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-indent:-999px;
  }

  .box a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
  }

  .box img {
    float: left;
  }

  .box div.text {
    float: right;
    width: 160px;
  }

html

<div class="box-inner">
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>

　
表示例：

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

BOXとは

「Box」は、米国Fortune500社の99%が利用する、ビジネスユース実績No.1のコンテンツシェア（ファイル共有）とコラボレーションのためのクラウドサービスです。場所やデバイスを問わず、様々なコンテンツへのセキュアなアクセスと情報の共有・活用を可能にします。また、ユーザとIT管理者の双方に支持される、使いやすくて安全性の高いファイル共有クラウドクラウドサービスでもあり、社内外の人々とこれまでにない新しい形でのビジネスコラボレーションによって、業務生産性の飛躍的な向上やストレージコストの削減により、企業の競争力強化を支援します。2014年5月時点で世界22万社以上の企業が「Box」を採用しています。

通常

Windows 上に、テキストエディタをインストールして、「.txt」をインストールしたエディタに関連付けしていても、Box上で開こうとすると、「メモ帳で開く」と表示されてしまいます。

これを解決するには、レジストリを修正することで対応することが可能です。

変更内容

[HKEY_CLASSES_ROOT\SystemFileAssociations\text\shell]
＞”Edit”
＞”Command”　にて
（規定）のデータを「C:\Program Files (x86)\editer\editer.exe ％1」に変更してください。

　　　※「editer\editer.exe」部分は、使用したいエディタのパスに変更して下さい。

上記は、サクラエディタに変更した場合の表示例です。

注意点

レジストリキーの変更には危険が伴う場合がございます。
レジストリキーの変更を行う前にレジストリのバックアップを取得することを強く推奨いたします。