"BOKU"のITな日常

テクノロジー以外にも、日常には、面白そうな”イット”がつまってるんだな

<div style=”display:none”>の指定がChromeのみ効かない原因と対策(備忘)

f:id:arakan_no_boku:20190228193237j:plain

会社のホームページの担当者から相談をうけた件を備忘をかねて書いておきます。 

<div style=”display:none”>を指定して、非表示にしたコンテンツが非表示にならず表示されてしまうし、JavaScriptも動かない・・と相談を受けました。。 

しかも、ブラウザによって以下のように動きが違うとのこと。

現象はこちらでも再現できました。

奇妙なことに、非表示項目が表示されてしまっている状態で、Google Chromeのでデベロッパーツールを確認すると「display:none」は有効になっています。

f:id:arakan_no_boku:20180329231610j:plain

なのに、しっかり表示されている。 

JavaScriptも設定で無効にされているわけではなく、調査依頼されたHTML以外を動かす分には普通に動きます。

かつ、動かないJavaScriptを眺めても、別に構文エラーがあるわけでもありません。

でも、デベロッパーツールのコンソールログには、エラーメッセージがあります。。 

意味合い的に「default-src が 'self' になっているから実行できない」という英語のメッセージがバンバン表示されてます。 

default-src 'self'・・とはなんぞや。

調べていくと「default-src 'self'」とは、Content-Security-Policy(CSP)のヘッダの指定であることがわかりました。。 

developers.google.com

そう。

2つの現象のうち「JavaScriptが動かない」原因は、CSPによって、インラインのJavaScriptが実行できなくなっていたことでした。

CSP(Content-Security-Policy)は「クロスサイト スクリプティングXSS)攻撃」などを防御する有効な方法であって、W3C の標準なので、今回は、お行儀の悪い書き方をしていたからCSPに止められた・・ということです。

対策は、ちゃんとお行儀のよい書き方にする・・つまり

インラインでHTML中に書いたJavaScriptを外部ファイル化する。

でした。

もうひとつの「display:none」の問題も、結局、根っこが同じでした。

つまり。

<Div style="xxx">は、インラインのスクリプトまたはevalのようにみなされるから、CSPによって処理されなくなっていた。

ということでした。

GoogleデベロッパーツールのStyleでは「display:none」が有効になっている。

しかし、裏でCSPによって、インラインのスクリプトと同等とみなされて、実行が止められていた・・ということなのですね。 

この対策もJavaScriptと同じです。

<Div style="xxx">の書き方をやめて、きちんとCSSに外出しにして、なんらかのセレクタで指定する

です。

どちらも、その対策で解決しました。

 

しかし、原因はわかって、解決はしたけれど、「じゃあ、何故、IEで動いてたのか?」という疑問は残ります。

IEもCSPには対応しているはずですから、仕様通りであれば動かないはずです。

 なのに、Internet Explorerだと意図した通り非表示になるし、JavaScriptも動いていたのは、どうも納得いきません。

気になって調べてみると・・よくある「IEの独自仕様」というやつでした。

IEもCSPは対応してはいますが、標準のままではなく、IEは「X-Content-Security-Policy」という独自仕様で実装している・・とのことみたいですね。

yuw27b.hatenablog.com 

ちょっと、あきれました。 

懲りないところだなあ・・と思ったのですが、マイクロソフト自体も、もうIEを使わないでください・・的なアナウンスをだしてます。

social.msdn.microsoft.com

引用すると

Internet Explorer との後方互換性が必要な業務 Web システムには Internet Explorer を利用いただき、Internet Explorer でなければならない場合以外は Microsoft Edgeをご利用いただくことを提案してきました。

とか

現在の世の中にあふれるリッチなコンテンツは、すでに Internet Explorer ではサポートしていない最新技術を利用して実現されており、その流れは今後さらに加速していくと言えます。

また、以前のブログ記事でお伝えしたとおり 2020 年には Adobe Flash が廃止になるように、ActiveX なども含め古いテクノロジーは廃止される方向に向かっており、「Internet Explorer でなければ表示できない Web コンテンツ」は徐々に少なくなっていきます。 

 ということなので。

もう、IEはよほどの理由がなければ使わないで・・ということみたいです。

だから、IEはそういうもんだ・・ということでスルーしておくしかなさそうです。

ではでは。