JavaScriptで表示中のページがHTTPかHTTPSかを判別する方法

JavaScript判別

JavaScriptを使って現在表示中のページがHTTPかHTTPSかを判別する方法です。

またHTTPの場合にHTTPSのページにリダイレクトする方法も紹介しています。

httpかhttpsかを判別する方法

location.protocolを使った現在表示中のページがHTTPかHTTPSかを判別する方法になります。

location.protocolは表示中のページがHTTPSの場合は「https:」、HTTPの場合は「http:」を返します。

動作サンプル

See the Pen JavaScript location.protocol by yochans (@yochans) on CodePen.

サンプルコード

HTML

<p id="log"></p>

JavaScript

const log = document.getElementById('log');

if(location.protocol == 'http:'){
  log.innerHTML = `表示中のページはHTTPです`;
}else if(location.protocol == 'https:'){
  log.innerHTML = `表示中のページはHTTPSです`;
}

サンプルではログ表示用にlogというidのp要素にinnerHTMLを使ってHTTPSかHTTPかを判別をした結果を表示しています。

HTTPの場合にHTTPSにリダイレクトする方法

JavaScriptでHTTPの場合にHTTPSのページにリダイレクトする方法です。

※基本的には、.htaccessやphpなどサーバーサイドでリダイレクトする方法が推奨されます。

JavaScript

const log = document.getElementById('log');

if(location.protocol == 'http:'){
location.href=’https://(転送先のURL)’;
}

JavaScript判別

Posted by Yousuke.U