How to return the protocol (http or https) of the web page with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will look at how to find which protocol is being used by a web page. A web page mostly uses http or https protocol. A protocol is a type of standard which is used to specify, how the data is transferred or transmitted between different sets of computer.

HTTP − HTTP is a protocol for retrieving resources such as HTML pages. It is one of the most essential and the backbone for all types of data exchange that happens over the internet. HTTP is a client server protocol which means that all the requests are done by the client which are mostly Web browsers. A full document is constructed by many sub documents such as text, photos, videos, scripts and others.

HTTPS − HTTPS or Hyper Text Transfer Protocol Secure is an encrypted variant of the HTTP protocol. All communication between a client and a server is encrypted using SSL or TLS. This secure connection enables clients to communicate sensitive data with a server in a secure manner, such as while banking or buying online.

We shall use windows.location.protocol or url.protocol to get the protocol that is being used by the page or the URL that has been specified. It will return protocols such as −

HTTP
HTTPS
FTP
MAILTO
FILE

Syntax and Parameters

To return the protocol of the current page

windows.location.protocol

To return the protocol of some other page or URL

url = new URL("https://www.url.com/")
proto = url.protocol

Return Value − It returns an object which is of the data type String. The string contains the value of the Protocol that is currently being used by the webpage or the url that has been passed to the function.

For example, https://www.tutorialspoint.com/ will return https −

whereas, http://www.columbia.edu/~fdc/sample.html will return http −

Example 1


<!DOCTYPE html>
<html>
<body>
<script>
   document.write("https or https: <br>The protocol is: "+window.location.protocol);
</script>
</body>
</html>

In the above code, we find the protocol that the current page is using, we use windows.location to find the url of the current page and then url.protocol method to get the protocol of the current page which is https −

Windows.location − The window.location object is used to retrieve the current page address that is the URL and can also be used to redirect the browser to a different page.

Let us take a look at this with the help of an example as follows.

Example 2


<!DOCTYPE html>
<html>
<body>
   <script>
      url_object = new URL("http://www.columbia.edu/~fdc/sample.html");
      document.write("https or https: <br>The protocol is: "+ url_object.protocol);
   </script>
</body>
</html>

In the above code, we find the protocol that the url page is using, we use new URL to create a new url for which we then use the url.protocol method to get the protocol of the current page which is http −

Example 3


<!DOCTYPE html>
<html>
<body>
   <script>
      url_object = new URL("mailto:xyz@gmail.com");
      document.write("https or https: <br>The protocol is: "+ url_object.protocol);
   </script>
</body>
</html>

In the above code, we find the protocol that the url page is using, we use new URL to create a new url for which we then use the url.protocol method to get the protocol of the current page which is mailto −

Conclusion

In this tutorial, we saw how to find the protocol which a web page is using. The two protocols that we discussed were: HTTP and HTTPS. We learnt about these two protocols in detail, including how they work and where they are mostly used. Apart from these topics, we also saw how to use the windows.location.protocol or url.protocol to find out the protocol being used in a web page.