location.host vs location.hostname and cross-browser compatibility?

Question

Which one of these is the most effective vs checking if the user agent is accessing via the correct domain.

We would like to show a small js based 'top bar' style warning if they are accessing the domain using some sort of web proxy (as it tends to break the js).

We were thinking about using the following:

var r = /.*domain\.com$/;
if (r.test(location.hostname)) {
    // showMessage ...
}

That would take care of any subdomains we ever use.

Which should we use host or hostname?

In Firefox 5 and Chrome 12:

console.log(location.host);
console.log(location.hostname);

.. shows the same for both.

Is that because the port isn't actually in the address bar?

W3Schools says host contains the port.

Should location.host/hostname be validated or can we be pretty certain in IE6+ and all the others it will exist?

One thing to note is that google chrome has a location.origin, where MSIE and Firefox do not. https://developer.mozilla.org/En/Window.location - http://msdn.microsoft.com/en-us/library/ms952653.aspx — Benbob, Aug 01 '11 at 01:54
See also: [Whats the difference between window.location.host and window.location.hostname](http://stackoverflow.com/questions/6549117) — hippietrail, Oct 20 '12 at 07:48
possible duplicate of [Whats the difference between window.location.host and window.location.hostname](http://stackoverflow.com/questions/6549117/whats-the-difference-between-window-location-host-and-window-location-hostname) — Ankur, Oct 14 '14 at 10:38

abernier · Accepted Answer · 2018-02-14T15:02:20.490

1382

As a little memo: the interactive link anatomy

--

In short (assuming a location of http://example.org:8888/foo/bar#bang):

hostname gives you example.org
host gives you example.org:8888

edited Feb 14 '18 at 15:02

answered Jul 08 '12 at 00:35

abernier

27,030
20
83
114

211

A picture is worth a thousand words. – Jack G Jan 07 '18 at 18:11
1

According to https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Generic_syntax, the port should not be consider a part of the host (but it is a part of the authority). – alecbz Mar 14 '19 at 20:52
2

@Alec this is an interesting technical note; drilling down thru the Wikipedia citation reveals that, [according to RFC 3986, "authority"](https://tools.ietf.org/html/rfc3986#section-3.2) _ought to be the term_ for the concatenation of the hostname, `:`, and port. I wonder how much of the discussion is still available from when `location.host` was being formulated... I suspect it's named such today because nobody present had read or thought to mention that RFC. – JamesTheAwesomeDude Dec 02 '19 at 19:28

jfriend00 · Answer 2 · 2022-11-10T20:16:36.853

77

host just includes the port number if there is one specified. If there is no port number specifically in the URL, then it returns the same as hostname. You pick whether you care to match the port number or not. See https://developer.mozilla.org/en-US/docs/Web/API/Location for more info on the window.location object and the various choices it has for matching (with or without port).

I would assume you want hostname to just get the site name.

edited Nov 10 '22 at 20:16

answered Jul 17 '11 at 18:37

jfriend00

683,504
96
985
979

The links is broken now :( – Syed M. Sannan Nov 10 '22 at 16:29
Use this instead: https://developer.mozilla.org/en-US/docs/Web/API/Window/location – Syed M. Sannan Nov 10 '22 at 16:29
1

@Stranger - Edited my post to update the link. – jfriend00 Nov 10 '22 at 20:17

Kenneth P. · Answer 3 · 2019-05-12T17:26:52.117

36

If you are insisting to use the window.location.origin You can put this in top of your code before reading the origin

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Solution

PS: For the record, it was actually the original question. It was already edited :)

edited May 12 '19 at 17:26

answered Mar 15 '14 at 13:01

Kenneth P.

1,797
3
21
31

7

But.... OP never mentioned `window.location.origin` in their question. Their question was actually specifically regarding things that are **not** `window.location.origin`. – Winderps May 02 '14 at 20:28
2

It's also worth noting that window.location.origin has browser compatibility issues. https://developer.mozilla.org/en-US/docs/Web/API/Window/location#Browser_compatibility – Scott May 20 '15 at 15:38

score 10 · Answer 4 · answered Feb 25 '14 at 05:01

10

Your primary question has been answered above. I just wanted to point out that the regex you're using has a bug. It will also succeed on foo-domain.com which is not a subdomain of domain.com

What you really want is this:

/(^|\.)domain\.com$/

answered Feb 25 '14 at 05:01

bluesmoon

3,918
3
25
30

Gopi P · Answer 5 · 2018-07-31T10:38:21.883

4

Just to add a note that Google Chrome browser has origin attribute for the location. which gives you the entire domain from protocol to the port number as shown in the below screenshot.

edited Jul 31 '18 at 10:38

answered Jul 31 '18 at 10:17

Gopi P

525
9
19

score 4 · Answer 6 · answered Jul 17 '11 at 18:39

4

MDN: https://developer.mozilla.org/en/DOM/window.location

It seems that you will get the same result for both, but hostname contains clear host name without brackets or port number.

answered Jul 17 '11 at 18:39

Igor Dymov

16,230
5
50
56

score 2 · Answer 7 · answered Jun 22 '23 at 12:31

2

From the mdn web docs you can see an interactive location demo where you can hover over the elements to highlight their meaning:

answered Jun 22 '23 at 12:31

rredondo

503
1
10
19

location.host vs location.hostname and cross-browser compatibility?

7 Answers7

Linked

Related