GIF89a Oldtype

JavaScript の世代間を埋めるパーツ - 過去と未来をつなぐ GIF89a - サイボウズ・ラボ株式会社竹迫良範 Real UNIX MAGAZINE Day (2007/11/03)

今日のお話

http://0xcc.net/misc/ggap.html 　より Binary 2.0 Web 2.0 UNIX にみる世代間の断絶（高林さん説）

ハッカー世代間の感覚差（竹迫・説）

1950,60,70 年代以前

Binary Hacks 世代

old type 、計算機の構造をきちんと理解、昔話好き

1980 年代以降

Text Hacks 世代

ブラウザ ⇔ コンピュータ

CPU 、アセンブリ言語 ⇔ JavaScript

画面出力（エスケープシーケンス） ⇔ HTML/CSS

外部記憶装置（仮想ドライバ） ⇔ Web サーバ（ CGI ）

平成生まれ

理解の範囲を超える新人類

ケータイで親指プログラミング

凡人 - input device 109 key

old type hacker - input device 60 key

new type hacker - input device 12 key

next - input device ??? 0 key ?

マシン語を知らない子ども達

バイナリアン光成さんの話（ LL Spirit にて）

Web のマシン語 || JavaScript

Shibuya.JS x John Resig

以上前フリ終了

本題

GIF89a （ハック）

HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot

Polyglot

5秒でわかる Polyglot (JavaScript in GIF89a)

正しい GIF 画像でもある JavaScript ファイル

JavaScript として実行できる GIF 画像ファイル

IE/Firefox/Opera/Safari できちんと動作

<script src=“alert0.gif” language=“JavaScript”>

Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)

View source

Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print "Hello Perl!"} __END__ #*/1);function GIF89a(){alert("Hello JavaScrpt!")} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><img src=?> <script src=# language=JavaScript></script></div> */// ;

JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print "Hello Perl!"} __END__#*/ 1 );function GIF89a(){alert("Hello JavaScrpt!")} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><img src=?> <script src=# language=JavaScript></script></div> */ // ;

HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print "Hello Perl!"} __END__#*/1);function GIF89a(){alert("Hello JavaScrpt!")} /* <body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1>  <img src=?> <script src=# language=JavaScript></script> </div> */// ;

How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol

従来：Ajaxでクロスドメイン通信する方法

1. XMLHttpRequest + Local proxy

非同期通信 API の元祖 XMLHttpRequest

クロスドメイン通信ができないので Local proxy

パフォーマンスの問題（自サーバの Proxy 経由でアクセス）

セキュリティの問題（ Open Proxy 悪用の危険性）

2. Flash の力を借りる + crossdomain.xml

SocketJS の実装など

3. <script src=“http://.../.js”> の動的生成

JSONP で最近ブーム

JSONPの動作原理 function callback (data) { // … ここに処理を書く … } （１）コールバック関数の定義（２） script tag の動的生成（３）サーバからのレスポンスクロスドメインで JavaScript 関数を実行 <script src=“http://example.com/data.json? jsonp= callback ” /> callback( { foo: 'This is foo.', bar: 'This is bar.', moe: 'This is moe.' } );

GIF89a でクロスドメイン通信 <img src=“null.gif?q=param" onload=“ callback (this.width)"> function callback (data) { //… do action } (1) Define JS callback function (likes JSONP) (2) New Image Object CGI にしても OK http://example.com/webapi/null.gif?q=foobar 戻り値： GIF 画像の幅サイズ

画像ファイルのサイズ比較

画像サイズ 1x1 （モノクロ GIF ）

35 byte

画像サイズ 1000x1000 （モノクロ GIF ）

1,735 byte

画像サイズ 1000x1000 （ 24bpp BMP ）

3,000,054 byte （約 3MB ）

画像サイズ 65535x65535 （ 24bpp BMP ）

約 12GB

ワークエリア足りません… orz

G I F (tm) Graphics Interchange Format (tm) A standard defining a mechanism for the storage and transmission of raster-based graphics information June 15, 1987 (c) CompuServe Incorporated, 1987 All rights reserved http://members.aol.com/royalef/gif87a.txt

任意の画像幅をできるだけ短く生成したい

Image Block の存在しない GIF Header だけ

画像の幅と高さのサイズ情報をサーバで生成

最小で20byte固定長

sub create_gif { my ($width, $height) = @_; my $size = pack "S2", $width, $height; return "x47x49x46x38x37x61$sizexf0x00x00x00x00x00xffxffxffx3b"; }

width と height の 16bit ずつ

つまり 32bit の情報をサーバ側で GIF 形式にエンコードして渡せる

Perl のサンプルコード

Firefox ではサイズ情報を読めた！

しかし、 IE では壊れた画像と認識 … orz サイズ情報を読み出せない…

クロスブラウザ対策

GIF89aの形式にして

1x1のダミーの Image Block を挿入すると

IEでも解釈するように

http://www.tohoho-web.com/soft/wcnt.htm とほほの WwwCounter で使用されている GIF 画像連結ライブラリの動作原理にインスパイア独立した一つの Image Block

GIFファイルのデータ構造 +-----------------------+ | +-------------------+ | | | GIF Signature | | | +-------------------+ | | +-------------------+ | | | Screen Descriptor | | | +-------------------+ | | +-------------------+ | | | Global Color Map | | | +-------------------+ | |- GIF Terminator -| +-----------------------+ +-----------------------+ | +-------------------+ | | | GIF Signature | | 5byte (GIF89a) | +-------------------+ | | +-------------------+ | | | Screen Descriptor | | 7 byte (width x height) | +-------------------+ | | +-------------------+ | | | Global Color Map | | 6 byte (2 colors) | +-------------------+ | | +-------------------+ | | | IMAGE DESCRIPTOR | | 15 byte (1 x 1) | +-------------------+ | |- GIF Terminator -| 1 byte (;) +-----------------------+ 20 byte 35 byte

return 16bit x 2

PerlでのGIF89a出力例（固定長35byte）

#!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack "S2", @_; return "GIF89a$sizexf0x00x00x00x00x00xffxffxff," . "x00x00x00x00x01x00x01x00x00x02x02Lx01x00;"; } print "Content-Length: 35 "; print "Content-Type: image/gif "; binmode(*STDOUT); print create_gif(65535, 65535); 1;

It works!

オールドタイプのためのC言語ライブラリ #include <stdio.h> #define print_gif_head() do { printf( "Content-Length: 35 " "Content-Type: image/gif " " "); } while (0) #define print_gif_body(x,y) do { putchar('G'); putchar('I'); putchar('F'); putchar('8'); putchar('9'); putchar('a'); putchar(0xff & (x)); putchar(0xff & (x >> 8)); putchar(0xff & (y)); putchar(0xff & (y >> 8)); putchar(0xf0); putchar(0x00); putchar(0x00); putchar(0x00); putchar(0x00); putchar(0x00); putchar(0xff); putchar(0xff); putchar(0xff); putchar(','); putchar(0x00); putchar(0x00); putchar(0x00); putchar(0x00); putchar(0x01); putchar(0x00); putchar(0x01); putchar(0x00); putchar(0x00); putchar(0x02); putchar(0x02); putchar('L'); putchar(0x01); putchar(0x00); putchar(';'); } while (0) int main() { print_gif_head(); print_gif_body(65535, 65535); }

!!

以上 GIF89a ハック終了

歴史の古いGIF規格