メンチカツには醤油でしょ!!

AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ

https化した時のmixed-contentをPuppeteerでチェックする

https化した時の一般的な課題

https化した際の一般的な課題のひとつにmixed-contentというものがあります。
mixed-contentとは、ひとつのページ内にhttpのものとhttpsのものが混在した状態のことであり、これがあると一部の通信が暗号化されていないというセキュリティ的な懸念とブラウザ上に表示がされて閲覧者が不安になったりします。

下記はキャプチャの例です。
開発者コンソールにMixed Contentであることや、アドレスバーに警告が出たりします。

f:id:ryoichi0102:20181106192833p:plain

mixed-contentをなくすには?

簡単です。ページ内のhttpをhttpsにすべて書き換えます。

簡単ですが、、数が多いと結構な手間になります。。

そこでPuppeteerですよ

クローリングさせて、Mixed Contentを検知していきます。

ページオブジェクトに対して

page._client.on('Network.loadingFailed', (r) => {
  if (r.blockedReason === 'mixed-content') {
    //
  }
});

とすれば検知できます。

f:id:ryoichi0102:20181108080243p:plain

ソース全文はGitHubにあります

書き換えは手でやる必要がある?

好みですね。

ここまで自動化すると動いてるのを見てるだけ、もとい、見ていなくても書き換えが完了する所までは書けそうですが、やはり変更箇所というのは基本的に目で見ながらの方が良いかな…と思ったりもしています。

もしくは、変更した箇所の差分とかが出せるともっと良いですね!
ぜひ自身で書いてみて下さい。

書籍もありますよ

書籍ではmixed content自体には触れてはいませんが、そもそものスクリプトの書き方をはじめから丁寧に、そして、サイトの巡回の仕方がいろいろ実例を交えて書いてあります。

https://www.amazon.co.jp/dp/4798055204

ryoichi0102.hatenablog.com

参考 (Mixed Content)

developers.google.com