アラカン"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

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

だから、JavaScriptが実行できない・・の相談の方はすぐ解決できました。 

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

なんですけど。 

<Div style="xxx">の書き方が、インラインのスクリプトまたはevalのようにみなされて処理されないのは知りませんでした。

しかも、GoogleデベロッパーツールのStyleで「display:none」が有効になっているにもかかわらず、裏で止められているとは・・。 

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

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

横着せずに、CSSに外出しにすれば良いだけですしね。 

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

W3C の標準でもあります。 

なのに、「Internet Explorerだと意図した通り非表示になるし、JavaScriptも動く」というのは、どういうことなんだ? 

逆にそう思いました。 

調べてみると、・・ただしIEは「X-Content-Security-Policy」・・とのこと。

yuw27b.hatenablog.com

 まだ、一人だけ独自仕様みたいなことをやってるんですね。 

懲りないところですね。