Checking for a Secure Context Before Running User Sensitive Code

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 Example

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');
}