"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

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

会社のホームページの担当者から相談をうけた件で、自分が知らなくて、ちょっと驚いた件があったので、備忘をかねて書いておきます。

f:id:arakan_no_boku:20190228193237j:plain

 

Chromeで表示した時だけ表示がおかしくなる

 

相談されたのは「初期表示で非表示にしたいコンテンツが非表示にならないし、JavaScriptも動かない。」ということでした。 

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

非表示にする方法は、<div style=”display:none”> とした<div>タグで要素を囲む方法ですから、別に特殊なものではありません。 

しかも、妙だったのが、Google Chromeのでデベロッパーツールで見た時に、ちゃんと「display:none」が有効になっていたことです。

f:id:arakan_no_boku:20180329231610j:plain

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

確かに不思議な挙動です。

 

原因はCSPヘダーの扱いでした

 

答えはデベロッパーツールのコンソールログにありました。 

ログをコピーしとくのは忘れたのですが。

 

JavaScriptが動かない原因と対策

 

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

default-src 'self'とは、Content-Security-Policy(CSP)のヘッダの指定です。 

詳しい説明はこちらをどうぞ。

developers.google.com

CSPによって、インラインのJavaScriptが実行できなくなるのは知ってました。 

だから、JavaScriptが実行できない・・ということです。

わかってしまえば、対策は簡単です。 

対策は

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

です。

 

display:noneの問題の原因と対策

 

なんですけど。

 まだ、「display:none」の問題が残ります。

しばらく調査した結果、根っこが同じ問題だったことがわかりました。

つまり。

<Div style="xxx">は、インラインのスクリプトまたはevalのようにみなされる。

だから、CSPによって処理されなくなっている。

・・ということでした。

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

だけど、実は、裏で実行が止められている・・とはね。

いやあ、いろいろあります。 

でも、わかってしまえば対策は簡単です。

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

CSSに外出しにすれば良い

です。

多少面倒でも安全にはかえられません。

 

逆に何故、IEで動いてたのか?という問題が残る

 

Content-Security-Policyは「クロスサイト スクリプティングXSS)攻撃」などを防御する有効な方法です。

別にGoogleが勝手にやっているのではなく、W3C の標準です。

だから、すべてのブラウザで同じように動くのが正しい姿です。

 なのに。

Internet Explorerだと意図した通り非表示になるし、JavaScriptも動く。

この事実が混乱の元だったのです。 

調べてみると。

IEもCSPは対応している。

ただし、標準のままではなく、IEは「X-Content-Security-Policy」・・とのこと。

yuw27b.hatenablog.com

なんだ!

このXCSPというのは? 

独自仕様なのか・・・。

以前のように、IEがブラウザのシェアの大半を占めていたときなら、まだしも、いまだに一社だけ独自仕様みたいなことをやってるんだとしたら・・。 

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

懲りないところですね。

 

2019/03/17追記

IEはもはや標準ではなくなってるってことみたいです

 

上記にXCSPという独自仕様の文句を書いてますが、IEを使っているということが間違いなんだろうな・・と思い直してます。

blogs.technet.microsoft.com

引用すると

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

とか

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

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

 ということなので。

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