Chrome 66 arrives with autoplaying content blocked by default

Google today launched Chrome 66 for Windows, Mac, Linux, Android, and iOS. The desktop release includes autoplaying content muted by default, security improvements, and new developer features. You can update to the latest version now using the browser’s built-in updater or download it directly from google.com/chrome.

With over 1 billion users, Chrome is both a browser and a major platform that web developers have to consider. In fact, with Chrome’s regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available.

The biggest improvement in this release is that autoplaying content with sound is now blocked by default. This functionality was delayed — it was originally slated for January with the release of Chrome 64 — but now it’s finally here. Chrome 64 did, however, add an option to completely disable audio on a per site basis, functionality which also arrived later than planned (it was originally scheduled for Chrome 63).

In our tests, autoplaying content that is muted still plays automatically. Autoplaying content with sound, whether it has visible controls or not, and whether it is set to play on loop or not, simply does not start playing.

We received mixed results with YouTube videos, however — sometimes they played automatically and other times they did not. Some would expect a video site to autoplay content, as presumably that is the main focus of the page, but others may disagree. Either way, if a page somehow circumvents the autoplaying block, you can still mute whole websites.

The discrepancy is due to how Chrome ranks each website for you. On desktop, Chrome has a Media Engagement Index (MEI), which measures the propensity to consume media for each site you visit. You can check your MEI for each site by navigating to the chrome://media-engagement internal page.

The MEI is determined by a ratio of visits to significant media playback events per origin, with these four factors taken into account:

• Consumption of the media (audio/video) must be greater than 7 seconds.
• Audio must be present and unmuted.
• Tab with video is active.
• Size of the video (in px) must be greater than 200×140.

When Google first announced its plans, the company justified its approach by saying that while “autoplay can make it faster and easier to consume on the web,” unexpected media playback is also “one of the most frequent user concerns” because it “can use data, consume power, and make unwanted noise while browsing.” A side benefit, Google argues, is unified desktop and mobile web behavior, making web media development more predictable across platforms and browsers.

Speaking of platforms, Chrome 65 was the last release of Google’s browser for OS X 10.9 users. Chrome 66 requires OS X 10.10 or later. If you haven’t upgraded your Mac yet, this might push you to pull the trigger.

Moving on to developer features, Chrome 66 includes ImageBitmap Rendering Context for the canvas tag. Instead of first creating an img tag and then rendering its contents to a canvas, which causes multiple copies of the image to be stored in memory, this new rendering context streamlines the display of ImageBitmap objects by avoiding memory duplication. Google notes that a WebGL game, for example, could use this to load new textures on the fly as gameplay progresses.

Next, Chrome 66 implements CSS Typed Object Model. Instead of changing CSS properties by manipulating strings (only for the browser to then convert it back to a typed representation), the CSS Typed Object Model Level 1 reduces this burden on both the developer and browser by exposing CSS values as typed JavaScript objects rather than strings. This is not only more performant, it allows developers to write more maintainable code.

Next up, there’s a new asynchronous Clipboard API with a promise-based means of reading from and writing to the clipboard (future versions will support richer types of data, including images). Google claims it is simpler than the execCommand(‘copy’) API released in Chrome 43 and integrates with the Permissions API.

Finally, the AudioWorklet aims to replace the legacy ScriptProcessorNode, which was asynchronous and required thread hops that could produce an unstable audio output. The AudioWorklet object provides a new synchronous JavaScript execution context that allows developers to programmatically control audio without additional latency and higher stability in the output audio.

Developers will also want to know that Chrome 66 includes an update to the V8 JavaScript engine: version 6.6. The release includes new JavaScript language features, code caching after execution, background compilation, removal of AST numbering, and performance improvements. Check out the full list of changes for more information.

Other developer features in this release (some are mobile-specific):

• Animation: The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.
• CSS: The mathematical expressions calc(), min(), and max() are now supported in media queries, as required by the CSS Values and Units Module Level 4 specification. This change brings them in line with other types of rules where these functions are allowed anywhere a number is allowed.
• CSS: Floating point values are now allowed in the rgb() and rgba() functions.
• Feature Policy: By default, the deviceorientation, deviceorientationabsolute, and devicemotion events are now restricted to top-level document and same-origin subframes, the same as if the feature policy for those features were set to 'self'. To modify this behavior, explicitly enable or disable the specific feature.
• File API: The File API now results in a network error instead of a 404 when attempting to read from an invalid or non-existing blob URL.
• Forms: The <textarea> element and the <select> element now support the autocomplete attribute as required by the specification.
• Forms: A mutable checkbox now fires three events as required by the HTML specification: a click event, then an input event, then a change event. Formerly only the click and change events were fired.
• Fullscreen: If a page in fullscreen mode opens a popup and calls window.focus(), that page exits full screen. This does not occur if the popup receives focus some other way.
• GetUserMedia: A new method on the MediaStreamTrack interface called getCapabilities() returns a MediaTrackCapabilities object, which specifies the values or range of values which each constrianable property. Capabilities vary by device.
• JavaScript: The Function.prototype.toString() function now returns exactly what is written in the source code. This includes whitespace and other text that may have been used. For example, if there is a comment between the function keyword and the function name, the comment is now returned in addition to the keyword and name.
• JSON is now a syntactic subset of ECMAScript, which allows line separator (U+2028) and paragraph separator (U+2029) symbols in string literals.
• JavaScript: The catch clause of a try statement can now be used without a parameter.
• JavaScript: String.prototype.trimStart() and String.prototype.trimEnd() are now available as the standards-based way of trimming whitespace from strings, in addition to String.prototype.trim() which was already implemented. The non-standard trimLeft() and trimRight() remain as aliases of the new methods for backward compatibility.
• JavaScript: The Array.prototype.values() method returns a new array iterator object that contains the values for each index in the array.
• Layout: The grid prefix has been removed from the CSS gutter properties: grid-gap becomes gap, grid-row-gap becomes row-gap, and grid-column-gap becomes column-gap. The default value for all three is normal and the prefixed properties are aliases of the new ones. Note that column-gap property already exists and is used by css-multicol.
• Layout: Elements with the display properties table-row, table-row-group, table-header-group, table-footer-group, table-cell, and table-caption that have a transform property are now containing blocks for fixed position elements. Blink currently does not make <tr>, <tbody>, <tfoot>, and <thead> be containing blocks for fixed-position elements.
• Media: As announced earlier, autoplay is now allowed only when either the media won’t play sound, after the user clicks or taps on the site, or (on desktop) if the user has previously shown an interest in media on the site. This will reduce unexpected video playbacks with sound when first opening a web page.
• Media: The Media Capabilities, Decoding Info API allows websites to get more information about the decoding abilities of the client. This enables more informed selection of media streams for the user, avoiding scenarios such as where the client is unable to smoothly and power-efficiently decode a resolution that might have been picked based only on available bandwidth and screen size.
• Network: The Fetch API has two new features. The Request object now supports a keepalive property which allows a fetch to continue after a tab is closed. This feature is invoked by passing a boolean in the constructor’s initialization object. Its value can be read back from the object itself. This property can be used with sendBeacon() as well. New AbortSignal and AbortController interfaces allow a fetch to be canceled. To accomplish this create an AbortController object and pass its signal property as an option to fetch. Calling abortController.abort() cancels the fetch. There’s more information in our abortable fetch article.
• ServiceWorker: A service worker can no longer respond to a request whose mode is same-origin with a response whose type is CORS. This is a security measure recently added to the Fetch specification.
• ServiceWorker: FetchEvent.clientId now returns an empty string instead of null when it isn’t set. For example, this can occur during a navigation request.
• WebRTC: Chrome now supports the RTCRtpSender.dtmf
  attribute per the specification. This replaces the CreateDTMFSender() function which has not yet been deprecated.
• CSS: The object-position and perspective-origin properties no longer accepts three-part values such as top right 20%. This change also applies to basic shapes and gradients. Valid position values must always have 1, 2, or 4 parts.
• HTML: Following a specification change, ImageCapture.prototype.setOptions() has been removed.
• Input: Following a specification change, document.createTouch() and document.createTouchList() have been removed.
• Web Audio: Following a specification change, automatic dezippering of AudioParam.prototype.value changes was removed from Chrome. If you need to smooth the value of AudioParam changes, use AudioParam.prototype.setTargetAtTime().

For a full rundown of what’s new, check out the Chrome 66 milestone hotlist.

Chrome 66 also implements 62 security fixes. The following ones were found by external researchers:

• [$TBD][826626] Critical CVE-2018-6085: Use after free in Disk Cache. Reported by Ned Williamson on 2018-03-28
• [$TBD][827492] Critical CVE-2018-6086: Use after free in Disk Cache. Reported by Ned Williamson on 2018-03-30
• [$7500][813876] High CVE-2018-6087: Use after free in WebAssembly. Reported by Anonymous on 2018-02-20
• [$5000][822091] High CVE-2018-6088: Use after free in PDFium. Reported by Anonymous on 2018-03-15
• [$4500][808838] High CVE-2018-6089: Same origin policy bypass in Service Worker. Reported by Rob Wu on 2018-02-04
• [$3000][820913] High CVE-2018-6090: Heap buffer overflow in Skia. Reported by ZhanJia Song on 2018-03-12
• [$500][771933] High CVE-2018-6091: Incorrect handling of plug-ins by Service Worker. Reported by Jun Kokatsu (@shhnjk) on 2017-10-05
• [$N/A][819869] High CVE-2018-6092: Integer overflow in WebAssembly. Reported by Natalie Silvanovich of Google Project Zero on 2018-03-08
• [$4000][780435] Medium CVE-2018-6093: Same origin bypass in Service Worker. Reported by Jun Kokatsu (@shhnjk) on 2017-11-01
• [$2000][633030] Medium CVE-2018-6094: Exploit hardening regression in Oilpan. Reported by Chris Rohlf on 2016-08-01
• [$2000][637098] Medium CVE-2018-6095: Lack of meaningful user interaction requirement before file upload. Reported by Abdulrahman Alqabandi (@qab) on 2016-08-11
• [$1000][776418] Medium CVE-2018-6096: Fullscreen UI spoof. Reported by WenXu Wu of Tencent’s Xuanwu Lab on 2017-10-19
• [$1000][806162] Medium CVE-2018-6097: Fullscreen UI spoof. Reported by xisigr of Tencent’s Xuanwu Lab on 2018-01-26
• [$500][798892] Medium CVE-2018-6098: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-01-03
• [$500][808825] Medium CVE-2018-6099: CORS bypass in ServiceWorker. Reported by Jun Kokatsu (@shhnjk) on 2018-02-03
• [$500][811117] Medium CVE-2018-6100: URL spoof in Omnibox. Reported by Lnyas Zhang on 2018-02-11
• [$500][813540] Medium CVE-2018-6101: Insufficient protection of remote debugging prototol in DevTools . Reported by Rob Wu on 2018-02-19
• [$500][813814] Medium CVE-2018-6102: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-20
• [$500][816033] Medium CVE-2018-6103: UI spoof in Permissions. Reported by Khalil Zhani on 2018-02-24
• [$500][820068] Medium CVE-2018-6104: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-03-08
• [$N/A][803571] Medium CVE-2018-6105: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-01-18
• [$N/A][805729] Medium CVE-2018-6106: Incorrect handling of promises in V8. Reported by lokihardt of Google Project Zero on 2018-01-25
• [$N/A][808316] Medium CVE-2018-6107: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-02
• [$N/A][816769] Medium CVE-2018-6108: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-27
• [$N/A][710190] Low CVE-2018-6109: Incorrect handling of files by FileAPI. Reported by Dominik Weber (@DoWeb_) on 2017-04-10
• [$N/A][777737] Low CVE-2018-6110: Incorrect handling of plaintext files via file:// . Reported by Wenxiang Qian (aka blastxiang) on 2017-10-24
• [$N/A][780694] Low CVE-2018-6111: Heap-use-after-free in DevTools. Reported by Khalil Zhani on 2017-11-02
• [$N/A][798096] Low CVE-2018-6112: Incorrect URL handling in DevTools. Reported by Rob Wu on 2017-12-29
• [$N/A][805900] Low CVE-2018-6113: URL spoof in Navigation. Reported by Khalil Zhani on 2018-01-25
• [$N/A][811691] Low CVE-2018-6114: CSP bypass. Reported by Lnyas Zhang on 2018-02-13
• [$TBD][819809] Low CVE-2018-6115: SmartScreen bypass in downloads. Reported by James Feher on 2018-03-07
• [$N/A][822266] Low CVE-2018-6116: Incorrect low memory handling in WebAssembly. Reported by Jin from Chengdu Security Response Center of Qihoo 360 Technology Co. Ltd. on 2018-03-15
• [$N/A][822465] Low CVE-2018-6117: Confusing autofill settings. Reported by Spencer Dailey on 2018-03-15
• [$N/A][822424] Low CVE-2018-6084: Incorrect use of Distributed Objects in Google Software Updater on MacOS. Reported by Ian Beer of Google Project Zero on 2018-03-15
• [833889] Various fixes from internal audits, fuzzing and other initiatives

Google thus spent at least $34,000 in bug bounties for this release. As always, the security fixes alone should be enough incentive for you to upgrade.

There are two more changes related to security worth noting. Chrome 66 includes a small percentage trial of Site Isolation, which improves Chrome’s security and helps mitigate the risks posed by Spectre.

Google has also started the process of deprecating Chrome’s trust in the Symantec certificate authority (including Symantec-owned brands like Thawte, VeriSign, Equifax, GeoTrust, and RapidSSL). If your site is using a SSL/TLS certificate from Symantec that was issued before June 1, 2016, it will stop functioning in Chrome 66, while all remaining Symantec SSL/TLS certificates will stop working starting in Chrome 70.

Google releases a new version of its browser every six weeks or so. Chrome 67 will arrive by late May.

Chrome 66 for Android was also released today and is rolling out gradually over the next few weeks via Google Play. The big change here is that Google Safe Browsing now works with Android’s WebView by default. Safe Browsing provides lists of URLs that contain malware or phishing content to Chrome, Firefox, and Safari browsers, as well as to internet service providers (ISPs). This change means developers of Android apps using WebView no longer have to make changes to take advantage of Safe Browsing.

Chrome 66 for iOS is out as well over on Apple’s App Store. In addition to the usual stability and performance improvements, you can now export your passwords.