The anticipated Chrome 66 was released today, striking with a number of amazing new features. This version seems to be mostly intended for developers and we couldn't wait to add it to Browserling's browser cloud.

Chrome 66 Version

Try it yourself on the spot!

What's new in chrome 66?

The most notable features are as follows:

  • CSS manipulation becomes easier with the new CSS Typed Model Object.
  • Access to the clipboard is now asynchronous.
  • There's a new rendering context for canvas elements.
  • TextArea and Select now support the autocomplete attribute.
  • Setting autocapitalize on a form element will apply to any child form fields, improving compatibility with Safari's implementation of autocapitalize.
  • trimStart() and trimEnd() are now available as the standards-based way of trimming whitespace from strings.
  • A number of fixes and improvements.

For Android:

  • Find your saved passwords more easily – just tap the new Search icon in Settings > Passwords.

For iOS:

  • Export passwords saved in Chrome and use them in another app.
  • Stability and performance improvements.

CSS Typed Object Model

The regular CSS object model used for example to update a CSS property was not all that great, because it returns everything as a string. This makes numeral operations kind of inefficient in terms of well.. everything. You will have to convert the string to a number first and then apply changes. With the new CSS Typed Object Model, CSS values are presented as typed JavaScript objects, providing a better way of working with CSS. Compared to the old CSS Object Model, early benchmarks show about a 30% improvement in operations per second - something that’s especially important for JavaScript animations. Logically this also significantly decreases the chance of bugs, not to mention that there are also some new routines that will help dealing with arithmetic operations.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Asynchronous Clipboard API

It's not rarity to encounter scenarios where you copy a large portion of text and since the call to access clipboard and retrieve text is synchronous, everything blocks. Chrome 66 provides means to overcome this problem with its new Async Clipboard API. Text can be copied to the clipboard by calling writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  }
);

Similarly you can use getText() to retrieve text from the clipboard.

New Canvas Context BitmapRenderer

Many people wish to draw graphics in a per-pixel manner. The canvas now lets you do that. You can in fact, manipulate photos precisely, draw graphs, statistics and even more creative things. Since Chrome 66, there is a new async rendering context that’s streamlined the display of ImageBitmapobjects. They now render more efficiently, especially avoiding memory duplication. This is how you can use it, it's simple:

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Developer features and updates in Chrome 66

  • Asynchronous Clipboard API - A modern, asynchronous Clipboard API based on Promises. Text-only APIs (clipboard.readText and clipboard.writeText): Behind a flag in M62 Enabled by default in M66 nSupport for images and other data types is still under development.
  • Aligning U2F attestation with webauthn - Chrome has never supported the FIDO U2F API directly[1]. However, it does ship with an internal extension and it's possible to implement the U2F API by using postMessage to send messages to this extension. (Description continued in comments.) [1]
  • Add autocomplete attribute to <textarea> and <select> - Add autocomplete attribute to <textarea> and <select> as per spec. link
  • Array.prototype.values - The values() method returns a new Array Iterator object that contains the values for each index in the array. var
  • Autocapitalize support on all editable elements and on <form> elements - Improve compatibility with Safari's implementation of autocapitalize by: - Supporting autocapitalize attribute on any contenteditable element - Allow specifying the autocapitalize attribute on a <form> element to have it apply to all child form field
  • Background Tab Resource Load Throttling - In background tabs, the maximum number of active resource loading requests is limited. The limit can be different for the top frame, and other sub-frames. Currently following requests are excluded from the throttling target: WebSockets, WebRTC's data channel, Fetch API, XMLHttpRequest, EventSource, Video and Audio. Most fetches made by HTML elements / stylesheets are throttleable. This feature is currently enabled on Beta and is going to be shipped in Chrome 69+.
  • CSS Typed OM (Houdini) - The new CSSOM provides typed style access for developers. This will generally improve performance primarily by removing the need to do lots of string parsing. In addition to this, it will enable performant development of various new Houdini specifications (including custom properties, layout and paint). Only a subset of CSS properties are supported for now: Readme
  • CSS calc() in media queries - According to the CSS Values 4 spec, math functions such as calc() should be allowed wherever individual CSS values such as numbers are allowed. However, calc() expressions are not currently parsed in media queries. This change would introduce support for parsing calc() expressions inside of media queries.
  • Do not throw on unimplemented but valid keyframe-specific composite values. - By spec, the following should not throw even if additive/accumulative animations are not yet supported by the browser: / Currently throws on Chrome - should not! element.animate( [ { color: 'red', composite: 'accumulate' }, { color: 'blue', composite: 'add' } ], 2000); ); Firefox does not throw in this case.
  • ECMAScript ⊃ JSON - A Stage 3 proposal makes ECMAScript a syntactic superset of JSON by allowing line separator (U+2028) and paragraph separator (U+2029) in string literals.
  • Feature Policy: Unsized Media - Allows developers to selectively enable and disable the use of media elements (<img> and <video>) without specified dimensions through the Feature-Policy HTTP header or the <iframe> 'allow' attribute. This provides more control over media elements with unspecified dimension, on a per-origin basis. Use this policy to improve layout stability. The identifier for the feature in policies is 'unsized-media'. By default, 'unsized-media' is allowed in all frames.
  • Feature Policy: control over Device Orientation API - The sensor policy-controlled features are used to control access to a device sensors requested through an event specified in the DeviceOrientation Event Specification. By default, the deviceorientation, deviceorientationabsolute and devicemotion events will be restricted to top-level document and same-origin subframes (it follows from features default allow list 'self'). The default behavior can be modified by explicitly enabling or disabling of the dedicated sensor policy-controlled features.
  • Fetch API: AbortSignal and AbortController - A fetch() can be made cancellable by passing an AbortSignal "signal" in the fetch options. Calling abort() on the associated AbortController will then cancel the fetch.
  • Fetch API: keepalive - This option instructs fetch() to perform resource fetching with the keepalive flag set for non-blocking event reporting, analytics, etc. as well as the Beacon API (SendBeacon).
  • Function.prototype.toString revision - The "implementation-dependent String" returned from Function.prototype.toString() is now a fully-specified String, which is a substring of the source code that defines the function. For example, this preserves whitespace and comments between the "function" keyword and the function name identifier. For functions created with CreateDynamicFunction (such as through new Function()), the String is fully-specified and includes the parameters passed to CreateDynamicFunction.
  • Link rel=modulepreload - The new "modulepreload" rel value in <link> element and Link: header provides a way to initiate early (and high-priority) loading of module scripts.
  • Make <tr> with transform be a containing block. - Elements with table-row, table-row-group, table-header-group, table-footer-group, table-cell, and table-caption that have a transform property should be containing blocks for fixed position elements. Blink currently does not make <tr>, <tbody>, <tfoot>, and <thead> be a containing block for fixed position elements, which we propose to change.
  • Media Capabilities: decoding - This specification intends to provide APIs to allow websites to make an optimal decision when picking media content for the user. This launch is only about exposing the decoding abilities of the device/system/browser.
  • Network error when blob URL loading fails - Rather than returning a 404 when attempting to read from a invalid/non-existing Blob URL, these fetches should result in a network error.
  • Optional catch binding - This proposal allows the catch clause to exist without a parameter.
  • Send "input" Event on activation behavior for radio and file input type - As per spec, on input activation behavior fires a input event, then a change event for radio and file <input > type.
  • Send "input" Event on checkbox click - As per spec, click on mutable checkbox fires a click event, then an input event, then a change event.
  • Service Worker: Disallow CORS responses for same-origin requests. - With this change, 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 added to the Fetch specification via this and this.
  • Service Worker: Non-nullable FetchEvent#clientId - With this change FetchEvent#clientId will return an empty string instead of null when it isn't set, e.g., for a navigation request.
  • Service Worker: Requests from embed and object elements skip service workers - Service workers no longer receive fetch events for requests from embed and object elements. This includes both requests for the main resource itself (the src or data attribute) and for any requests from the resulting context (the plugin or HTML context). This change was made to adhere to the specification, which disallows service worker interception due to security considerations.
  • String.prototype.trimStart / String.prototype.trimEnd - Until now, String.prototype.{trimLeft,trimRight} were non-standard language extensions, required for Web compatibility. The Stage 3 proposal at this standardizes this functionality as String.prototype.{trimStart,trimEnd}, and defines String.prototype.{trimLeft,trimRight} as aliases for backwards compatibility. This patch implements that proposal behind the --harmony-string-trimming flag.
  • The ImageBitmap rendering context for <canvas> - A new rendering context that streamlines the display of ImageBitmap objects. This new rendering context uses transfer semantics to take ownership of the pixels of an ImageBitmap object, thus avoiding memory duplication and rasterization overhead.
  • Unprefix CSS Grid Layout gutter properties - Rename gutter properties to remove "grid-" prefix: grid-gap => gap grid-row-gap => row-gap * grid-column-gap => column-gap Note that column-gap already exists and is used by css-multicol. The parsing needs to be updated as now the default value is "normal". The old (prefixed) properties names will be kept working as aliases.
  • WebAudio: AudioParam setter is equivalent to setValueAtTime - When setting the value of an AudioParam via the value setter, the value is updated exactly as if setValueAtTime(newValue, context.currentTime). This includes throwing errors that weren't previously thrown and changing the AudioParam timeline
  • WebAudio: Remove dezippering - Historically, Chrome implemented dezippering such that when the value setter of an AudioParam was used, the value was not changed instantaneously. Instead, an exponential approach equivalent to setTargetValueAtTime was done. The actual time constant used was never specified and depended on the AudioParam. With the spec change in here, (Sep 2015), all dezippering was removed from the spec. Dezippering will be removed from Chrome.
  • WebSockets over HTTP/2 - Implement support for WebSockets over HTTP/2 in Chromium according to specification, see most recent draft here. This would only be used for secure WebSockets requests, and only if there is already an HTTP/2 connection where the server has already advertised support for WebSockets over HTTP/2 via the HTTP/2 SETTINGS parameter defined in the specification.
  • [WebAudio] AudioWorklet - The AudioWorklet object allows developers to supply JavaScript to process audio on the rendering thread, supporting custom AudioNodes. This processing mechanism ensures the synchronous execution of the script code with other built-in AudioNodes in the audio graph. This new feature is designed to replace ScriptProcessorNode. ScriptProcessorNode will be deprecated once AudioWorklet is shipped.
  • inputmode - The inputmode content attribute is an enumerated attribute that specifies what kind of input mechanism would be most helpful for users entering content into the form control or content editable.
  • window.focus() exits HTML5 fullscreen - If a page in fullscreen mode opens a popup and calls window.focus(), that page will exit full screen. This will not occur if the popup receives focus some other way.

Bug fixes

Critical bug fixes:

  • CVE-2018-6085: Use after free in Disk Cache. Reported by Ned Williamson on 2018-03-28
  • CVE-2018-6086: Use after free in Disk Cache. Reported by Ned Williamson on 2018-03-30

High-threat bug fixes

  • CVE-2018-6087: Use after free in WebAssembly. Reported by Anonymous on 2018-02-20
  • CVE-2018-6088: Use after free in PDFium. Reported by Anonymous on 2018-03-15
  • CVE-2018-6089: Same origin policy bypass in Service Worker. Reported by Rob Wu on 2018-02-04
  • CVE-2018-6090: Heap buffer overflow in Skia. Reported by ZhanJia Song on 2018-03-12
  • CVE-2018-6091: Incorrect handling of plug-ins by Service Worker. Reported by Jun Kokatsu (@shhnjk) on 2017-10-05
  • CVE-2018-6092: Integer overflow in WebAssembly. Reported by Natalie Silvanovich of Google Project Zero on 2018-03-08

Medium-threat bug fixes

  • CVE-2018-6093: Same origin bypass in Service Worker. Reported by Jun Kokatsu (@shhnjk) on 2017-11-01
  • CVE-2018-6152: Local file write in DevTools. Reported by Rob Wu on 2018-01-24
  • CVE-2018-6094: Exploit hardening regression in Oilpan. Reported by Chris Rohlf on 2016-08-01
  • CVE-2018-6095: Lack of meaningful user interaction requirement before file upload. Reported by Abdulrahman Alqabandi (@qab) on 2016-08-11
  • CVE-2018-6150: Cross origin information disclosure in Service Workers. Reported by Rob Wu on 2018-02-15
  • CVE-2018-6096: Fullscreen UI spoof. Reported by WenXu Wu of Tencent's Xuanwu Lab on 2017-10-19
  • CVE-2018-6097: Fullscreen UI spoof. Reported by xisigr of Tencent's Xuanwu Lab on 2018-01-26
  • CVE-2018-6151: Bad cast in DevTools. Reported by Rob Wu on 2018-01-25
  • CVE-2018-6098: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-01-03
  • CVE-2018-6099: CORS bypass in ServiceWorker. Reported by Jun Kokatsu (@shhnjk) on 2018-02-03
  • CVE-2018-6100: URL spoof in Omnibox. Reported by Lnyas Zhang on 2018-02-11
  • CVE-2018-6101: Insufficient protection of remote debugging prototol in DevTools . Reported by Rob Wu on 2018-02-19
  • CVE-2018-6102: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-20
  • CVE-2018-6103: UI spoof in Permissions. Reported by Khalil Zhani on 2018-02-24
  • CVE-2018-6104: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-03-08
  • CVE-2018-6105: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-01-18
  • CVE-2018-6106: Incorrect handling of promises in V8. Reported by lokihardt of Google Project Zero on 2018-01-25
  • CVE-2018-6107: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-02
  • CVE-2018-6108: URL spoof in Omnibox. Reported by Khalil Zhani on 2018-02-27

Low-threat bug fixes:

  • CVE-2018-6109: Incorrect handling of files by FileAPI. Reported by Dominik Weber (@DoWeb_) on 2017-04-10
  • CVE-2018-6110: Incorrect handling of plaintext files via file:// . Reported by Wenxiang Qian (aka blastxiang) on 2017-10-24
  • CVE-2018-6111: Heap-use-after-free in DevTools. Reported by Khalil Zhani on 2017-11-02
  • CVE-2018-6112: Incorrect URL handling in DevTools. Reported by Rob Wu on 2017-12-29
  • CVE-2018-6113: URL spoof in Navigation. Reported by Khalil Zhani on 2018-01-25
  • CVE-2018-6114: CSP bypass. Reported by Lnyas Zhang on 2018-02-13
  • CVE-2018-6115: SmartScreen bypass in downloads. Reported by James Feher on 2018-03-07
  • 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
  • CVE-2018-6117: Confusing autofill settings. Reported by Spencer Dailey on 2018-03-15
  • 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

[source]

Have a great time cross-browser testing with Chrome 66 and Browserling!