tech.guitarrapc.cóm

Technical updates

はてなブログを https 対応するためにmixed content を検知する MixedContentCheckerを作った

前回の記事でhttps化の前段階として、はてなブログの全URLを取得しました。

tech.guitarrapc.com

https化を有効にすると、mixed contentが出るようになるので有効にします。

あとは、https化したページにhttpコンテンツが混じっている時に起こる、mixed content警告一覧を取得して直してみましょう。

なお、直すのは手作業です。

TL;DR;

dockerでchromeヘッドレスをSeleniumで動かして、logからmixed contentがあるか検知してログ出力する。

検知したページは、3パターンの修正のいずれかをちまちまかけていく。

環境

今回は、PowerShellとC# で実装しました。golangは実装中。

いずれの環境も、dockerでUbuntu 18.04環境で実行します。

  • PowerShell : mcr.microsoft.com/powershell:Ubuntu-xenial
  • C# : Microsoft/dotnet:2.2-runtime-bionic
  • golang : 未実装

処理の流れ

どの言語も変わらず、chromeのログからmixed contentを取得します。

  • URLにchrome headlessで自動アクセスする
  • chrome driverを初期化
  • 指定したURLにアクセス
  • ログからmixed contentをフィルター
  • 該当ログがあればmarkdownテーブルフォーマットで出力

実装

リポジトリおいておきます。

github.com

実行方法は、READMEをみてください。

MixedContentChecker/README.md at master · guitarrapc/MixedContentChecker · GitHub

ローカル実行もできますが、Dockerで動かすことで、手元にSeleniumやChromeヘッドレスドライバーを用意したり、環境初期化で困ったりすることを割けます。

こういうのをローカルで動かす意味はあんまりないので、Dockerで動かすのがいいでしょう。

PowerShell

Dockerfileです。特に何も気にせず、粛々とchrome headless + chrome driver + seleniumをいれます。

gist.github.com

前回のサイトマップから全URLを取得するスクリプトを呼び出しつつ、Chrome Driver + Selenium処理を書きます。

gist.github.com

ポイントは、chrome driverに渡した引数"--no-sandbox"です。

C# では起こらないのですが、PowerShellからChromeヘッドレスを実行するときは、--no-sandboxがないと実行できないようです。(はまった)

CSharp

Dockerfileです。先ほどと違い、C# のビルド時にselenium + chrome driverは入るので、chrome driverだけ入れます。

gist.github.com

先ほどのPowerShellと異なり、Parallel.Foreachdによる並列処理を用意しました。

gist.github.com

記事が480以上あるため、1つ1つにアクセスしていると終わりません。単純に1ページ5秒としても、2400sec (40min) かかります。実際は、OneDriveの写真埋め込みページなどで60secかかったりしていたのでもっとです。

おおよそCPUコア数で並列がいいのですが、Docker内部への割り当てしだいです。今回は、15並列で不安定になり10並列で安定したのでデフォルト値にしています。Docker実行時にパラーメータを変えたいので、環境変数から値を渡せるようにしています。*1

10並列で、10分ぐらいでおわるようになったのでだいたいこれぐらい感があります。

あとは、先ほど同様にSeleniumでchrome headlessを動かすだけです。

処理の全体はリポジトリをみてください。

MixedContentChecker/csharp/src/MixedContentChecker/Program.cs at master · guitarrapc/MixedContentChecker · GitHub

Golang

[TBD]

修正

3つのパターンで修正します。

  • httpをhttpsにする
  • 存在しないURLを消す
  • はてなフォトがembedded記法なら記事の保存しなおし
  • Google Web Masterをhttpsで取り直し

http -httpsへの置き換え

心を無にしてやりました。 はてなブログにAPIで取得、保存しなおしはちょっと面倒感があります。

記事を全コピー、vscodeで置換、貼り付け直して保存です。サシミタンポポ

また、デザインページもhttp -> httpsが必要です。私の場合は、Googleフォントと外部cssなどでしたが、ついでにptengineやzenback当りが邪魔をしていたので外しました。zenbackははてなブログで関連記事機能があるので不要になってました。

github.com

存在しないURLを消す

特にOneDriveのimage埋め込みと2013ぐらいの古い記事でした。

OneDriveは、生imageがOneDriveにあったものははてなフォトにいったんおいています。OneDriveのimage埋め込みは、以前コメントでも指摘受けていたので、もう二度とつかわないでしょう。

存在しないURLは404で取得できるので消しました。

はてなフォト

はてなフォトは、生urlでなくはてな記法によるid埋め込みの場合、記事を保存しなおすことでhttps化されます。 粛々と記事を保存しなおします。サシミタンポポ

【よくある質問】HTTPS配信時の混在コンテンツ(Mixed Content)対応について

結果

1122 + 296 + 70 + 22 + 187なので、1697件だったようです。

sample/logsにおいておきました。

guitarrapc/MixedContentChecker

手作業なら死んでました。修正は手作業なのでもうやりたくないです。

あと、セキュリティ警告でページ表示できない状況も直ったようです、すいませんでした。

まとめ

golang書いてから上げようと思いましたが、やってすでに1週間立つのでとりあえず記事にしていくスタイルで。

*1:Docker実行だと、引数より環境変数の方が素直で扱いやすくて好みです。