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

 

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

 

懲りないところですね。