SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

<div style=”display:none”>の指定がChromeできかない原因と対応方法

f:id:arakan_no_boku:20190228193237j:plain

目次

問題: <div style=”display:none”>指定で非表示にならない

会社のホームページの担当者から「<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

 

原因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だけでなくも同じです。

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

です。

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

 

疑問:なぜIEでだけちゃんと動いていたのか 

原因はわかって、解決はしたけれど、「じゃあ、何故、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はそういうもんだ・・ということでスルーしておくしかなさそうです。

ではでは。