ブログの目次を表示/非表示にしたらセキュリティに引っ掛かりました
JavaScriptで気づいたこと
これからJavaScriptを勉強していこうとしていますが、JavaScriptを勉強することはHTMLやCSSを勉強することにもなります。それらを合わせて、いろいろ気づいたことを書いていこうと思います。
ブログの目次の表示変更
プログラミングの勉強を始めてから、いろいろな人のブログを拝見することが多くなりました。
そんな中で、目次をそのままにされている方と、折りたたんで「表示/非表示」が選択できるようにされている方がいます。さらに、ボタンにするなど高度な方もおられますが。
目次だけが先にたくさん表示されるのも見にくいなかと思い、「表示/非表示」が選択できるようにしようと思いました。
以下のブログを参考にさせていただきました。
目次のカスタマイズ
前述のブログの手順に従って、ソースをコピー&ペーストしました。
若干、カスタマイズ（スパナマーク）を見つけるのに苦労しましたが。(^ ^;)
表示方法の変更
確かに、目次が表示/非表示になりました。
ブラウザーのセキュリティ
ところが、再度ページを表示すると、ブラウザーによって表示されるメッセージは違いますが、以下のようなメッセージが表示されるようになりました。
そのまま継続すると、目次全体が表示されません。(T T)
どうやら、目次の部分がブラウザーのセキュリティに引っかかっているようです。
IEの場合
Edgeの場合
「すべてのコンテンツを表示」や「ブロックされたコンテンツ」をクリックすれば表示されるのですが、毎回毎回では辛いところがあります。
そこで、原因を調べて修正することにしました。
原因
ググると、同じ経験をされている方が多いようで、たくさんのページがヒットしました。
原因は、マイクロソフトのInternet Explorerのサポート・ページに記述されていました。
(抜粋)
「このメッセージは、セキュリティで保護されたコンテンツと保護されていないコンテンツの両方がページ上に存在する可能性があることを示しています。 セキュリティで保護されたコンテンツと保護されていないコンテンツ、または混在したコンテンツとは、Web ページがセキュリティで保護された接続 (HTTPS/SSL) とセキュリティで保護されていない接続 (HTTP) の両方を使用して Web サーバーに接続していることを意味します。」
要は、ブラウザーでアクセスしている「https:」のページ内に、「http:」のページが混在していることが原因だということです。
解決方法
先程のマイクロソフトのInternet Explorerのサポート・ページでは、解決方法は設定を変更して「セキュリティで保護されたコンテンツのみ表示」メッセージを表示させない方法しか記述されていません。
検索した他のページでも、解決方法はブラウザーのセキュリティ・レベルを下げることで対応する方法ばかりでした。(全てのページは確認できていませんが)
しかし、ブラウザーのセキュリティ・レベルを下げる方法では、ウイルス、詐欺、悪意のある攻撃に対して脆弱になるため、いろいろな脅威に晒される可能性があります。また、今回は目次のカスタマイズをしたことによる影響だとわかっています。(カスタマイズを戻すと目次が表示されます)
そこで、目次の表示/非表示で追加したjQueryを確認し、修正することにしました。
jQueryのurl
今回挿入したjQueryは、以下になります。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
$(function(){
var $Contents = $(".table-of-contents")
$($Contents).before('<p class="show-area">目次を表示</p>');
$(".show-area").click(function(){
var $this = $(this);
if($Contents.css('display') == 'none'){
$Contents.slideDown(400),
$this.text("目次を隠す");
}else{
$Contents.slideUp(400),
$this.text("目次を表示")
};
});
});
</script>
これの1行目で確かに「http://...」を記述しており、これがセキュリティに引っかかっていました。
jQueryとは
jQueryとは、JavaScriptのライブラリで、JavaScriptを簡潔記載したり、拡張機能を利用して少量のコードで様々な機能が利用できるようにするものです。
先程の「<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>」の意味は、JavaScriptを使用するが、ソースはurlのところにあることを表しています。
これは、jQueryをCDNで使用することを意味しています。CDNは、Content Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。つまり、jQueryを利用するにあたり、ソースファイルをネット経由で使えるため、ファイルをダウンロードする必要が無いということになります。
ただ、このurlが古かったようです。以下のページでは、新しいurlが載っていました。
programming-beginner-zeroichi.jp
修正
判ってみたら何てことはないのですが、知らないからこそというところです。
目次の表示/非表示で挿入した、jQueryの以下の赤字の部分を修正しました。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
保存し、ブラウザーで確認したら問題なく正常に表示されるようになりました。
