Google Chrome 51 Arrives with Intersection Observers, and Credential Management APIs

Google has launched Chrome 51, bringing with it upgrades including the intersection observers, and credential management APIs, as well as many security fixes.

New to the 51 stable release, Google software engineer Alexander Surma describes the the Intersection Observers API simply, saying "IntersectionObservers let you know when an observed element enters or exits the browser’s viewport."

For developers, this specifically solves the observed pain point of needing to track the element, but the traditional approach of calling getBoundingClientRect() being, in Surma's words, "painfully slow."

Surma provides the following example:

var io = new IntersectionObserver(
	entries => {
		console.log(entries);
	},
	{
		/* Using default options. Details below */
	}
);
// Start observing an element
io.observe(element);

// Stop observing an element
// io.unobserve(element);

// Disable entire IntersectionObserver
// io.disconnect();

"Using the default options for IntersectionObserver, your callback will be called both when the element comes partially into view and when it completely leaves the viewport," Surma says.

However, Surma says, this is not always enough, so the threshold option allows developers to define intersectionRatio thresholds. For more information on IntersectionObservers, visit https://developers.google.com/web/updates/2016/04/intersectionobserver.

Also new to the latest stable release is support for the Credential Management API. Enabling developers to store and retrieve password credentials and federated credentials, the API provides 3 functions:

• navigator.credentials.get() to get the user's credentials, and initiate a sign-in flow
• navigator.credentials.store() to save credentials in the credential manager
• navigator.credentials.requireUserMediation() to disable automatic sign-in

In the blog post Streamlining the Sign-in Flow Using Credential Management API developer advocate Eiji Kitamura says the APIs will enable users to sign in with just one tap, remember the federated account the user has used to sign in with, and sign users back in when a session expires.

In Chrome’s implementation, credentials will be stored in Chrome’s password manager. If users are signed into Chrome, they can sync the user’s passwords across devices. Those synced passwords can also be shared with Android apps which have integrated the Smart Lock for Passwords API for Android for a seamless cross-platform experience.

Kitamura says using the Credential Management API with a website will vary depending on the architectureit's , and it is nearly impossible to describe in one blog post all the possible cases, however he does consider a typical single page app. A demo of the API can be found here, for full details of the API visit https://developers.google.com/web/updates/2016/04/credential-management-api.

Kitamura also addresses the FAQs around credential management, saying:

Is it possible for JavaScript on the website to retrieve a raw password?
No. You can only obtain passwords as a part of PasswordCredential and it’s not exposable by any means.

Is it possible to store 3 set of digits for an id using Credential Management API?
Not currently. Your feedback on the specification will be highly appreciated.

Can I use the Credential Management API inside an iframe?
The API is restricted to top-level contexts. Calls to .get() or .store() in an iframe will resolve immediately without effect.

Can I integrate my password management Chrome extension with the Credential Management API?
You may override navigator.credentials and hook it to your Chrome Extension to get() or store() credentials.

Chrome's 51 the release also "contains a number of fixes and improvements," according to Krishna Govind, QA engineer for Google, writing in the stable channel update. Among the 42 separate security fixes, nine are listed as "High", including security issues linked to Cross-origin bypass (issues CVE-2016-1672 through to CVE-2016-1676).

An overview of the release given by Pete LePage, developer advocate for Google, can be watched here: https://youtu.be/LXbtIeHIQJA.