JavaScript の世代間を埋めるパーツ -  過去と未来をつなぐ GIF89a - サイボウズ・ラボ株式会社 竹迫 良範 Real UNIX MAGAZINE Day (2007/11/03)
今日のお話
http://0xcc.net/misc/ggap.html  より Binary 2.0 Web 2.0 UNIX にみる世代間の断絶(高林さん説)
ハッカー世代間の感覚差(竹迫・説) <ul><li>1950,60,70 年代 以前 </li></ul><ul><ul><li>Binary Hacks  世代 </li></ul></ul><ul><ul><ul><li>old type ...
凡人  - 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) <ul><li>正しい GIF 画像でもある JavaScript ファイル </li></ul><ul><ul><li>JavaScript として実行できる GI...
Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
View source
Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print &quot;Hello Perl!&quot;} __END__ #*/1);function GIF89a(){alert(&quot...
JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/ 1 );function GIF89a(){aler...
HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/1);function GIF89a(){alert(&quo...
How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX ...
従来:Ajaxでクロスドメイン通信する方法 <ul><li>1. XMLHttpRequest + Local proxy </li></ul><ul><ul><li>非同期通信 API の元祖  XMLHttpRequest </li></u...
JSONPの動作原理 function  callback (data) { // …  ここに処理を書く … } (1)コールバック関数の定義 (2) script tag  の動的生成 (3)サーバからのレスポンス クロスドメインで Jav...
GIF89a でクロスドメイン通信 <img src=“null.gif?q=param&quot; onload=“ callback (this.width)&quot;> function  callback (data) { //… d...
画像ファイルのサイズ比較 <ul><li>画像サイズ  1x1 (モノクロ GIF ) </li></ul><ul><ul><li>35 byte </li></ul></ul><ul><li>画像サイズ  1000x1000 (モノクロ GI...
G I F (tm) Graphics Interchange Format (tm) A standard defining a mechanism for the storage and transmission of raster-bas...
GIF87a 仕様書 bits 7 6 5 4 3 2 1 0  Byte # +---------------+ |  |  1 +-Screen Width -+  Raster width in pixels (LSB first) | ...
任意の画像幅をできるだけ短く生成したい <ul><li>Image Block の存在しない GIF Header だけ </li></ul><ul><li>画像の幅と高さのサイズ情報をサーバで生成 </li></ul><ul><li>最小で2...
Firefox  ではサイズ情報を読めた!
しかし、 IE  では壊れた画像と認識 …  orz サイズ情報を読み出せない…
GRAPHICS INTERCHANGE FORMAT(sm) Version 89a (c)1987,1988,1989,1990 Copyright CompuServe Incorporated Columbus, Ohio http:/...
クロスブラウザ対策 <ul><li>GIF89aの形式にして </li></ul><ul><li>1x1のダミーの Image Block を挿入すると </li></ul><ul><li>IEでも解釈するように </li></ul>http:...
GIFファイルのデータ構造 +-----------------------+ | +-------------------+ | | |  GIF Signature  | | | +-------------------+ | | +---...
return 16bit x 2 <ul><li>PerlでのGIF89a出力例(固定長35byte) </li></ul>#!/usr/bin/perl use strict; use warnings; sub create_gif { m...
It works!
オールドタイプのためのC言語ライブラリ #include <stdio.h> #define print_gif_head() do {  printf(  &quot;Content-Length: 35
&quot;  &quot;Cont...
 
!!
以上 GIF89a ハック 終了
歴史の古いGIF規格 <ul><li>GIF </li></ul><ul><ul><li>GIF87a(1987年) </li></ul></ul><ul><ul><li>GIF89a(1989年) </li></ul></ul><ul><li...
温故知新
ご清聴ありがとうございました [ 宣伝 ]  サイボウズ・ラボでは人材募集中です
Upcoming SlideShare
Loading in …5
×

GIF89a Oldtype

8,295 views

Published on

Real UNIX MAGAZINE Day
http://www.ascii.co.jp/pb/unixmag-dvd/event/

Published in: Technology, Spiritual
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,295
On SlideShare
0
From Embeds
0
Number of Embeds
503
Actions
Shares
0
Downloads
83
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

GIF89a Oldtype

  1. 1. JavaScript の世代間を埋めるパーツ - 過去と未来をつなぐ GIF89a - サイボウズ・ラボ株式会社 竹迫 良範 Real UNIX MAGAZINE Day (2007/11/03)
  2. 2. 今日のお話
  3. 3. http://0xcc.net/misc/ggap.html  より Binary 2.0 Web 2.0 UNIX にみる世代間の断絶(高林さん説)
  4. 4. ハッカー世代間の感覚差(竹迫・説) <ul><li>1950,60,70 年代 以前 </li></ul><ul><ul><li>Binary Hacks 世代 </li></ul></ul><ul><ul><ul><li>old type 、計算機の構造をきちんと理解、昔話好き </li></ul></ul></ul><ul><li>1980 年代 以降 </li></ul><ul><ul><li>Text Hacks 世代 </li></ul></ul><ul><ul><ul><li>ブラウザ ⇔ コンピュータ </li></ul></ul></ul><ul><ul><ul><ul><li>CPU 、アセンブリ言語 ⇔ JavaScript </li></ul></ul></ul></ul><ul><ul><ul><ul><li>画面出力(エスケープシーケンス) ⇔ HTML/CSS </li></ul></ul></ul></ul><ul><ul><ul><ul><li>外部記憶装置(仮想ドライバ) ⇔ Web サーバ( CGI ) </li></ul></ul></ul></ul><ul><li>平成生まれ </li></ul><ul><ul><li>理解の範囲を超える新人類 </li></ul></ul><ul><ul><ul><li>ケータイで親指プログラミング </li></ul></ul></ul>
  5. 5. 凡人 - input device 109 key
  6. 6. old type hacker - input device 60 key
  7. 7. new type hacker - input device 12 key
  8. 8. next - input device ??? 0 key ?
  9. 9. マシン語を知らない子ども達
  10. 10. バイナリアン光成さんの話( LL Spirit にて)
  11. 11. Web のマシン語 || JavaScript
  12. 12. Shibuya.JS x John Resig
  13. 13. 以上 前フリ 終了
  14. 15. 本題
  15. 16. GIF89a (ハック)
  16. 17. HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot
  17. 18. Polyglot
  18. 19. 5秒でわかる Polyglot (JavaScript in GIF89a) <ul><li>正しい GIF 画像でもある JavaScript ファイル </li></ul><ul><ul><li>JavaScript として実行できる GIF 画像ファイル </li></ul></ul><ul><li>IE/Firefox/Opera/Safari できちんと動作 </li></ul><ul><ul><li><script src=“alert0.gif” language=“JavaScript”> </li></ul></ul>
  19. 20. Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
  20. 21. View source
  21. 22. Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print &quot;Hello Perl!&quot;} __END__ #*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */// ;
  22. 23. JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/ 1 );function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */ // ;
  23. 24. HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /* <body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1> <!-- ................................................ ................................................ ................................................ ................................................ --> <img src=?> <script src=# language=JavaScript></script> </div> */// ;
  24. 25. How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol
  25. 26. 従来:Ajaxでクロスドメイン通信する方法 <ul><li>1. XMLHttpRequest + Local proxy </li></ul><ul><ul><li>非同期通信 API の元祖 XMLHttpRequest </li></ul></ul><ul><ul><li>クロスドメイン通信ができないので Local proxy </li></ul></ul><ul><ul><ul><li>パフォーマンスの問題(自サーバの Proxy 経由でアクセス) </li></ul></ul></ul><ul><ul><ul><li>セキュリティの問題( Open Proxy 悪用の危険性) </li></ul></ul></ul><ul><li>2. Flash の力を借りる + crossdomain.xml </li></ul><ul><ul><li>SocketJS の実装など </li></ul></ul><ul><li>3. <script src=“http://.../.js”> の動的生成 </li></ul><ul><ul><li>JSONP で最近ブーム </li></ul></ul>
  26. 27. JSONPの動作原理 function callback (data) { // … ここに処理を書く … } (1)コールバック関数の定義 (2) script tag の動的生成 (3)サーバからのレスポンス クロスドメインで JavaScript 関数を実行 <script src=“http://example.com/data.json? jsonp= callback ” /> callback( { foo: 'This is foo.', bar: 'This is bar.', moe: 'This is moe.' } );
  27. 28. GIF89a でクロスドメイン通信 <img src=“null.gif?q=param&quot; onload=“ callback (this.width)&quot;> 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 画像の幅サイズ
  28. 29. 画像ファイルのサイズ比較 <ul><li>画像サイズ 1x1 (モノクロ GIF ) </li></ul><ul><ul><li>35 byte </li></ul></ul><ul><li>画像サイズ 1000x1000 (モノクロ GIF ) </li></ul><ul><ul><li>1,735 byte </li></ul></ul><ul><li>画像サイズ 1000x1000 ( 24bpp BMP ) </li></ul><ul><ul><li>3,000,054 byte (約 3MB ) </li></ul></ul><ul><li>画像サイズ 65535x65535 ( 24bpp BMP ) </li></ul><ul><ul><li>約 12GB </li></ul></ul><ul><ul><li>ワークエリア足りません… orz </li></ul></ul>
  29. 30. 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
  30. 31. GIF87a 仕様書 bits 7 6 5 4 3 2 1 0 Byte # +---------------+ | | 1 +-Screen Width -+ Raster width in pixels (LSB first) | | 2 +---------------+ | | 3 +-Screen Height-+ Raster height in pixels (LSB first) | | 4 +-+-----+-+-----+ M = 1, Global color map follows Descriptor |M| cr |0|pixel| 5 cr+1 = # bits of color resolution +-+-----+-+-----+ pixel+1 = # bits/pixel in image | background | 6 background=Color index of screen background +---------------+ (color is defined from the Global color |0 0 0 0 0 0 0 0| 7 map or default map if none specified) +---------------+
  31. 32. 任意の画像幅をできるだけ短く生成したい <ul><li>Image Block の存在しない GIF Header だけ </li></ul><ul><li>画像の幅と高さのサイズ情報をサーバで生成 </li></ul><ul><li>最小で20byte固定長 </li></ul>sub create_gif { my ($width, $height) = @_; my $size = pack &quot;S2&quot;, $width, $height; return &quot;x47x49x46x38x37x61$sizexf0x00x00x00x00x00xffxffxffx3b&quot;; } <ul><li>width と height の 16bit ずつ </li></ul><ul><ul><li>つまり 32bit の情報をサーバ側で GIF 形式にエンコードして渡せる </li></ul></ul>Perl のサンプルコード
  32. 33. Firefox ではサイズ情報を読めた!
  33. 34. しかし、 IE では壊れた画像と認識 … orz サイズ情報を読み出せない…
  34. 35. GRAPHICS INTERCHANGE FORMAT(sm) Version 89a (c)1987,1988,1989,1990 Copyright CompuServe Incorporated Columbus, Ohio http://www.w3.org/Graphics/GIF/spec-gif89a.txt
  35. 36. クロスブラウザ対策 <ul><li>GIF89aの形式にして </li></ul><ul><li>1x1のダミーの Image Block を挿入すると </li></ul><ul><li>IEでも解釈するように </li></ul>http://www.tohoho-web.com/soft/wcnt.htm とほほの WwwCounter で使用されている GIF 画像連結ライブラリの動作原理にインスパイア 独立した一つの Image Block
  36. 37. 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
  37. 38. return 16bit x 2 <ul><li>PerlでのGIF89a出力例(固定長35byte) </li></ul>#!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack &quot;S2&quot;, @_; return &quot;GIF89a$sizexf0x00x00x00x00x00xffxffxff,&quot; . &quot;x00x00x00x00x01x00x01x00x00x02x02Lx01x00;&quot;; } print &quot;Content-Length: 35 &quot;; print &quot;Content-Type: image/gif &quot;; binmode(*STDOUT); print create_gif(65535, 65535); 1;
  38. 39. It works!
  39. 40. オールドタイプのためのC言語ライブラリ #include <stdio.h> #define print_gif_head() do { printf( &quot;Content-Length: 35 &quot; &quot;Content-Type: image/gif &quot; &quot; &quot;); } 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); }
  40. 42. !!
  41. 43. 以上 GIF89a ハック 終了
  42. 44. 歴史の古いGIF規格 <ul><li>GIF </li></ul><ul><ul><li>GIF87a(1987年) </li></ul></ul><ul><ul><li>GIF89a(1989年) </li></ul></ul><ul><li>XML </li></ul><ul><ul><li>規格化(1998年) </li></ul></ul><ul><li>JSON </li></ul><ul><ul><li>RFC4627(2006年) </li></ul></ul>20年前の データ交換 フォーマット <ul><li>コンピュータにやさしい </li></ul><ul><li>バイナリアンにやさしい </li></ul><ul><li>地球にやさしい </li></ul>
  43. 45. 温故知新
  44. 46. ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です

×