Chrome 83 Stable Release: New Cross-Domain Policy, Form Controls to Improve the Web Experience

Chrome 83 Stable has released, and here are the most important updates:

Trusted types to help prevent cross-site scripting vulnerabilities

New form elements

New cross-domain policy

Introducing a Web Vitals program

New ways to detect memory leaks

Trusted Types

DOM-based cross-site scripting (DOM XSS) is one of the most common web security vulnerabilities. Trusted types can help prevent such vulnerabilities because they require you to handle data before passing it to potential hazards.

In the case of innerHTML, if a trusted type is enabled, if you try to pass a string, it throws a TypeError because the browser does not know whether it can trust the string.

// Trusted types turned onconst elem = document.getElementById(‘myDiv’);elem.innerHTML = `Hello, world!`;// Will throw a TypeError

Instead, you need to use a security function such as textContent to pass in a trusted type, or to create the element and use appendChild().

// Use a safe functionelem.textContent = ”; // OK// Pass in a trusted typeimport DOMPurify from ‘dompurify’;const str = `Hello, world!`;elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});// Create an elementconst img = document.createElement(‘img’);img.src = ‘xyz.jpg’;elem.appendChild(img);

Update form controls

Chrome and Edge have teamed up to improve the look and functionality of HTML form controls. The following image shows a comparison of old and new versions of some controls in Chrome (old and new left).

Chrome 83 Stable Release: New Cross-Domain Policy, Form Controls to Improve the Web Experience

In addition to the new visual style, Microsoft offers better touch support and accessibility, as well as improved keyboard support.

Chrome 83 Stable Release: New Cross-Domain Policy, Form Controls to Improve the Web Experience

New cross-domain policy

Some Web APIs increase the risk of bypass attacks such as Spectre. To mitigate this risk, Chrome provides an isolated environment based on opt-in, called cross-domain isolation. This is done with two new HTTP headers: Cross-Origin-Embedder-Policy

and Cross-Origin-Opener-Policy. With these headers, web pages can safely use privileged features, including:

Performance.measureMemory ()

JS Self-Profiling API

Cross-domain isolation also prevents modifications to document.domain.

Web vitals

There is a common set of signals, “Core Web Vitals”, that are critical to all web experiences. These core user experience requirements include the loading experience, interactivity, and visual stability of the page content, and together they form the basis of the 2020 Core Web Vitals.

Chrome 83 Stable Release: New Cross-Domain Policy, Form Controls to Improve the Web Experience

The Largest Contentful Paint measures the perceived load speed and marks the points in the page’s loading timeline when the main content of the page may have been loaded.

First Input Delay measures responsiveness and quantifies the user’s experience when they first try to interact with a page.

Cumulative Layout Shift measures visual stability and quantifies unexpected layout shifts of visible page content.

Origin trials

Measuring memory with measureMemory()

performance.measureMemory() is a new API that can be used to measure memory usage of pages and detect memory leaks.

Update the native file system API

The Native File System API has launched a new prototype of the source program in Chrome 83 that supports writeable streams and can save file handles.

async function writeURLToFile(fileHandle, url) {  // Create a FileSystemWritableFileStream to write to.  const writable = await fileHandle.createWritable();  // Make an HTTP request for the contents.  const response = await fetch(url);  // Stream the response into the file.  await response.body.pipeTo(writable);  // pipeTo() closes the destination pipe automatically.}

Writeable streams make it easier to write to files, and you can easily transfer responses from one stream to another.

Saving a file handle to IndexedDB allows the user to store the state or remember which files the user is working on. For example, keep a list of recently edited files, open the last file that the user is using, and so on.

Other

Chrome now supports the Barcode Detection API, which provides the ability to detect and decode barcodes.

The new CSS @supports function provides functional detection for the CSS selector.

The new ARIA comments enable screen readers to access comments, suggestions, and text highlights with semantics similar to those of the slt;mark.com.

The Preferreds-Color-Scheme media query enables authors to choose their own dark themes and have complete control over the experience they build.

JavaScript now supports modules in shared workprograms.

For more information, you can find out: https://developers.google.com/web/updates/2020/05/nic83