目次
問題: <div style=”display:none”>指定で非表示にならない
会社のホームページの担当者から「<div style=”display:none”>」を指定したコンテンツが非表示にならず、JavaScriptも動かない・・と相談を受けました。。
しかも、ブラウザによって動きが違うとのこと。
- Internet Explorerだと意図した通り非表示になるし、JavaScriptも動く。
- Google Chromeだと、非表示項目が表示されてしまい、JavaScriptも動かない。
現象はこちらでも再現できました。
奇妙なことに、Google Chromeのでデベロッパーツールを確認すると「display:none」は有効になっています。
なのに、非表示項目がしっかり表示されている。
これが問題になった現象です。
非表示にならなかった原因
JavaScriptも設定で無効にされているわけではありません。
調査依頼されたHTML以外を動かす分には普通に動きます。
動かないJavaScriptを眺めても、別に構文エラーがあるわけでもありません。
でも、デベロッパーツールのコンソールログには、エラーメッセージがありました。
意味合い的に「default-src が 'self' になっているから実行できない」という英語のメッセージがバンバン表示されてます。
default-src 'self'・・とはなんぞや。
調べていくと「default-src 'self'」とは、Content-Security-Policy(CSP)のヘッダの指定であることがわかりました。。
原因1:CSPがインラインのJavaScriptをとめていた
2つの現象のうち「JavaScriptが動かない」原因は、CSPによって、インラインのJavaScriptが実行できなくなっていたことでした。
CSP(Content-Security-Policy)は「クロスサイト スクリプティング(XSS)攻撃」などを防御する有効な方法であって、W3C の標準なので、今回は、お行儀の悪い書き方をしていたからCSPに止められた・・ということです。
原因2:display:noneもインラインのJavaScriptとみなされた
もうひとつの「display:none」の問題も、結局、根っこが同じでした。
つまり。
<Div style="xxx">は、インラインのスクリプトまたはevalのようにみなされるから、CSPによって処理されなくなっていた。
ということでした。
GoogleデベロッパーツールのStyleでは「display:none」が有効になっている。
しかし、裏でCSPによって、インラインのスクリプトと同等とみなされて、実行が止められていた・・ということなのですね。
対策:スクリプトとCSSを外部ファイル化する
対策は、ちゃんとお行儀のよい書き方にする・・つまり
インラインでHTML中に書いたJavaScriptを外部ファイル化する。
でした。
この対策はJavaScriptだけでなくも同じです。
です。
どちらも、その対策で解決しました。
疑問:なぜIEでだけちゃんと動いていたのか
原因はわかって、解決はしたけれど、「じゃあ、何故、IEで動いてたのか?」という疑問は残ります。
IEもCSPには対応しているはずですから、仕様通りであれば動かないはずです。
なのに、Internet Explorerだと意図した通り非表示になるし、JavaScriptも動いていたのは、どうも納得いきません。
気になって調べてみると・・よくある「IEの独自仕様」というやつでした。
IEもCSPは対応してはいますが、標準のままではなく、IEは「X-Content-Security-Policy」という独自仕様で実装している・・とのことみたいですね。
ちょっと、あきれました。
懲りないところだなあ・・と思ったのですが、マイクロソフト自体も、もうIEを使わないでください・・的なアナウンスをだしてます。
引用すると
Internet Explorer との後方互換性が必要な業務 Web システムには Internet Explorer を利用いただき、Internet Explorer でなければならない場合以外は Microsoft Edgeをご利用いただくことを提案してきました。
とか
現在の世の中にあふれるリッチなコンテンツは、すでに Internet Explorer ではサポートしていない最新技術を利用して実現されており、その流れは今後さらに加速していくと言えます。
また、以前のブログ記事でお伝えしたとおり 2020 年には Adobe Flash が廃止になるように、ActiveX なども含め古いテクノロジーは廃止される方向に向かっており、「Internet Explorer でなければ表示できない Web コンテンツ」は徐々に少なくなっていきます。
ということなので。
もう、IEはよほどの理由がなければ使わないで・・ということみたいです。
だから、IEはそういうもんだ・・ということでスルーしておくしかなさそうです。
ではでは。