2018年8月11日(土) 10時45分57秒 [Web関連]

常時SSL化っぽい動作をJavaScriptで実行する方法(httpをhttpsに転送するソースの書き方)

GoogleのブラウザChromeが、HTTPでしかアクセスできないウェブページに「保護されていない(Not Secure)」と警告を表示し始めたことで、「常時SSL化／常時HTTPS化」が旬なキーワードになりました。

常時SSL化(＝常にhttps://～で始まるURLでアクセスできるようにする)には、ウェブサーバがApacheの場合は.htaccessファイルを使ってhttpsでのアクセスに強制する方法が最も楽です。

その方法は、All Aboutで公開した記事「SSL証明書を取得してHTTPS化する設定方法」にも書きましたので、ぜひご参照下さい。HTTPとHTTPSの違いとか、HTTPS化しなかった場合にブラウザがどう表示するかといった基本から、常時SSL化のための.htaccessファイルの書き方まで簡単に紹介しています。

SSL証明書は、最近だと大手レンタルサーバでは無料のLet's EncryptによるSSL証明書を簡単に取得して設定した上で自動更新してくれる仕組みがありますから、追加費用は特に掛けずにHTTPSでのアクセスを可能にできます。

※「SSL化」・「SSL/TLS化」・「HTTPS化」はたいてい全部同じ意味で用いられています。

とはいえ、常時SSL化を躊躇する状況もまだある

で、問題は、

• ウェブサイトの規模があまりにも大きくて全ページがHTTPSで問題なく閲覧可能なのかチェックできていない場合
• HTTPSでアクセスすると動作がおかしくなるような古いツールをまだ使用している場合

などのように、独自ドメイン下の全体を一括してHTTPS化はできない(したくない)こともある点です。

そういう場合でも、（HTTPSでのアクセスが可能なページであれば）Googleの検索結果にはHTTPS側のURLが出てくるようではありますが、ウェブサイトへのアクセス経路は何も検索サイトからだけではありませんよね。HTTPS化前のURLでリンクされているリンクを辿って来たり、HTTPS化前のURLで登録してあるブックマークを経由して来るような場合は、HTTPでのアクセスになってしまいます。

そのような場合には、（.htaccessを使って一括して常時SSL状態にできるようになるまでの移行措置的な感じで）今だけはJavaScriptを使ってHTTPSへ転送する方法もあります。

JavaScriptを使ってhttpなURLをhttpsなURLに転送させる方法

JavaScriptを使って常時SSLっぽい動作をさせるのはとても簡単です。URLの先頭にあるプロトコル名部分は、window.location.protocolで得られます。この値を調べて、値がhttp:だった場合にはhttps:に差し替えれば済みます。

具体的には、以下のようなHTML＋JavaScriptソースを書いておけば良いでしょう。

<script>
   if( window.location.protocol == 'http:') {
      window.location.protocol = "https:";
   }
</script>

上記のJavaScriptソースでは、if文を使ってプロトコル名が「http:」かどうかをチェックしています。このプロトコル名にはコロン記号「:」も含まれますが「//」は含まれませんので注意して下さい。で、値が「http:」ならHTTPでのアクセスなわけですから、window.location.protocolプロパティに値「https:」を代入することで、URLをhttps://に差し替えています。

これによって、http:// のURLへのアクセスを https:// のURLへのアクセスに自動転送できます。プロトコル部分以外はそのままですから、元のURLがどんなものであっても問題ありません。

無駄な通信をできるだけ避けるために、HTMLのhead要素内のできるだけ先(上側)の方に書いておくと良いでしょう。

強制的な転送を回避する手段を用意しておきたい場合のソース

もし、HTTPSでのアクセスで不具合が出た時に、HTTPSへ自動転送されるのを回避する手段を用意しておきたいなら、以下のようにJavaScriptを書いておくと良いかもしれません。

<script>
   if( window.location.protocol == 'http:' && window.location.search != '?nossl' ) {
      window.location.protocol = "https:";
   }
</script>

上記のJavaScriptソースでは、先程のif文に window.location.search != '?nossl' という条件を追加しています。

このwindow.location.searchプロパティを参照すると、URLのクエリー文字列(＝「?」記号に続く部分)を得られます。このクエリーが「?nossl」ではない場合にだけ実行する、という動作になります。
つまり、上記のif文をまとめると、

• URLのプロトコル名部分が「http:」の場合で、
• かつ、URL末尾のクエリー部分が「?nossl」ではない場合なら、
• プロトコルを「https:」に変更する(＝転送する)

という意味になります。このようにすると、

• http://www.example.com/ → https://www.example.com/ へ転送される
• http://www.example.com/?nossl → 転送されずにそのまま

という動作になります。
クエリー部分に使う文字列は何でも構いませんから、「?nossl」以外でも問題ありません。

補足情報：JavaScriptでURLの各部分を得たり変えたりする方法

なお、JavaScriptでURL内の各部分を得る方法については、当サイト内のJavaScript TIPSコーナーにある記事「ページを移動させたり、現在URLを構成部分別に得る方法」で解説していますので別途ご参照下さい。

転送手段がJavaScriptだろうと何だろうと、SSL化にはSSL証明書が必要

転送方法には.htaccessファイルを使う方法や上記で解説したようなJavaScriptを使う方法などいろいろありますが、何にしてもSSL証明書を取得してウェブサーバにインストールしていない限り、https://～のURLでアクセスはできないので注意して下さい。

単にURLの頭をhttps://に変更するだけで済むわけではありません。

冒頭でも述べましたが、その辺をざっと解説した記事「SSL証明書を取得してHTTPS化する設定方法」をAll Aboutで公開していますので、ぜひご参照下さい。(^_^;)

JavaScriptで転送する場合、最初のアクセスはHTTPで行われてしまいますから、無駄な通信が発生します。余計な通信が発生しない「.htaccessで一括リダイレクトする方法」が最も望ましいでしょうから、全ページで確認が終わったら、JavaScriptではなく.htaccessで転送する方法に切り替えましょう。