GIF89a Oldtype

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

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

ハッカー世代間の感覚差（竹迫・説） ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

凡人 - 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

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

5秒でわかる Polyglot (JavaScript in GIF89a) ,[object Object],[object Object],[object Object],[object Object]

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

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でクロスドメイン通信する方法 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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 画像の幅サイズ

画像ファイルのサイズ比較 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

任意の画像幅をできるだけ短く生成したい ,[object Object],[object Object],[object Object],sub create_gif { my ($width, $height) = @_; my $size = pack "S2", $width, $height; return "474946383761$sizef00000000000ffffff3b"; } ,[object Object],[object Object],Perl のサンプルコード

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

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

クロスブラウザ対策 ,[object Object],[object Object],[object Object],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 ,[object Object],#!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack "S2", @_; return "GIF89a$sizef00000000000ffffff," . "0000000001000100000202L0100;"; } print "Content-Length: 35"; print "Content-Type: image/gif"; binmode(*STDOUT); print create_gif(65535, 65535); 1;

オールドタイプのための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規格 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],２０年前のデータ交換フォーマット ,[object Object],[object Object],[object Object]

ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です

GIF89a Oldtype

Recommended

Recommended

More Related Content

Similar to GIF89a Oldtype

Similar to GIF89a Oldtype (20)

More from takesako

More from takesako (19)

GIF89a Oldtype