先日、iframeを使用している自作のjQueryプラグインを使って構築しているWebアプリの管理画面が突然正常に動かなくなった!
ブラウザの開発者ツールのコンソールから原因を調べたら、iframe要素内で読み込んでいる同じドメイン内のリソースからフォームを投げたり親ウィンドウへのアクセスがことごとくエラーになっていたorz コンソールには、allow-modalsがなんとかかんとか、という見たこともないエラー。
でも、エラーになるブラウザはchromeだけ。FireFoxやIEは問題なかったので、たぶんchromeの最近のバージョンアップでiframe要素のセキュリティが高くなってしまったのかなー、とよくよく調べたら、下記sandbox属性をiframeに追加すればちゃんと動くようになった。どうやらHTML5.1にchromeが対応しただけ? (というか、HTML5.1なんて、そんなもんあったの?無知は嫌だねぇ(_ _) 常にアンテナはっとかないとダメですよねぇ・・・)
- allow-modals
- allow-pointer-lock
- allow-popups
- allow-popups-to-escape-sandbox
- allow-top-navigation
名前からだいたいの想像はつくんですが・・・allow-modalsとかallow-popupsとか違いが分からない。また今度時間あったら調べよう。
もともと、<iframe sandbox=”allow-same-origin allow-forms allow-scripts”> という風にしてたんですが・・・もっと調べたら、上記5つのsandbox属性は、HTML5.1から追加された?もののようですね。
(この辺、自分ではよく分かってません(_ _)
ってことは、このまま放っておくと、InternetExplorerはともかく、いずれはFireFoxもMicrosoft Edgeも動かなく・・・。このプラグイン使っているところは、修正したプラグインのJSファイルだけ上書き全部しないとなー。
根本的にはiframe要素をすべて排除して、全てajaxな作り方すれば良かったんですけどね・・・中途半端は良くないですね・・・でも、iframeって便利なんですよね(^.^;;;