技術

Vaster2を適用した際の混在コンテンツの問題を解消する方法

Bloggerのテンプレートを探していて、Vaster2というテンプレートの評判が良かったので、試しにテスト用のブログを作って適用し、試していたのですが、一点問題がありました。

httpとhttpsの混在コンテンツの問題


httpsのページをchromeで表示した場合、通常はURLの左側に鍵マークのアイコンとともに「保護された通信」という表示がされますが、上の画像のように、その表示がなく、アイコンをクリックしてみると、「このサイトへの接続は完全には保護されていません」「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。」という表示がされました。

これは、ブログのページのプロトコルがhttpsであるにも関わらず、関連記事で画像が無い記事に表示されるデフォルトのサムネイル画像（上記画像内左下の画像）のプロトコルがhttpであることが原因でした。これは混在コンテンツ（Mixed Contents）の問題として知られています。

この問題のあるページで、Chromeの開発ツール（ページ内で右クリックして検証を押す）を使ってコンソールを見ると、
Mixed Content: The page at 'https://temp83-test.blogspot.jp/2018/05/blog-post_3.html' was loaded over HTTPS, but requested an insecure image 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihqfo5yOlraxHBybJzeNoI9keRtqgEZDAIqNxv8pa_GbZFuq_im_jgc7uJ3HexL9WrpNptwuj_UYc7cTLnrm65RyOTglRQ9QoEFSlDchH3NISWibSDZ214bi2WqZMLJ9qms0L-f_ZCBSt2/s1600/no-thumbnail.png'. This content should also be served over HTTPS.
printRelatedLabels_thumbs @ related_posts_widget.js:3
(anonymous) @ blog-post_3.html:972
といった警告が表示がされます。

Chromeの言っていることを信じると、httpの画像が別の画像として表示されてしまうことがあり得るということなので、直さなかったところでセキュリティ的にクリティカルな影響は無いのかもしれませんが、サイトの信用やGoogleさんのページ評価に影響したりするかもしれませんし、できれば直しておきたいところです。

直し方

Vaster2では、関連記事ウィジェットとして以下URLのjavascriptを使用しています。

スクリプトの内容を確認すればすぐにわかりますが、デフォルトのサムネイル画像のURLが
のようにhttpとして直書きされています。幸い、この画像はhttpをhttpsにするだけで同じ画像を表示できるので、スクリプト中のhttpをhttpsにすれば直ります。

具体的な直し方

Bloggerの管理画面で「テンプレート」→「HTMLの編集」を選択し、以下の行を探します（Ctrl+F とかしてmakingdiffとかで検索）。
<script src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' type='text/javascript'/>

見つけたら、その行を消して以下の文字列に入れ替えます（ちょっと長いですが……）。これは実質的に、先のガジェットのスクリプトを直書きしてその中のhttpをhttpsにしているだけです。
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihqfo5yOlraxHBybJzeNoI9keRtqgEZDAIqNxv8pa_GbZFuq_im_jgc7uJ3HexL9WrpNptwuj_UYc7cTLnrm65RyOTglRQ9QoEFSlDchH3NISWibSDZ214bi2WqZMLJ9qms0L-f_ZCBSt2/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihqfo5yOlraxHBybJzeNoI9keRtqgEZDAIqNxv8pa_GbZFuq_im_jgc7uJ3HexL9WrpNptwuj_UYc7cTLnrm65RyOTglRQ9QoEFSlDchH3NISWibSDZ214bi2WqZMLJ9qms0L-f_ZCBSt2/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

結果、警告が取り除かれ、以下の画像のように「この接続は保護されています」と表示されるようになりました。

また、デフォルトのサムネイル画像を変更したい場合には、当該URLを他の画像のURLに変更すればできるのではないかと思います（画像の変更については試してません）。

デフォルトのサムネイル画像以外

デフォルトのサムネイル画像以外でも混在コンテンツの問題が発生するようですが、その場合はその画像が貼ってある記事内の画像をhttpsのものに変更する必要があります。また、例えhttpsだとしてもSSL証明書がちゃんとしたものでないなどの問題があると、「この接続は保護されています」の表示にはなりませんのでご注意ください。

0 件のコメント :

コメントを投稿