◆ https のページから http のページのものをロードできない
◆ 自分のサーバ経由したい時に https できないと困ることが多い
◆ apache だと mod_ssl 入れてしょっと修正するだけでおっけい
◆ 証明書エラー出したくないなら証明書保存して信頼できるリストに追加しておく 

https のページでは http のリソースを扱えないですよね
CSS や JavaScript とか 外部サイトを使うと http なことも多いので面倒です

特に 拡張機能を通してページをカスタマイズするようにしようとしたときには邪魔な制限です
やりたいことは あるページを見た時に ユーザスクリプトの実行をするのと同じように ページ内に CSS と JavaScript を読み込んで自分好みの見た目にすることです

よく使うサイトや Web サービスを自分用にカスタマイズするのに使うのもいいですけど 何か web 関係のものを作ってる人なら開発中の環境と本番環境での違いを埋めるのにも役立つ時があります


これをやろうとすると 拡張機能だけでやってしまうのは難しいこともあり 楽にするなら自分のサーバに一度アクセスさせるようにして あとはそこから必要なデータを取得するようにしたいです
拾い物のテーマだったり ある程度複雑な規模になるとユーザスクリプトで直接埋め込むよりロードするスクリプトを埋め込んであとはそのスクリプトから 画像や CSS などをロードするほうが扱いやすいです
具体的な方法は webRequestAPI で本来の CSS や JavaScript のリクエストを自分のサーバに書き換えてもいいですし 後からユーザスクリプトで既存の CSS を除去して適用したいものを埋め込む処理を入れてもいいです

そうなってきたときに 自分のサーバが https でないと 最近増えてる https のページから自分のサーバへアクセスできません
webRequest だとリダイレクトになるので自分のサーバのページが https である必要がありますし ユーザスクリプトで script タグや link タグ(CSS)を追加するときに自分のサーバが https になってないと読み込めません

https サーバを作る

今回の目的は自分のサーバ上においたリソースをhttps ページから読み込むことなので apache で https 通信で自分のページを見れるようにします

まずは普通に http でサーバにアクセス

https01

アドレスが fedora/ になってますが 自分のサーバです
わかりやすく fedora の PC のサーバに fedora と書いて接続できるようにしてます
ブログ内のどこかでも書いたかもしれませんが 最後におまけで方法は紹介します

では同じサーバに https でつないでみます
もちろんデフォルトでは apache で https が設定されていないので 接続できません

https02

サーバの設定

サーバは fedora (korora や centos や RHEL も多分一緒かな) にします

mod_ssl という rpm をインストールします
sudo dnf install mod_ssl

yum な人は dnf → yum ということで

これでインストールされるものは
rpm -ql mod_ssl
/etc/httpd/conf.d/ssl.conf
/etc/httpd/conf.modules.d/00-ssl.conf
/usr/lib/systemd/system/httpd.socket.d/10-listen443.conf
/usr/lib64/httpd/modules/mod_ssl.so
/usr/libexec/httpd-ssl-pass-dialog
/var/cache/httpd/ssl

設定ファイルの /etc/httpd/conf.modules.d/00-ssl.conf は module のロードが書かれているだけです
LoadModule ssl_module modules/mod_ssl.so


もうひとつの /etc/httpd/conf.d/ssl.conf を書き換えます
# DocumentRoot "/var/www/html"
というのがあるので 「#」 を消してコメントじゃなくします
サーバのルートをどこにするかなので 別のところに http のを設定していて 一緒にしたいなら同じところに変更してください

# がついてるのは デフォルト設定で # 消すだけなら意味ないのかな とも思ったのですが これやらないとアクセスできませんでした

もう一度ブラウザで

ここまでできたら ブラウザからもう一度アクセスします

https03

セキュリティ警告がありますが 接続は成功しているようですね

こうならないようなら ファイアウォールとか SE Linux とか確認してみてください
普通の http がアクセスできる環境ならだいたいファイアウォールでポートあけるくらいだと思います

警告を気にせずページを開くとこうなります

https04

ちゃんと表示されていますね
警告は無視できるのですが 無視しても しばらくするとまたこの警告画面に戻るようです
CSS や JavaScript を読み取るためという使い方だと いきなり読みこまれなくなってしまってしまって 警告無視するようにはそこではできないので 手動でサーバにアクセスしてから また警告を無視するをクリックしないといけないです

この警告画面は一度無視すると全然でない場合もあるのですが ダミーの証明書作るとかもしてないからなのか 私の場合は 1 時間もしないうちに出てきました
1 日に何度もサーバのページ開いて警告無視するボタンを押すなんてめんどうなので 二度と警告がでないようにします

証明書追加

警告が出るページで F12 を押して開発者ツールを表示します
Security タブの View certificate を押して出てくるウィンドウの 詳細タブを選んで ファイルにコピーを選びます
後は適当にボタンを押して適当な名前でファイルに保存します

cert01

これで自分のサーバの 認証されてない証明書が保存できました

次はこれを許可リストに入れて完了です

設定画面 (chrome://settings/) を開きます
下の方にある HTTPS/SSL の証明書管理から証明書のウィンドウを開いたらさっき保存した証明書をインポートします
ここもインポートボタンを押したら流れに乗って Yes を押すだけの作業です

cert02

Firefox は確認してませんが about:preferences#advanced の詳細設定で証明書タブを選んで 証明書を表示 ボタンを押すと開くウィンドウにインポートすれば良さそうです

これが終わったら もう一度サーバのページを開きます

cert03

緑色になってたら OK です
設定更新後にブラウザ再起動が必要だったかもしれません

おまけ:hosts

fedora という名前で自分のサーバにアクセスしていましたが その方法を紹介します

普通は URL に www.google.com とか名前を打つと DNS サーバが IP に変換してその IP のサーバからデータを取得するのですが hosts というファイルに名前と IP を書いているとそこにあるものは そっちが優先されるので好きな名前を自分のサーバに設定できます

C:\Windows\System32\drivers\etc\hosts

にあるテキストファイルが hosts です
いつからなのか知らないですが XP 以降ならここにあるはずです

イジったことがないなら色々あっても全部コメントのはず
「#」から始まってるのはコメントです
最後に
192.168.1.9 fedora
のような行を追加します

左側は IP アドレスで スペースを開けて URL のバーに打ち込みたい名前です
保存したタイミングで更新されます

注意は www.google.com みたいな存在する名前をつけるとそのサイトにいけなくなること
付ける前にその名前を URL バーに打ってみて絶対に行くことがないな って思うページか確認したほうがいいと思います
.com とか .net とか .jp が最後についてなければたいてい大丈夫だと思いますけどね

あと hosts ファイルは管理者権限でしか編集できません
エディタを管理者権限で開いてから hosts を読み込む必要があります
よく編集するなら

notepad.exe C:\Windows\System32\drivers\etc\hosts

のショートカットに管理者権限つけておけばお手軽です
notepad は自分の使うものに置き換えてください