Checking for a Secure Context Before Running User Sensitive Code

Use-Cases of this tutorial

  • Know about the term "secure context" as used in web APIs.
  • Know how to execute user-sensitive Javascript code in a safe way, preventing hackers.
  • Know about window.isSecureContext property.

Browsers allow user-sensitive and low-level web APIs to execute only when the page is in a secure context. In addition, the window.isSecureContext property can be used to check whether the current environment is safe or not.

Browsers allow a lot of powerful APIs to do things that were not possible a decade ago — getting user location, accessing USB drives, going full-screen, reading and writing files on the user's device etc. These APIs require a secure context or a safe environment to run so that user privacy is not compromised, or preventing hackers from stealing information.

Live Demo

Is the current page secure ?

What is a Secure Context?

An enviroment can be thought of as a secure context when data transfer to & from it cannot be known by anyone other than the intended recipient.

It is important because :

  • Sensitive information should be passed securely over the network.
  • User privacy should not be invaded.
  • Hackers should not get access to user's device — files, USB drives, bluetooth etc.

Secure Context and HTTPS are Not Same

Most of the times when an application is being served over HTTPS, it guarantees a secure context.

However this may not be the case always. A page served over HTTPS may include an advertisement in an <iframe> that is HTTP based. Or a HTTPS page may be embedded inside a HTTP page. These are not secure contexts.

Only when the complete page is safe, it can be considered as a secure context.

Conditions that Determine a Secure Context

  • When a page including it's parent and all child pages are delivered securely via HTTPS / TLS, the context can be considered secure.
  • Files delivered locally such as localhost:// and file:// paths are considered secure.

Checking for a Secure Context with Javascript

The window.isSecureContext property can be used to check whether the page is in a secure context or not. It returns a boolean true or false indicating that.

if(window.isSecureContext) {
	// context is secure
	// run powerful APIs and transfer sensitive data
}
else {
	// context is not secure
	// powerful web APIs will not run
}

Privacy sensitive and low-level APIs, such as Geolocation, WebUSB, Full-Screen, getUserMedia etc will not work in an insure context.

window.isSecureContext can be used in such cases to check whether they will work or not in the current page, before running them and resulting in an error.

if(window.isSecureContext) {
	navigator.geolocation.getCurrentPosition(function(details) {
		console.log("Latitude: " + details.latitude);
		console.log("Longitude: " + details.longitude);
	});
}
else {
	console.log('Geolocation API will not work as context is insecure');
}
Modern HTTP Headers for Web Applications (VIDEO)
Loading Comments