オフラインモードのWebアプリケーション動作に必要な４つの機能
カテゴリー:HTML & CSS
オフラインモードのWebアプリケーション動作に必要な４つの機能
Firefox 2.0のオフラインモードとは表示したページのデータをキャッシュするモードであり、この機能だけではオフラインでAjaxなどを駆使したGmail、ZimbraなどのWebアプリケーションを動かすことは、できません。
Chris Double氏はブログで以下のオフラインでWebアプリケーションを動作させるため、FireFoxは以下の4つの機能を備える必要があると述べています。
- DOM Storage .
- Offline Cache.
- Offline Events.
- JAR file Protocol.
[参考:Bluish Coder :Offiline Zimbra with Firefox]
なお上のアドレスの記事の一番下には、Firefox3のα vartionを使いオフラインでZimbraにログインしてメール機能を使いっている様子がアップされています。
こちら
ということで、この４つの機能について、簡単に調べてみました。
DOM Storage(client-side storage)
Mozilla Developer Centerに仕様に関するページがあったので、導入の説明部分だけ簡単に翻訳してみました。
DOM Storageメカニズムによって、「Stringのキーと値を対でセキュアに保存しておき、後で使用するときに取得する」、ということが可能になります。DOM Storageの目標はインターアクティブなアプリケーションを作成するための手段を総合的に提供することです。（これにはオフラインでの作業を可能にする機能を発展させることも含まれています。）
現在、Mozillaベースのブラウザのみ、動作するDOM Storageを実装しています。しかし、Internet Explorerも、これに似た"userData behavior"という機能を持っています。この機能によりInternet Exploreでも複数のブラウザのセッション間でデータを持ちまわることが可能です。
ブラウザの機能のみで適当な量のデータをいつでも保管しておく方法は存在していないため、DOM Storageは役立つでしょう。ブラウザのクッキーは容量に制限があり、また、系統だててデータを保管しつづける方法も提供されていません。そして他の（例えばFlash Local Storageなど）は余計なプラグ印を導入する必要があります。
......
......
[参考: Mozilla Developer Center:DOM:Storage ]
つまり、クライアントに情報をストーレジしておくための機能。
例えばメールアプリケーションだとメールやフォルダーなどの情報を、オンライン時にあらかじめストレージしておく。
「only Mozilla-based browsers provide a working implementation of the DOM Storage specification」
とあるように、Firefoxにはすでに実装されている。またIEにもuserData behavior使い対応することができる。
日本語のサイトで、これに関するデモを公開しているサイトがあったので紹介。
Young risk taker:IEとFirefox2.0以上で動作するClient Side Storage
Offline Cache
Webアプリケーションのためのキャッシュドライブ。（画像、ページ、などなどをキャッシュ）
キャッシュを読み込むためには、<link>要素に「a rel="offline-resource"」を記述する。
この機能はFirefox2には実装されていないが、Firefox3に導入される予定。
下記URLにてパッチが公開されている。
Add an API for putting resources in an offline cache
Offline Events.
ユーザがブラウザのメニューから、オフラインを選択したとき、あるいはネットワークの接続が切れたときに、オフラインとオンラインを切り替えるイベントを発生させる機能。
これはFirefox2には、まだ導入されておらず、Firefox3に導入される予定。
Firefoxの対応の現状と予定については下記URL。
Fire WHATWG DOM events when going online or offline
JAR file Protocol.
オフライン・キャッシュからjavaアプレットに取り込んで計算?ちょっとよく理解できなかったのでおいておきます。。
WHATWGによる標準化に関して
Robert O'Callahan氏が上で挙げた４つの機能の標準化に関してコメントしていたので、載せておきます。
これらのうち2つはすでにWHATWG specとなっていることに注目してください。さらにjar URI schemeは、すでに様々な製品で標準化されています。4つの中で、本当に新しい機能は<link rel="offline-resource">を使っている部分です。これは、アプリケーションを妨げることなく、保管された"offline cache"の中からresourceを取得します。これはとてもシンプルで、私たちは（導入するのに）正当な理由があるという自信があります。私達は、なんとかしてこれを標準化しようと思っています。また、私達はWebを前に進めるために、FirefoxでなくポピュラーなブラウザがこれらのAPIs ASAPをサポートすることを望んでいます。
[参考:Well, I'm Back: Offline Web Applications]
他にもオフライン機能に関する展望が述べられています。
MS-IEでODSファイルにアクセスするとIPで保存される
カテゴリー:HTML & CSS
Internet ExplorerでWebサーバ上(Apache)のOpenOfficeで作成したODSファイルにアクセスすると
ZIPファイルとして扱われ保存画面が開いてファイル名に拡張子:zipがついてしまった。
（FireFoxでは問題なくodsファイルとして扱われた）
Etherealで通信をキャプチャーしてIEでODSファイルにアクセスしたときのheaderを見てみると以下のようにContent-Typeがtext/plaintになっていた。
Connection: close
Content-Type: text/plain
どうやらサーバ側にODSファイルのContent-Typeが登録されていないため
text/plainとしてかえされるようだ。
これがブラウザによってODSがダウンロードできない原因。
そこでODSをおいてあるディレクトリに以下の内容の.htaccessファイルを
作成した。
AddType application/vnd.sun.xml.calc .odsこの状態で確認するとIEでも確認できた。
さらに調べたところ以下の設定のほうが望ましいようです。
参考:Type Detection - Examples(OpenOffice.org)
AddType application/vnd.oasis.opendocument.spreadsheet ods
ThunderbirdののデータをUSBメモリにいれWin,linuxで共有
カテゴリー:HTML & CSS
USBメモリにメールデータを入れておくと使いかってがいいので利用しているひとも多いのではないでしょうか。
今回は使うマシンがWindows,linuxどちらでもUSBにデータを入れておけばメールの送受信ができる方法を紹介します。
1.普段使っているマシンでプロファイルデータをUSBメモリコピーする
プロファイルデータは
linuxの場合
/home/username/.thunderbird/ymoq4y5d.default
のように入っている。
*usernameとymoq4y5dの部分はてきとうに書き換えてください。
Windowsの場合
C:\Documents and Settings\username\Application Data\Thunderbird\Profiles\ymoq4y5d.default
のように入っている
*usernameとymoq4y5dの部分はてきとうに書き換えてください。
上記の場所からUSBメモリのてきとうなところにファイルをコピーしてください。
2.出先のマシンでにThunderbirdが入っていなければインストール
公式サイトからサンダーバードをダウンロードしてインストールしてください。
http://www.mozilla-japan.org/products/thunderbird/
3.プロファイルディレクトリを指定してオプション起動する
linuxの場合はターミナルからWINDOWSの場合はコマンドプロンプトから"-P"オプションをつけて起動する
4.ユーザプロファイルを作成
「新しいプロファイルを作成」→「次へ」→「ファイルを選択」で１でUSBに保存したディレクトリを選択→「完了」
以上で設定は完了です
不特定ユーザ投稿型WebアプリケーションにおけるHTMLタグの制限
カテゴリー:HTML & CSS
不特定の人が投稿をすることができるWebアプリケーション(代表的な例では掲示板など)ではHTMLタグの使用を許可すると
ブラウザクラッシャーを組み込まれたり、フレームやフォームをつかって悪意のある外部サイトへの誘導されたりする可能性があります。
しかしすべてのタグを禁止してしまうとアプリケーションによってはユーザが不便になる場合もあります。
そこで危険のあるタグを制限する例をいくつかあげてみます。
◯imgタグ
---問題点---
タグ内にsrc="file:///c:/con/con/con.con"
Windows 9x系のマシンが停止するためブラウザクラッシャーに利用される。
タグ内にsrc="mailto:001@example.org"
メールウィンドウが勝手に開くためブラウザクラッシャーに利用される。
タグ内にsrc="file:///A:/example.002"
フロッピーディスクドライブにアクセスさせようとする、ブラウザクラッシャーに利用される。
その他にもimgタグを許可しておくとWebビーコンに利用される可能性がある
Webビーコンについては下のアドレスを参考
参考
@IT
http://www.atmarkit.co.jp/icd/root/96/92582496.html
「Webバグは悪玉じゃない」、米ダブルクリックがブロック機能に反論：
ITpro
http://itpro.nikkeibp.co.jp/free/NC/NEWS/20040929/150540/
---対処方法---
imgタグの使用は基本的にできないようにしておく。
ユーザに画像を投稿させる機能をつけたい場合はアプリケーションにアップローダ機能をつけアプリケーションを置くサーバにアップされた画像のみ表示させるようにすることで上の問題を回避できる
◯script,object,appleタグ
---問題点---
Java Scriptなどのプログラムを使い無限ループ、クロスサイトスクリプティングを用いたフィッシング詐欺などの利用される可能性がある。
---対処方法---
投稿文にjavascriptの開始タグがあれば一部分を置換するなどしてjavascriptのコードを書けないようにしておく。
javascriptの開始例には以下のようなものがある。
<script type="text/javascript">
<script language="JavaScript">
又onload,onclickのようなイベントハンドラをタグ中に入れることで実行することができる。よってこのイベントハンドラとなるものをすべて書けないようにしておく必要がある
イベントハンドラには以下のようなものがある。(javascript 1.3)
onAbort
onBlur
onChange
onClick
ondragdrop
onError
onFocus
onkeydown
onkeypress
onkeyup
onLoad
onmousedown
onMouseOut
onMouseOver
onmouseup
onmove
onReset
onresize
onSelect
onSubmit
onUnload
◯tableタグ
---問題点---
サイトデザインをtable構成で行っている場合、</table>などの投稿をされた場合デザインが崩れる。
---対処方法---
1.tableタグそのものを使えないようにする
2.<table>タグと</table>タグの位置が一致しない場合に自動的に</table> タグを挿入するようにする。
◯styleタグ
---問題点---
スタイルシートを使って文字サイズを極端に大きくしたりと意図しない使われ方をする可能性がある。
---対処方法---
スタイルシートタグを使えないようにしておき、スタイルシートが外部ファイルのみでコントロールする。
◯HTMLヘッダー関係タグ(html，head，meta，base，body)
---問題点---
HTMLヘッダーを変更されてしまう可能性がある。
---対処方法---
HTMLヘッダー関係のタグは使用をできないようにしておく。
◯フレームタグ(frame,iframe,frameset)
---問題点---
フレームを使い外部のサイトを呼び出されてしまう可能性がある
---対処方法---
HTMLヘッダー関係のタグは使用をできないようにしておく。
◯linkタグ
---問題点---
制作者が意図しない外部のファイルを読み込ませられるおそれがある。
---対処方法---
linkタグは使用をできないようにしておく。
◯formタグ
---問題点---
フォームを勝手に埋めこまれて、ボタンなどで危険なURLに誘導されてしまう可能性、
ページ観覧者が意図しないまま情報を不特定の人に与えてしまう可能性などがある。
---対処方法---
formタグは使用をできないようにしておく。
◯embed、bgsoundタグ
---問題点---
ページに音楽や動画などを
上に書いたようなタグは最小限のものです。
アプリケーションの目的によって安全かつ利便性があるように
使用できるタグをコントロールすることが必要です。
◯参考
TRUSNET：セキュアプログラミング
http://www.trusnet.com/secinfo/docs/webprog1/index.html