アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

<div style=”display:none”>の指定がChromeでだけ効かないという現象を調べる(備忘)

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

 

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

 

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

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

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

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

f:id:arakan_no_boku:20180329231610j:plain

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

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

 

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

 

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

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

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

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

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

developers.google.com

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

だから、JavaScriptが実行できない・・のはわかりました。

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

インラインでHTML中に書いたJavaScriptを外部ファイル化すればよいだけですから。 

なんですけど。

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

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

つまり。

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

だから、CSPによって処理されなくなっている・・ということでした。

それにしても。

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

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

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

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

CSSに外出しにすれば良いだけです。

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

 

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

 

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

別にGoogleが勝手になっているわけでもなく、W3C の標準でもあります。

だから、すべてのブラウザで同じように動けば、別に悩みはしなかったわけです。

 なのに。

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

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

調べてみると。

IEもCSPは対応している。

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

yuw27b.hatenablog.com

なんだ!

このXCSPというのは? 

独自仕様なのか・・・。

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

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

懲りないところですね。