無料ブログ「rentafree.net」の管理人ブログ

技術的な話になりますが・・・

技術的な話になりますが、
公式サイトトップページに、
非ログイン状態だとログインフォームが表示されますが、
ログインフォームを普通に表示しちゃうのって、セキュリティ的によろしく無いと思うんで、
<iframe>で分離できないかな・・・
と考えてるんですが、
HTML5の、
<iframe srcdoc seamless sandbox>
が使えないかな・・・
と思ってたんですが、
現状、主要ブラウザの全てがsrcdocとseamlessに対応していないんですが、
Google Chrome 20(次のバージョン)
が、両方に対応していることに気づいたのでちょい実験してみました。
ちなみに、sandboxはChromeは現バージョンでも対応しているんですが、
sandboxも他のブラウザは対応していません。


実験ですが、
まず、seamlessとsandboxの同時設定なんですが、
HTML5解説サイト見て回ると、
「seamlessとsandboxの同時設定はできない」
的なこと書かれてたりするんですが、
W3Cの仕様書見てると、同時に使える気がしてたんですが、
試したところ同時設定有効の様でした。

seamlessってのは、設定すると、
iframeが親フレームのコンテンツと一緒に枠なしでサイズ可変で表示されます。
目的では、内部に<form>の<input>入れるわけですが、
<input>のサイズってのはブラウザ依存だから、
<iframe>のサイズ固定は難しいが、多分seamlessで解決。

sandboxは、
今までの<iframe>は、
親フレームと<iframe>のドメインが一緒だとスクリプトでアクセスできちゃうんですが、
それを阻止できます。
試したところ、
document.getElementById('iframe')
がnullになる感じ。
たぶん、
sandbox="allow-forms allow-top-navigation"
てな感じの設定で使う。
これ付けないと、フォームも無効になってtareget="_top"も効かなくなる。
allow-same-origin
をつけるとスクリプトでアクセスできちゃう。

で、srcdocですが、
これ使うと、src属性にURLを書かずに、
属性に直接、iframe内のHTMLが書けちゃう。
タグは文字参照で書く。


で、実験結果ですが、期待通りに、
seamlessで親フレームのコンテンツのように表示できる。
sandboxでスクリプトアクセスを阻止できる。
srcdocで別ページを用意せずに直接フレーム内HTMLが書ける。
ってな感じでした。


これ実装する場合、
他ブラウザにはiframeを表示せずに、対応ブラウザだけiframe表示を考えましたが、HTMLだけじゃ無理かも。

でも、Chrome以外が対応した時にこの方法で判別できるか怪しいが、
if(document.createElement('iframe').srcdoc==undefined){
    alert('非対応');
}else{
    alert('対応');
}
こんな感じでスクリプト書けば判別できた。
Chrome19は非対応でChrome20は対応になる。
Chrome20はundefinedじゃなくて空文字ぽい。


そのうちこれ絡みの修正したいと思ってるんですが、
現状、Chromeの次期バージョン以外が対応しないんで、まだ早いかな・・・