Chrome 60 Released - Cross-browser Testing Blog

The popular web browser Google Chrome just got a new update for the major 60 release with a bunch of new appealing features such as new developer tools, new macbook touchbar support and more and it is already up and running at Browserling's browser cloud.

(Post updated: 2017-07-31)

Google Chrome Version 60

Want to try it?

What's new in Chrome 60?

MacBook Pro Touch Bar support.
A number of fixes and improvements.

For iOS:

"Request Mobile Site" button can switch from a website's desktop version back to its mobile version.

For Android:

Load pages faster and use less memory with an updated JavaScript engine.
Bug fixes and performance improvements.
Clear browsing data more easily.

CSS font-display property

Chrome 60 provides a font display property that allows you to control what a downloadable font looks like before it is completely loaded. It makes sense that website's typography is an important factor in building unique web designs and now users can no longer experience slowness when they haven't downloaded the font used. Now you can try and experience with other non-standard fonts and in the same time provide better user experience.

Paint Timing API

This new API can be used to measure whether everything is working correctly when a page is to be loaded as the user will look for some visual feedback to make sure it is in fact, loading correctly. The API exposes two metriccs for this purpose:

Time to first paint - marks the point when the browser starts rendering.
Time to first contentful paint - marks the point when the browser renders the first bit of content from the DOM, text, an image etc..

With other words just First Paint and First Contentful Paint. This can be used to inspect how the page performs to some extent, too.

WebAssembly

Users always wanted to have some new way to run code. A way, that feels native and is much faster. Fast enough to be suitable for creating things like powerful in-browser video editors or a Unity game at high frame rate. And now their wish came true - with the glamorous appearance of WASM or Web Assembly, written in languages of the likes of C/C++. Check out webassembly.org for more details.

WebAssembly (abbreviated _Wasm_) is a binary instruction format for a
stack-based virtual machine. Wasm is designed as a portable target for
compilation of high-level languages like C/C++/Rust, enabling
deployment on the web for client and server applications.

And for comfort, check out the WebAssembly studio.

WebAssembly studio

Full list of Developer features and updates in Chrome 60

Android Payment Apps - Web payments is a W3C standard API for e-commerce websites to collect payment information from users with user consent. This feature lets users pay using native Android payment apps.
Budget API - This specification describes an API that can be used to retrieve the amount of budget an origin has available for resource consuming background operations, as well as the cost associated with doing such an operation.
CSS font-display - A new @font-face descriptor and a corresponding property for controlling how a downloadable font renders before it is fully loaded.
CSS font-stretch - Add support the the CSS font-stretch property.
CSS line-height-step property - The CSS line-height-step property provides an ability to round the heights of line boxes to the multiple of the specified length. This property allows authors to control vertical rhythm.
CSS4 :focus-within pseudo-class - The :focus-within pseudo-class applies to elements for which the :focus pseudo class applies. An element also matches :focus-within if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.
Card issuer networks as payment method names - Support for calling PaymentRequest with card issuer networks (e.g., "visa", "amex", "mastercard") in the supportedMethods field.
Client.type - The type read-only property of the Client interface indicates the type of client the service worker is controlling.
Constructor for DataTransfer - The new asynchronous clipboard API makes use of DataTransfer objects and has a need to be able to construct new ones. For example (with new clipboard api): var data = new DataTransfer(); data.items.add("\(Â°oÂ°)/", "text/plain"); navigator.clipboard.write(data).then(function() { console.log(â€œCopied to clipboard successfully! á••( á› )á•—â€); }, function() { console.error(â€œUnable to write to clipboard. (â•¯à² _à² )â•¯ï¸µ â”»â”â”»â€); });
Credential Management API - CredentialsContainer.create - This feature introduces the CredentialsContainer.create method to the Credential Management API. This method allows for asynchronous creation of Credential objects.
Document constructor - Support new Document() to create a Document instance.
Drop SiteBoundCredential concept in favor of a CredentialUserData mixin in CM API - This change drops the SiteBoundCredential interface in favor of a CredentialUserData mixin. This change was introduced in the Credential Manager API specification with commit a43865bd8aa9842dbc8d8e688d5668c087677eac (link).
Expose passwords to JavaScript in Credential Management API - This change exposes passwords to JavaScript in the Credential Management API by providing the corresponding attribute on PasswordCredential. Furthermore it deprecates the previously existing PasswordCredential attributes and the custom fetch() credential infrastructure.
Feature Policy - Allow site authors to selectively enable and disable use of various browser features and APIs.
Fetch API: Request/Response.formData - Allows multipart/form-data and application/x-www-form-urlencoded fetch requests and responses to be consumed and parsed into FormData objects.
First Paint Timing API - API to enable developers to measure time for First Paint (FP) & First Contentful Paint (FCP) -- the first key moments in loading that they care about. These moments are added as 'paint' entries in the Performance Timing API.
InputEvent - InputEvent allows user input to be managed by script and help interactive with IME.
New VP9 codec string and Profile 2 support - VP9 is an open and royalty-free video codec that has been supported in Chromium since 2013. This update adds a new string format for describing the encoding properties, such as the profile, level, etc. Such properties are common in video codecs but are not exposed in the current VP9 string format. In addition, this update includes using the new format to advertise support for VP9 Profile 2. The string format is accepted by media-related APIs
Object rest/spread properties - This introduces rest properties for object destructuring assignment and spread properties for object literals.
PaymentDetailsInitId - Add a free-form identifier for payment request. This will be set using PaymentDetailsInit and reflected through PaymentRequest and PaymentResponse and to payment apps. If no identifier is specified a unique identifier will be created.
PaymentRequest.complete result "unknown" - Replace the PaymentRequest.complete enum value "" with the more descriptive "unknown".
Push API: support for ietf-webpush-encryption-08 - Chrome currently supports encrypted push message payloads encrypted with the aesgcm content encoding (draft 03). A series of substantial changes were made to the encryption drafts, yielding a new content coding: aes128gcm (draft 08). We'll continue to accept aesgcm for received push messages as well.
PushManager.supportedContentEncodings - Static property containing the supported content encodings developers can use for encrypting push messages.
PushSubscription.expirationTime - Property indicating the time at which, if any, the subscription won't be valid anymore. The user agent will attempt to fire a pushsubscriptionchange event with a new subscription before this happens. Chrome will always return NULL, until we support subscription refreshes.
Remove Headers.prototype.getAll() - Headers.prototype.getAll() is removed from the Fetch API specification.
Remove IndexedDB: webkitGetDatabaseNames - The API asynchronously returns a list of existing database names in an origin, which seemed sensible enough. The design is flawed, in that the results may be obsolete as soon as they are returned, so it can really only be used for logging, not serious application logic. Not implemented in other browsers. issues/31 tracks/links to previous discussion on flaws and possible alternatives.
Remove WEBKIT_KEYFRAMES_RULE and WEBKIT_KEYFRAME_RULE - Remove non-standardize APIs from CSS Rule and Developer can use KEYFRAMES_RULE and KEYFRAME_RULE instead
Remove document.createEvent('WebKitTransitionEvent') - Remove non-standard WebKitTransitionEvent support of document.createEvent().
Remove navigator.vibrate without user gesture - Calls to navigator.vibrate will immediately return false if user hasn't tapped on the frame or any embedded frame yet. The Vibrate API is being abused by malicious sites. This extends what we do for cross-origin iframes to all frames including top-level page. See this.
Remove: Content initiated top frame navigations to data URLs - We intend to block web pages from loading data: URLs in the top frame using <A> tags, window.open, window.location and similar mechanisms. Pseudo URLs such as data: are generally a source of confusion for users. Because of their unfamiliarity, these schemes are widely being used in spoofing and phishing attacks. Users browsing the web ideally should only ever end up on the two well known schemes (http and https). Deprecated in M58 Removal in M60
Remove: NodeFilter.prototype - Correctly implement window.NodeFilter. It should not have .prototype, and NodeIterator.filter and TreeWalker.filter should not wrap JavaScript objects.
Remove: document.createEvent('WebKitAnimationEvent') - Remove non-standard WebKitAnimationEvent support of document.createEvent().
Rename requireUserMediation to preventSilentAccess in Credential Management API - This change renames CredentialsContainer.requireUserMediation to CredentialsContainer.preventSilentAccess in the Credential Management API.
Replace CredentialRequestOptions.unmediated flag with CredentialRequestOptions.mediation enum in Credential Management API - This feature introduces an CredentialMediationRequirement enum argument to the CredentialRequestOptions of CredentialsContainer.get() that is intended to replace the currently existing boolean flag CredentialRequestOptions.unmediated. The enum will have three states ("silent", "optional", "required") with "silent" and "optional" directly mapping to the existing boolean states, "required" is a novel option.
Require user gesture for beforeunload dialogs - The beforeunload dialog will only be shown if the frame attempting to display it has received a user gesture or user interaction (or if any embedded frame has received such a gesture). (There will be no change to the dispatch of the beforeunload event, just a change to whether the dialog is shown.)
Shared Array Buffers, Atomics and Futex APIs - Adds a new JavaScript type SharedArrayBuffer. SharedArrayBuffers can be sent to Workers and without neutering the sent buffer. The underlying buffer will be shared between the workers. The Atomic API provides atomic loads and stores and Read/Modify/Write accesses to SharedArrayBuffers. The Atomic.wait provides the ability for a worker to wait for another worker to signal it, without having to spinlock.
Support VP9 in ISO-BMFF - VP9 is an open and royalty free video coding format. ISO-BMFF (MP4) is an industry standard container and is broadly accepted and used in the industry. Chrome already supports the VP9 codec (currently only in WebM container) and the ISO-BMFF container. This enables them to be used together.
Support for collecting payer's name for PaymentRequest. - If the requestPayerName flag was set to true in the PaymentOptions passed to the PaymentRequest constructor, then UA should collect and return the payer's name as part of the payment request. For example, this would be set to true to allow merchant to make a booking in the payer's name. This option has been behind a flag on mobile since Chrome 55. On desktop, it's shipping in Chrome 60 with the rest of Payment Request API.
Web payment manifests - For every payment method, there must be a corresponding JSON manifest file describing how that method participates in the web payments ecosystem.
X-Frame-Options: SAMEORIGIN matches all ancestors. - Currently, XFO performs a same origin check only against the top-level frame in a document's ancestor chain. As lcamtuf notes in [1], "Any site that allows a rogue ad to be displayed in an IFRAME; or that frames third-party content for other reasons (e.g., iGoogle, Image Search results, Facebook gadgets), is effectively not protected)." We should check all ancestors instead.
createElementNS() : Throw InvalidCharacterError instead of NamespaceError on validating a qualified name - createElementNS() should now throw only InvalidCharacterError, not NamespaceError. Validating a qualified name should only throw InvalidCharacterError, not NamespaceError, after: issues/319 issues/5161 issues/423 Latest spec.
getElementsByTagName accepts qualified names - getElementsByTagName() used to accept only local names. The DOM specification was updated to accept qualified names.
inert attribute - The inert attribute would allow web authors to mark parts of the DOM tree as inert: When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.
rAF Aligned Mouse Events - Align continuous mouse events (mousemove, mousewheel) so that they occur close to requestAnimationFrame() as possible. Historical events can be accessed via getCoalescedEvents (see this)
window.open() throws on an invalid URL parameter - Currently, we only log a message to the console. For consistency with other APIs, the WhatWG spec now requires that window.open throws a DOMException "SyntaxError" instead.

Bug fixes in Chrome 60

High-threat bug fixes

CVE-2017-5091: Use after free in IndexedDB. Reported by Ned Williamson on 2017-06-02
CVE-2017-5092: Use after free in PPAPI. Reported by Yu Zhou, Yuan Deng of Ant-financial Light-Year Security Lab (èš‚èšé‡‘æœå·´æ–¯å…‰å¹´å®‰å…¨å®žéªŒå®¤) on 2017-06-15
CVE-2017-5093: UI spoofing in Blink. Reported by Luan Herrera on 2015-10-31
CVE-2017-5094: Type confusion in extensions. Reported by Anonymous on 2017-03-19
CVE-2017-5095: Out-of-bounds write in PDFium. Reported by Anonymous on 2017-06-13
CVE-2017-5096: User information leak via Android intents. Reported by Takeshi Terada on 2017-04-23
CVE-2017-5097: Out-of-bounds read in Skia. Reported by Anonymous on 2017-07-11
CVE-2017-5098: Use after free in V8. Reported by Jihoon Kim on 2017-07-11
CVE-2017-5099: Out-of-bounds write in PPAPI. Reported by Yuan Deng, Yu Zhou of Ant-financial Light-Year Security Lab (èš‚èšé‡‘æœå·´æ–¯å…‰å¹´å®‰å…¨å®žéªŒå®¤) on 2017-06-15

Medium-threat bug fixes

CVE-2017-5100: Use after free in Chrome Apps. Reported by Anonymous on 2017-05-04
CVE-2017-5101: URL spoofing in OmniBox. Reported by Luan Herrera on 2017-01-17
CVE-2017-5102: Uninitialized use in Skia. Reported by Anonymous on 2017-05-30
CVE-2017-5103: Uninitialized use in Skia. Reported by Anonymous on 2017-05-25
CVE-2017-5104: UI spoofing in browser. Reported by Khalil Zhani on 2017-06-02
CVE-2017-6991: Pointer disclosure in SQLite. Reported by Chaitin Security Research Lab (@ChaitinTech) working with Trend Micro's Zero Day Initiative
CVE-2017-5106: URL spoofing in OmniBox. Reported by Jack Zac on 2017-04-24

Low-threat bug fixes:

CVE-2017-5105: URL spoofing in OmniBox. Reported by Rayyan Bijoora on 2017-06-06
CVE-2017-5107: User information leak via SVG. Reported by David Kohlbrenner of UC San Diego on 2017-01-27
CVE-2017-5108: Type confusion in PDFium. Reported by Guang Gong of Alpha Team, Qihoo 360 on 2017-02-24
CVE-2017-5110: UI spoofing in payments dialog. Reported by xisigr of Tencent's Xuanwu Lab on 2017-05-02

[source]

Have fun cross-browser testing your web applications in Chrome 60 and Browserling.