42

I am trying to find how can I detect with JavaScript if I am in a HTTP or HTTPS environment.

I am calling an Ajax request so if I am in HTTPS and call HTTP Ajax then I get a 302 Moved Temporarily.

I was thinking of getting the current window.location.href and do a string manipulation.

What is the best way of detecting HTTPS using JavaScript?

grg
  • 5,023
  • 3
  • 34
  • 50
ntan
  • 2,195
  • 7
  • 35
  • 56
  • @DanDascalescu did you used "flag" to mark this as a duplicate? – HackerKarma Aug 06 '15 at 00:33
  • @HackerKarma: I voted to close three weeks ago. Nothing happened, and only then I used the flag. – Dan Dascalescu Aug 06 '15 at 01:03
  • @DanDascalescu Thanks. I just flagged it to close. Let's see what happens. – HackerKarma Aug 06 '15 at 01:27
  • @HackerKarma: I saw no close votes after reading your comment (looks like mine was removed - I don't understand how or why). I've just voted to close again, and still see "close (1)", which suggests your vote has been removed too? Edit: just noticed your rep is 394. Are you allowed to cast close votes? – Dan Dascalescu Aug 06 '15 at 01:43
  • @DanDascalescu sorry I meant to say flagged it as "duplicate" – HackerKarma Aug 06 '15 at 01:55

6 Answers6

63

Looking at how google analytics add their script to the page:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

Then document.location.protocol would seem safe for all browsers.

Rich
  • 631
  • 5
  • 2
44

You can use the non-standard 

window.location.protocol

In Firefox: MDC documentation

In IE, it seems to be

 document.location.protocol

MSDN documentation

I can't find reliable info on how this behaves on other browsers, but I expect they adhere to the quasi-standard of document.location.protocol.

Maybe the jQuery url plugin sorts this out without having to deal with cross-browser differences - I've never used it myself, but it looks promising:

jQuery.url.attr("protocol");
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
8

How about this ?

 var protocol = window.location.href.indexOf("https://")==0?"https":"http";
Vic Seedoubleyew
  • 9,888
  • 6
  • 55
  • 76
8

location.protocol works on all browsers.

apaderno
  • 28,547
  • 16
  • 75
  • 90
Ryan Fernandes
  • 8,238
  • 7
  • 36
  • 53
6

In many instances, one can omit the protocol altogether. So, instead of

<img src="https://test.com/image.jpg" />

one could use

<img src="//test.com/image.jpg" />

The browser then adds the current protocol automatically. This also works for including files in the head, and it should also work for ajax calls.

Edit: Doing this is now considered to be an anti-pattern:

Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.

Allowing the snippet to request over HTTP opens the door for attacks like the recent Github Man-on-the-side attack. It’s always safe to request HTTPS assets even if your site is on HTTP, however the reverse is not true.

see: http://www.paulirish.com/2010/the-protocol-relative-url/

Community
  • 1
  • 1
jberculo
  • 1,084
  • 9
  • 27
  • confirmed this does work for ajax calls... at least with AngularJS `$http.get('//example.com')` – parliament Jul 01 '15 at 20:10
  • 3
    One caveat I ran into is that this answer won't work after deploying the code to a mobile device (if you're using Cordova or PhoneGap). In that siutation // will resolve to file:// so you can never use it for http calls. If you're not developing for mobile, just disregard this. – parliament Jul 02 '15 at 21:20
0

There's a really neat lib called URI for things like this. https://github.com/medialize/URI.js

You probably don't need this just to grab the protocol, but if you're going to be string manipulating URIs, you should use this.

Yoh Suzuki
  • 1,435
  • 2
  • 11
  • 15