ただのにっき

■ DEF CON CTFの裏話を聞いてきた

8月に行ったDEF CONのCTFで6位に入賞した日本のチームsutegoma2が、hbstudyでその実際のところを話すというので行ってきた。インフラエンジニアではないのでhbstudyへの参加は初めて……というかCTFとインフラエンジニアの関係って???

話者はsutegoma2の@jetbeejpさんと@alterkeyさん。で、@jetbeejpさんがCTFに関わり始めたきっかけがのっけからすさまじい。だってDEF CON 19に行ったら日本のチームが出場してて、そこに入り込んでいろいろ質問とかしてたら……って、よくあんなピリピリしたところに入って行けるな(笑)。そういう行動力がなんかすごいわ。

メインはCTFで攻守のターゲットになったサービスの解説だったのだけど、そもそも提供されたサーバがARMv7ですぐにはエミュレータが構築できず、当初はGalaxy NexusにUbuntu Phoneを入れてしのいだというのだから、DEF CON決勝に出るチームは格が違う。てかなんでそんなに何台もGalaxy Nexusがあるんだよという。さらにOSはNXとASLRが有効な状態で、初見の6つのサービスにROPなexploitを作る、それもたった2.5日で防御もしながら。なんかもう、決定的にスピードが違うよなぁ。

技術的な話は概念はわかるのでついていけたものの、詳細に立ち入られると「?」状態だった。デバッガも満足に使えない、rootじゃないのでファイアウォールも構築できないという状況で、LD_PRELOADを使ってフックをかけるなんてすごいよなぁ。運営サイドがASLRを有効に機能させるためにxinetdが使っていたというのはなるほどだった。

他にも、会場でWiFiがつながらなくてVPN張れなかったからサポートチームとの間はスニーカーネットワークだったとか、当日現地で見学しててもわからんような話がいっぱいあって面白かった。が、同じCTFをやる者として、このレベルにはまったく追いつける気がしない(笑)*1。

• @alterkeyさんの資料: DEFCON21×S2 REPORT

■ ZapierやめてIFTTTへ

この日記のfeedをTwitterに流すのに9月から使っていたZapierだが、ときどき過去の記事の分までたくさんtweetしてくれたり、逆に新しい記事があるのに何も反応がなかったりして、「まぁ新しいサービスだし少し待てば改善されるだろう」と思っていたが、あんまり良くなる感じがないので見切りをつけることにした。

というわけで、けっきょく老舗(?)のIFTTTにお世話になることに。この記事がTwitterにちゃんと流れればOK……だと思う。Zapierはdry run的な機能があって実行する前に何が起きるのかシミュレートできたのでよかったなぁ(←未練はあるっぽい)。まぁ、また新しいサービスが出てきたら果敢にトライしてみたい。

■ アクセシビリティキャンプ東京#8でクックパッドのアクセシビリティチェックをした

アクセシビリティキャンプ東京も8回目。引き続き運営スタッフとして企画から参加。最近定着した、テーマ設定を一人に任せてリレーする方式は適度にバリエーションがあっていい感じになりつつあるね。

今回は久しぶりにWebに戻って、W3CのEasy Checks - A First Review of Web Accessibilityを使って簡易アクセシビリティチェックをしてみようという趣旨。背景にはJIS X 8341-3:2010 (WCAG 2.0)は網羅的だけど大きくて複雑だし、あれを使ってチェックするのは相当大変というのがあって、W3Cが「最低これだけはやってみて」という意図で作ったEasy Checksなら(英語だけど)初心者にもなんとかできるんじゃないのという流れ。日本語版があるとさらにいいんですけどね(チラッ

こういうワークショップ形式の場合、ネタにするサイトに悩む。たいていは当たり障りのない官公庁あたりのサイトになるんだけど、今回は使ったことのある人も多い民間のサイトにしようということで、勝手ながらクックパッドをとりあげた。というのも(御存知のとおり)クックパッドは理念として「毎日の料理を楽しみにすることで、心からの笑顔を増やす」を掲げていて、しかも事業戦略には『私達は、「全世帯の方々がクックパッドを見て献立を決め、買う食材を決める」そのような状態を、一日も早く、当たり前のものとしたいと考えています』とある。「全世帯」にはもちろんハンディキャップを持った人たちも含まれているはずなので*1、ぜひともアクセシビリティに配慮して欲しいサイトだからだ。

さて、数名ずつのグループに分かれて別室で実際のWebブラウザを操作しながらのチェック開始。対象はトップページとID登録ページ。おれもチューターの一人になったんだけど、予習が足らなくてけっこうバタバタしてしまって同室のベテラン陣にお世話になってしまった。ゴメンナサイ。でも3人の初心者にはちゃんと理解してもらえたかなー(と思う)。ちなみに今回使った環境はWeb Developer拡張を入れたFirefoxと、カラー・コントラスト・アナライザーという簡素なもの。

さてチェックの結果はこんな感じ。とりあえず情報にアクセスできるかという観点で致命的なものはないと言っても良いと思う。ただし、要改善点は多い。

• Page title - 申し分なし
• Image text alternatives ("alt text") - 一番ツッコミが多かったのはここ
  • alt属性が「ない」 →装飾画像ならaltを空文字に(alt="")
  • alt属性が「不適切」 →ユーザID(?)や画像のID(?)とおぼしき謎の文字列が入っている。あと「arrow」とか
  • alt属性が「余分」 →同じリンク内に同一のテキストがある場合はaltは空に
• Headings - おおむね問題なし
  • でもトップページにh1がないのはどうかなーという指摘は多かった
• Contrast ratio ("color contrast") - ここもツッコミ多し
  • オレンジやグリーンの背景に白文字(またはその逆)の場合にコントラストが足らないことが多い(よりによってh2要素とか)
  • 白背景上のグレーの文字もけっこうヤバい
• Zoom - 一部問題あり
  • 文字のみ200%にするとブロックから溢れて他の要素と重なる/隠れる要素が散見される
• Keyboard access and visual focus - おおむね問題なし
  • TABで飛べないクリッカブル要素がある(フォームのヘルプとか)
  • 直感的でないTABインデックスがある(検索フォーム)
• Forms
  • ラベルのついていない入力要素がある (パスワード確認とか)
• Multimedia (video, audio) alternatives - 対象要素なし
• Plain Content View - 問題なし

大部屋に残ったマニアック部門の人たちはもっといろんなツッコミをしていたようだけど、これらのポイントを改善するだけでかなり違ってくるはず。より多くの人たちが料理を楽しめるようになるといいですね*2。

そういえば今回は、去年までいた部署から元部下が数人、急に参加してきて焦った(笑)。でもまぁ、こっちはこんなにあちこちのITイベントに顔出してるのに、そういうところで同僚に出会うことがほとんどない方がどうかしてると思うので、もっとどんどん外に出て、視野を広げるといいんじゃないですかね。自社のガラパゴスっぷりを知るためだけにでも。