Chrome 69 Released - What's new?

We are happy to announce that Chrome 69 was released today. At Browserling we immediately installed it, got familiar with its features in-depth, and launched it on our cross-browser testing platform so that you can try it too and test your webapps in it!

Try it yourself right away!

What's new in Chrome 69?

The most notable features are as follows:

• A new browser interface.
• CSS Scroll Snap allows you to create smooth, slick, scroll experiences.
• Display Cutouts lets you use the full area of the screen, including any space behind the display cutout, sometimes called a notch.
• The Web Locks API allows you to asynchronously acquire a lock, hold it while work is performed, then release it.
• From the CSS4 spec, you can now create color transitions around the circumference of a circle, using conic gradients.
• New toggleAttribute() method on elements toggles the existence of an attribute, similar to classList.toggle().
• JavaScript arrays are getting two new methods: flat() and flatMap().
• OffscreenCanvas moves work off the main thread in a worker, helping to eliminate performance bottlenecks.
• A number of fixes and improvements.

For Android:

• Secure and easy mobile payments via 3rd party payment apps.
• Password generation now works on more sites.

For iOS:

• New bottom toolbar: easier to reach frequently used functions, like Back, Search, tabs, and the menu.
• New tab grid: see bigger previews of your tabs, including tabs open on other devices.
• Features like Bookmarks and Reading Lists are now easily accessible on the New Tab Page.
• Press firmly on the app icon to see shortcuts (3D Touch).
• Credit cards you enter on your device are now securely synced to Google Pay for use on other devices (if enabled).

New browser interface

You can easily spot Chrome 69 by its new and completely renovated material design theme - No sharp edges.

Backgrounds on the new blank page tab

Another cool thing about the design is the option to change the background of a new tab. To set a custom background, click the gear icon at the bottom right corner of the new tab page. Select “Chrome Backgrounds” to choose one of Google’s backgrounds, or click “Upload an Image” to put any background image you like there. This is an example:

Quick-access shortcuts

In the new blank tab page you can now also see a shortcuts bar, which is more or less just a quick-access bookmarks bar. Chrome’s New Tab page previously had a “most visited” section below the search box, showing you the web pages you most frequently visited. That’s now replaced by the quick access shortcuts bar.

Better password manager

Passwords. Sounds important, doesn't it? Google did a wonderful job at improving the password manager even more. Now it is equipped with a fully-functional integrated password generator tool. Just right-click a password field and select “Generate Password.” Google has also improved the autofill feature.

Improved "Omnibox"

For chrome, the address bar is not just an address bar. And since version 69, the address bar - "Omnibox" got significantly improved as well. Many answers to searches now instantly appear in the Omnibox as you start typing, just as they do when searching on Google’s website. Want to see it in action? Type for example: "weather Norway" or "5 cm in inch" or "6 ^ 3". And it gets smarter every day. Furthermore, it can suggest you to switch to already existing tab instead of running the same one again.

Developer features and updates in Chrome 69

• Add RTCRtpParameters.headerExtensions - This change adds support for the RTCRtpParameters.headerExtensions dictionary entry which is returned by RTCRtpSender.getParameters(). This is a read-only field that allows inspection of the parameters that are set on a PeerConnection after negotiation.
• Array.prototype.{flat,flatMap} - JavaScript arrays are getting two new methods. Array.prototype.flat() returns a new array with all sub-array elements concatenated into it recursively up to the specified depth. The sub-array elements become members of the new array. Array.prototype.flatMap() first maps each element using a mapping function, then flattens the result into a new array. This method is functionally equivalent to a map followed by a flatten of depth 1.
• CSS Scroll Snap Points - The CSS scroll snap specification introduces snap points as a way to "enforce the scroll offsets that a scroll container's visual viewport may end at after a scrolling operation has completed". Scroll snapping applies to both user scroll operations such as touch, wheel scrolling, or scrollbar dragging, and programmatic scroll operations such as Element.scrollTo(). This improves the user experience by allowing scrollable zones to easily stop at predefined points.
• CSS conic-gradient - Support was added for CSS conic (angular/sweep) gradients. Conic gradients allow color transitions around a center rather than radiating from it. This allows, for example, a web developer to create a hue wheel using only two CSS properties.
• CSS logical flow relative margins, paddings and borders - Chrome now implements logical margin, padding, and border CSS properties using standard names, specifically margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. These capabilities were previously supported through -webkit prefixes and non-standard names. Shorthand properties are only added for border-{block,inline}-{start,end}.
• Cookie Store API - The Cookie Store API exposes HTTP cookies to service workers and offers an asynchronous alternative to document.cookie.
• Deprecation Reports - A new feature of the Reporting API gives developers more insight into the functioning of their code on client machines. Deprecation reports allow deprecation warnings, currently only available in developer tool consoles, to be sent to the back end, or captured in callbacks using ReportingObserver.
• Display cutout and CSS env() support - Display cutouts are now supported in Chrome through CSS environment variables and the viewport-fit meta tag. This allows developers to take advantage of the entire screen on devices that have a display cutout.
• EME Extension: HDCP Policy Check - This feature provides applications the ability to query whether a certain HDCP policy can be enforced so that playback can be started at the optimum resolution for the best user experience.
• EME: Query what encryption schemes are supported - A new method will allow applications to query whether a specific encryption scheme is supported by Encrypted Media Extensions (EME).
• ES Modules for dedicated workers ('module' type option) - JavaScript will support modules in dedicated workers. Using a new value for the constructor's type attribute, worker scripts are loaded as ES6 modules and the import statement is available on worker contexts. With this feature, web developers can more easily write programs in a composable way and share them among a page and workers.
• Element.toggleAttribute - A new method named Element.toggleAttribute() allows toggling the existence of an element’s attribute in a way similar to Element.classList.toggle. An optional force parameter forces toggling the attribute even if it doesn't exist. This makes managing boolean attributes much simpler as the interface doesn't use strings as does Element.setAttribute().
• Feature Policy: JavaScript API - Expose JavaScript API for feature policy. document.policy.allowedFeatures() // what are the allowed features in this document document.policy.allowsFeature('geolocation', <origin>?) // is geolocation allowed in this document/origin? document.policy.getAllowlistForFeature('geolocation') // what origins are allowed to use geolocation?
• Fetch API: Request.isHistoryNavigation - Add a boolean property to request objects to indicate whether the particular request is a history navigation. This allows a service worker to know whether a request was due to a back/forward navigation. An example of how this might be used is that a service worker could respond to such a navigation with a cached response.
• Keyboard Map - This API returns a map which translates from KeyboardEvent.code values into strings that can be shown to the user to identify each key. This is not possible with existing web platform APIs because the value that should be shown to the user depends on the keyboard layouts that the user has installed and activated.
• Network Error Logging - This feature defines a mechanism that enables developers to declare a network error reporting policy for a web application via the NEL header. A user agent can use this policy to report encountered network errors that prevented it from successfully fetching requested resources. This is done through the common Reporting API.
• OffscreenCanvas - OffscreenCanvas is a new interface that allows canvas rendering contexts (2D and WebGL) to be used in Workers. Making canvas rendering contexts available to workers increases parallelism in web applications, leading to improved performance on multi-core systems. As part of the required tooling for this to work, this also launches DedicatedWorker.requestAnimationFrame(), allowing animation-like events to be triggered the same on dedicated workers as they are in Window.
• RTCRtpSender / RTCRtpReceiver.getCapabilities() - The getCapabilities() method returns the most optimistic view of the capabilities of the system for sending media of the given kind. It does not reserve any resources, ports, or other state but is meant to provide a way to discover the types of capabilities of the browser including which codecs or RTP extensions may be supported.
• Remove 'stalled' events for HTMLMediaElements using MediaSourceExtensions - The HTMLMediaElement.stalled event fires when media download has failed to progress for at least 3 seconds. In Media Source Extensions, the web app manages the download and the media element is not aware of its progress. Since some apps append media data in chunks larger than 3 seconds, stalled was being fired at inappropriate times. To solve this, stalled has been removed for Media Source Extensions.
• Remove document.createTouchList - The document.createTouchList() method is being removed because the Touch() constructor has been supported since Chrome 48.
• Remove extra form data , if "value" attribute is present with non-empty value for - As per spec, the constructed "form data set" should not include the value of the image button
• Reporting API - The Reporting API defines a generic reporting framework which allows web developers to associate a set of named reporting endpoints with an origin. Various platform features (like Content Security Policy, Network Error Reporting, and others) will use these endpoints to deliver feature-specific reports in a consistent manner.
• ReportingObserver - A new feature of the Reporting API gives developers more insight into the functioning of their code on client machines. The ReportingObserver API allows JavaScript to capture reports in callback, which can be used to save custom reporting data to page analytics.
• ServiceWorkerRegistration.update() resolves with a registration. - ServiceWorkerRegistration.update() previously resolved with undefined. Now it resolves to the registration object as required by the specification.
• Support for CTAP2 FIDO devices via the Web Authentication API - This feature adds support for CTAP2 devices, which provide advanced security capabilities such as biometric authentication and resident keys (keys stored on the device). The WebAuthentication API formerly only supported Universal 2nd Factor (U2F, also known as CTAP1 ) devices at the transport layer. This change doesn't alter the API surface itself but enables richer device interactions via the existing Web Authentication API.
• Three new network quality client hints - Support for the “rtt”, “downlink”, and “ect” client hint values and HTTP request headers have been added to Chrome to convey Chrome’s network connection speed to servers. These network quality hints provide the same values as existing Network Information APIs navigator.connection.rtt, navigator.connection.downlink, and navigator.connection.effectiveType.
• Web Locks API - This API allows scripts running in one tab to asynchronously acquire a lock, hold it while work is performed, then release it. While held, no other script in the origin can acquire the same lock. A lock represents some potentially shared resource, identified by a name chosen by the web app. For example, if a web app running in multiple tabs wants to ensure that only one tab is syncing to the network, each tab could try to acquire a "my_net_sync" lock, but only one tab will succeed.
• WebRTC RTCRtpTransceiver in Unified Plan - When spec-complaint SDP format "Unified Plan" is used, RTCRtpTransceiver describes each sender-receiver pair that is added to the RTCPeerConnection. This represents the components used to send and receive media. Exposing the transceiver gives the application the ability to receive media early and provides more control over the generated SDP. APIs that are shipping include RTCRtpTransceiver, RTCPeerConnection.addTransceiver() and RTCPeerConnection.getTransceivers().
• WebSocket: permit connection reuse for auth - When receiving a 401 HTTP response during the WebSocket handshake, Chrome will attempt to continue authentication on the same socket. Windows HTTP authentication usually requires a single connection to be reused for authentication to succeed. Until now, Chrome has always closed the connection on a 401 status response, so Windows authentication has not worked. Windows authentication support is mostly useful in enterprise environments where single-sign-on is used.
• performance.memory improvements - The performance.memory property is a non-standard API, seeing significant usage from some of our partners. With this change, if the renderer is locked to a site reported values will not contain coarse quantization and delay. This will allow developers to detect performance regressions from user data more easily because the memory measurements will be more accurate and can be taken more frequently.
• service worker: Don't expose the API to insecure contexts. - Because of a technical limitation, navigator.serviceWorker was previously exposed on insecure contexts and threw a Security Error when used. After this change, navigator.serviceWorker will return undefined. This aligns with the specification.
• window.confirm() will not activate parent page - If a document in a background tab calls window.confirm() then the call to confirm() will return immediately with false, and no dialog will be shown to the user. If the tab is active, then the call will show a dialog. Specifically, this removes the ability to use window.confirm() to bring a tab to the front against the user’s will.

Bug fixes

High-threat bug fixes:

• CVE-2018-16065: Out of bounds write in V8. Reported by Brendon Tiszka on 2018-07-26
• CVE-2018-16066: Out of bounds read in Blink. Reported by cloudfuzzer on 2018-05-29
• CVE-2018-17457: Use after free in WebAudio. Reported by Zhe Jin（金哲），Luyao Liu(刘路遥) from Chengdu Security Response Center of Qihoo 360 Technology Co. Ltd on 2018-05-31
• CVE-2018-16067: Out of bounds read in WebAudio. Reported by Zhe Jin（金哲），Luyao Liu(刘路遥) from Chengdu Security Response Center of Qihoo 360 Technology Co. Ltd on 2018-07-05
• CVE-2018-16068: Out of bounds write in Mojo. Reported by Mark Brand of Google Project Zero on 2018-08-23
• CVE-2018-16069:Out of bounds read in SwiftShader. Reported by Mark Brand of Google Project Zero on 2018-05-31
• CVE-2018-16070: Integer overflow in Skia. Reported by Ivan Fratric of Google Project Zero on 2018-06-01
• CVE-2018-16071: Use after free in WebRTC. Reported by Natalie Silvanovich of Google Project Zero on 2018-06-21

Medium-threat bug fixes:

• CVE-2018-16072: Cross origin pixel leak in Chrome's interaction with Android's MediaPlayer. Reported by Jun Kokatsu (@shhnjk) on 2018-07-17
• CVE-2018-16073: Site Isolation bypass after tab restore. Reported by Jun Kokatsu (@shhnjk) on 2018-07-12
• CVE-2018-16074: Site Isolation bypass using Blob URLS. Reported by Jun Kokatsu (@shhnjk) on 2018-07-13
• Out of bounds read in Little-CMS. Reported by Quang Nguyá»…n (@quangnh89) of Viettel Cyber Security on 2018-07-18
• CVE-2018-16075: Local file access in Blink. Reported by Pepe Vila (@cgvwzq) on 2017-11-27
• CVE-2018-16076: Out of bounds read in PDFium. Reported by Aleksandar Nikolic of Cisco Talos on 2018-07-25
• CVE-2018-16077: Content security policy bypass in Blink. Reported by Manuel Caballero on 2014-05-27
• CVE-2018-16078: Credit card information leak in Autofill. Reported by Cailan Sacks on 2018-06-28
• CVE-2018-16079: URL spoof in permission dialogs. Reported by Markus Vervier and Michele Orrù (antisnatchor) on 2017-05-17
• CVE-2018-16080: URL spoof in full screen mode. Reported by Khalil Zhani on 2018-06-29
• CVE-2018-16081: Local file access in DevTools. Reported by Jann Horn of Google Project Zero on 2016-11-17
• CVE-2018-16082: Stack buffer overflow in SwiftShader. Reported by Omair on 2018-06-11
• CVE-2018-16083: Out of bounds read in WebRTC. Reported by Natalie Silvanovich of Google Project Zero on 2018-06-26
• Cross origin read. Reported by Luan Herrera (@lbherrera_) on 2018-05-31

Low-threat bug fixes:

• CVE-2018-16084: User confirmation bypass in external protocol handling. Reported by Jun Kokatsu (@shhnjk) on 2018-07-18
• CVE-2018-16086: Script injection in New Tab Page. Reported by Alexander Shutov (Dark Reader extension) on 2018-05-18
• CVE-2018-16085: Use after free in Memory Instrumentation. Reported by Roman Kuksin of Yandex on 2018-06-26
• CVE-2018-16087: Multiple download restriction bypass.
• CVE-2018-16088: User gesture requirement bypass.

[source]

Have fun cross-browser testing in Chrome 69!

Bonus

If you want to take a rest from all the work and maybe have some fun while your internet connection is down, then you can play the Chrome’s dinosaur game. This is an Easter egg, and it appears when you don’t have an Internet connection. On the “No internet” page that features a dinosaur icon, press the Spacebar (or tap on mobile) to begin the game, which is also edited in Chrome 69.