gif89a oldtype

JavaScript の世代間を埋めるパーツ

- 過去と未来をつなぐ GIF89a -

JavaScript の世代間を埋めるパーツ

- 過去と未来をつなぐ GIF89a -

サイボウズ・ラボ株式会社竹迫良範

Real UNIX MAGAZINE Day (2007/11/03)

Apr 12, 2023 2

今日のお話

Apr 12, 2023 3http://0xcc.net/misc/ggap.html　より

Binary 2.0 Web 2.0

UNIX にみる世代間の断絶（高林さん説）

Apr 12, 2023 4

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

1950,60,70 年代以前 Binary Hacks 世代

old type 、計算機の構造をきちんと理解、昔話好き 1980 年代以降

Text Hacks 世代ブラウザ ⇔ コンピュータ

CPU 、アセンブリ言語 ⇔ JavaScript 画面出力（エスケープシーケンス） ⇔ HTML/CSS 外部記憶装置（仮想ドライバ） ⇔ Web サーバ（ CGI ）

平成生まれ理解の範囲を超える新人類

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

Apr 12, 2023 5

凡人 - input device凡人 - input device

109 key109 key

Apr 12, 2023 6

old type hacker - input device

old type hacker - input device

60 key60 key

Apr 12, 2023 7

new type hacker - input device

new type hacker - input device

12 key12 key

Apr 12, 2023 8

next - input device ???next - input device ???

0 key ?0 key ?

Apr 12, 2023 9

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

Apr 12, 2023 10

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

Apr 12, 2023 11

Web のマシン語||

JavaScript

Apr 12, 2023 12

Shibuya.JS x John Resig

Apr 12, 2023 13

以上前フリ

終了

Apr 12, 2023 14

Apr 12, 2023 15

本題

Apr 12, 2023 16

GIF89a（ハック）

Apr 12, 2023 17

HTML/CSS & JS & Perlin GIF89a (valid)

HTML/CSS & JS & Perlin GIF89a (valid)

Web PolyglotWeb Polyglot

Apr 12, 2023 18

PolyglotPolyglot

Apr 12, 2023 19

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

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

IE/Firefox/Opera/Safari できちんと動作<script src=“alert0.gif” language=“JavaScript”>

Apr 12, 2023 20

Web Polyglot DEMO

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

Apr 12, 2023 21

View source

Apr 12, 2023 22

Perl in GIF89aPerl 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> */// ;

Apr 12, 2023 23

JavaScript in GIF89aJavaScript in GIF89a


Apr 12, 2023 24

HTML/CSS in GIF89aHTML/CSS in GIF89a


Apr 12, 2023 25

How to break same-origin-policy.(Parallelize cross-domain access)

Other GIF89a hacks

GIF89a Binary Image Objectfor AJAX communications Protocol

Apr 12, 2023 26

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

1. XMLHttpRequest + Local proxy非同期通信 API の元祖 XMLHttpRequestクロスドメイン通信ができないので Local proxy

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

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

2. Flash の力を借りる + crossdomain.xmlSocketJS の実装など

3. <script src=“http://.../.js”> の動的生成JSONP で最近ブーム

Apr 12, 2023 27

JSONP の動作原理JSONP の動作原理

<script src=“http://example.com/data.json?jsonp=callback” />

callback( { foo: 'This is foo.', bar: 'This is bar.', moe: 'This is moe.'} );

function callback(data) { // … ここに処理を書く …}

（１）コールバック関数の定義

（２） script tag の動的生成

（３）サーバからのレスポンス

クロスドメインでJavaScript 関数を実行

Apr 12, 2023 28

GIF89a でクロスドメイン通信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 にしても OKhttp://example.com/webapi/null.gif?q=foobar

戻り値： GIF 画像の幅サイズ

Apr 12, 2023 29

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

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

画像サイズ 1000x1000 （モノクロ GIF ） 1,735 byte

画像サイズ 1000x1000 （ 24bpp BMP ）3,000,054 byte （約 3MB ）

画像サイズ 65535x65535 （ 24bpp BMP ）約 12GBワークエリア足りません… orz

Apr 12, 2023 30

G I F (tm)

Graphics Interchange Format (tm)

A standard defining a mechanism for the storage and transmissionof raster-based graphics information

June 15, 1987

(c) CompuServe Incorporated, 1987 All rights reserved

http://members.aol.com/royalef/gif87a.txt

Apr 12, 2023 32

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

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

画像の幅と高さのサイズ情報をサーバで生成最小で 20byte 固定長sub create_gif { my ($width, $height) = @_; my $size = pack "S2", $width, $height; return "\x47\x49\x46\x38\x37\x61$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff\x3b";}

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

Perl のサンプルコード

Apr 12, 2023 33

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

Apr 12, 2023 34

しかし、 IE では壊れた画像と認識 … orz

サイズ情報を読み出せない…

Apr 12, 2023 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

Apr 12, 2023 36

クロスブラウザ対策クロスブラウザ対策

GIF89a の形式にして1x1 のダミーの Image Block を挿入するとIE でも解釈するように

http://www.tohoho-web.com/soft/wcnt.htm

とほほの WwwCounter で使用されているGIF 画像連結ライブラリの動作原理にインスパイ

ア

独立した一つの Image Block

Apr 12, 2023 37

GIF ファイルのデータ構造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

Apr 12, 2023 38

return 16bit x 2return 16bit x 2

Perl での GIF89a 出力例（固定長 35byte ）#!/usr/bin/perluse strict;use warnings;

sub create_gif { my $size = pack "S2", @_; return "GIF89a$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff," . "\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02L\x01\x00;";}

print "Content-Length: 35\n";print "Content-Type: image/gif\n\n";binmode(*STDOUT);print create_gif(65535, 65535);

1;

Apr 12, 2023 39

It works!

Apr 12, 2023 40

オールドタイプのための C 言語ライブラリオールドタイプのための C 言語ライブラリ

#include <stdio.h>

#define print_gif_head() do { \ printf( \ "Content-Length: 35\n" \ "Content-Type: image/gif\n" \ "\n"); \ } 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);}

Apr 12, 2023 41

Apr 12, 2023 42

!!!!

Apr 12, 2023 43

以上GIF89a ハック

終了

Apr 12, 2023 44

歴史の古い GIF 規格歴史の古い GIF 規格

GIFGIF87a （ 1987 年）GIF89a （ 1989 年）

XML規格化（ 1998 年）

JSONRFC4627 （ 2006 年）

２０年前のデータ交換

フォーマット

• コンピュータにやさしい• バイナリアンにやさしい• 地球にやさしい

Apr 12, 2023 45

温故知新

Apr 12, 2023 46

ご清聴ありがとうございましたご清聴ありがとうございました

[ 宣伝 ] サイボウズ・ラボでは人材募集中です

[ 宣伝 ] サイボウズ・ラボでは人材募集中です

gif89a oldtype

Technology