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?

5
  • @DanDascalescu did you used "flag" to mark this as a duplicate? Commented Aug 6, 2015 at 0:33
  • @HackerKarma: I voted to close three weeks ago. Nothing happened, and only then I used the flag. Commented Aug 6, 2015 at 1:03
  • @DanDascalescu Thanks. I just flagged it to close. Let's see what happens. Commented Aug 6, 2015 at 1: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? Commented Aug 6, 2015 at 1:43
  • @DanDascalescu sorry I meant to say flagged it as "duplicate" Commented Aug 6, 2015 at 1:55

6 Answers 6

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.

1
  • 1
    Great insight. Works flawlessly.
    – xaragen
    Commented Aug 14, 2015 at 12:49
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");
1
  • +1: that is more generic way for it :)
    – Sarfraz
    Commented May 18, 2010 at 8:21
8

location.protocol works on all browsers.

1
  • 1
    There are more than two browsers :)
    – Pekka
    Commented May 18, 2010 at 8:30
8

How about this ?

 var protocol = window.location.href.indexOf("https://")==0?"https":"http";
1
  • should be protocol = window.location.href.indexOf("https://")==0?"https":"http"; Commented Oct 10, 2017 at 17:03
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/

2
  • confirmed this does work for ajax calls... at least with AngularJS $http.get('//example.com')
    – parliament
    Commented Jul 1, 2015 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
    Commented Jul 2, 2015 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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.