にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2018/09/11. 04:35:21.

常時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/TSL化」・「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で転送する方法に切り替えましょう。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---