Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection
-
Upload
takesako -
Category
Technology
-
view
4.057 -
download
2
description
Transcript of Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection
![Page 1: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/1.jpg)
続イメージファイトShibuya.pm #8
続イメージファイトShibuya.pm #8
サイボウズ・ラボ株式会社
竹迫 良範
id:TAKESAKO
![Page 2: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/2.jpg)
はじめに
![Page 3: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/3.jpg)
3
Internet Explorer のセキュリティ設定
デフォルトが「有効にする」のまま
![Page 4: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/4.jpg)
4
![Page 5: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/5.jpg)
5
IE での実行結果
![Page 6: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/6.jpg)
6
orzorz
![Page 7: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/7.jpg)
7
mod_imagefightイメージファイト
![Page 8: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/8.jpg)
8
イメージファイトとは?イメージファイトとは?
Apache 2OutputFilter
無毒化
Web Server
攻撃コードが含まれているかもしれない
mod_imagefight
Safe Image
internet
XSS Image
![Page 9: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/9.jpg)
9
mod_imagefight の使用法( α 版)mod_imagefight の使用法( α 版)
httpd.conf (例)
LoadModule imagefight_module modules/mod_imagefight.so
<Location />
# AddOutputFilter ImageFight .png .bmp .gif .jpg
AddOutputFilterByType ImageFight image/gif image/jpeg
</Location>
拡張子、 Content-Type による Filter 適用
![Page 10: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/10.jpg)
10
mod_imagefight をインストールした Web サーバからPNG 画像を読み込んだとき(動的に画像を書き換え)
イメージファイト動作画面( IE + Fiddler )
![Page 11: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/11.jpg)
11
IE コンテンツ自動判別による XSS防止
Anti-XSS コードの自動挿入( Apache )
![Page 12: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/12.jpg)
12
Why?イメージファイト
![Page 13: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/13.jpg)
ブラウザのバグ(仕様)
Web アプリ側で ad-hoc に対応するのは面倒だよね
![Page 14: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/14.jpg)
14
![Page 15: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/15.jpg)
15
続イメージファイト
![Page 16: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/16.jpg)
ブラウザのバグ(仕様)
を利用して、ブラウザ判定できる?
![Page 17: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/17.jpg)
17
JavaScript/CSSを使わない
ブラウザ判別
![Page 18: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/18.jpg)
18
HTML2.0
![Page 19: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/19.jpg)
19
突然ですが、 HTML 2.0 Quiz の時間です。突然ですが、 HTML 2.0 Quiz の時間です。
<img src="1.gif" src="2.gif">表示される画像は?
(1) 1.gif が表示される (2) 2.gif が表示される (3) ブラウザによって異なる
Answers.
【問題】
![Page 20: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/20.jpg)
20
突然ですが、 HTML 2.0 Quiz の時間です。突然ですが、 HTML 2.0 Quiz の時間です。
<img src="1.gif" src="2.gif">表示される画像は?
(1) 1.gif が表示される (2) 2.gif が表示される (3) ブラウザによって異なる
Answers.
【問題】
![Page 21: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/21.jpg)
21
【問題2】【問題2】
<img /src = “1.gif” src(\x00) = “2.gif” src(\x0c) = “3.gif” src = “4.gif”/>
(1) 1.gif が表示される (2) 2.gif が表示される (3) 3.gif が表示される(4) 4.gif が表示される
Answers.
※ ブラウザによって異なる
![Page 22: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/22.jpg)
応用問題
![Page 23: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/23.jpg)
23
print<<EOF;<img /src\x00="ie.gif" /''src\x00="firefox1_5.gif" /''src="firefox2_0.gif" /""src="gecko_others.gif" "s\x00rc="safari2.gif" "src="safari3.gif" ""src="konqueror.gif" src\x00="w3m.gif" src\x0c="opera.gif" src="others.gif" src="lynx.gif"/>EOF
![Page 24: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/24.jpg)
http://wafful.org
Demo
![Page 25: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/25.jpg)
25
![Page 26: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/26.jpg)
26
Konqueror や Safari2 の判定もできるよ
![Page 27: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/27.jpg)
27
以上続きは Web で
![Page 28: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/28.jpg)
28
_ ∩ ( ゚∀゚ ) 彡 ( ⊂彡 | | し ⌒J
わっふる ! わっふる !
wafful.org
![Page 29: Shibuya.pm#8 - ImageFight - HTML 2.0 New Browser Detection](https://reader035.fdocument.pub/reader035/viewer/2022062419/557961d7d8b42ab6648b5349/html5/thumbnails/29.jpg)
29Debugging Browser-detection on papersDebugging Browser-detection on papers
ご清聴ありがとうございましたご清聴ありがとうございました