The awesome Chrome browser (13): Chrome 100 supports multi-screen apps!

What new features will Chrome 100, officially released on March 29, 2022, bring?

TL;TR

Deprecate the document.domain setter is a breaking change with great impact, please be sure to check the risks. Chrome 106, scheduled to be released in September this year, will no longer support bypassing the same origin policy by modifying document.domain, and Chrome 100 will start printing warning messages in the console's Issues.

The Multi-Screen Window Placement API is an interesting feature, and web applications support multiple screens too! It can be used for scenarios such as document presentations. Unfortunately, Firefox and Safari are not currently interested, only Chrome supports it.

The Array Grouping proposal is a very simple but practical feature, why don't we just add all the common tool functions of Lodash to ECMAScript?

Reduce User Agent string information is about to end the trial and start to be officially released. This matter has a great impact on various monitoring scripts, and you need to pay attention to the risks.

Detailed interpretation

Multi-Screen Window Placement API

Chrome 100 officially released the Multi-Screen Window Placement API , which can be used to query the information of multiple screens connected to the device and open the page content in the specified screen. The core API is as follows:

• Added the window.getScreenDetails() method to obtain the information of the monitor screen (including the external monitor); in contrast, window.screen can only obtain the screen information of the monitor where the current browser page is located;
• Support using window.open(), window.moveTo() and requestFullscreen() to open the page content on the specified screen;

Simply put, Chrome supports multi-screen applications.

A picture is worth a thousand words, when I use Keynote to play PPT, it will show the PPT content on the external monitor, and the next page and the current time on the MacBook monitor, so that the speaker can grasp the rhythm of the speech and advance in advance Prepare for the next page (please ignore my PTT level...):

Then, for document applications such as Google Docs, Yuque, and Graphite Documents, you can use the Multi-Screen Window Placement API to achieve an effect similar to Keynote for demonstration scenarios.

In fact, in applications such as finance, design tools, and games, the Multi-Screen Window Placement interface can be used to display different content on different screens to improve user experience and work efficiency.

Teams such as Twitter, Discourse, Google Slides, itrix, etc. expressed interest in the Multi-Screen Window Placement API, but no actual cases have been seen so far, and the Demo provided by the Chrome team is too simple.

The Multi-Screen Window Placement proposal is interesting, but it's not a formal standard, nor is it supported by Firefox or Safari, which is embarrassing. . .

Array Grouping proposal

Chrome 100 has opened the developer trial of the ECMAScript proposal Array Grouping proposal , which is currently in Stage 3, adding groupBy and groupByToMap methods for arrays:

 const array = [1, 2, 3, 4, 5];

// 返回值：{ odd: [1, 3, 5], even: [2, 4] }
array.groupBy((num) => {
  return num % 2 === 0 ? "even" : "odd";
});

const odd = { odd: true };
const even = { even: true };

// 返回值:  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
array.groupByToMap((num, index, array) => {
  return num % 2 === 0 ? even : odd;
});

According to the Web Almanac 2021 report, the usage rate of Lodash is second only to jQuery and Modernizr, and higher than React. It can be seen that tool functions such as goupBy are still very commonly used:

If one day the commonly used functions of Lodash become ECMAScript proposals, we should not be surprised. . .

Reduce User Agent string information

Chrome 95 began to trial the Reduce User Agent string information feature. The trial period will end in Chrome 100, and the specific end date is April 19, 2022. From Chrome 101, the Reduce User Agent string information feature will be officially released gradually.

Reduce User Agent string information aims to simplify User-Agent strings, reduce the amount of information, ease the use of User-Agent strings as user fingerprints, and better protect user privacy. At the same time, it guides developers to use User-Agent Client Hints that protect user privacy to obtain browser information and reduce everyone's dependence on User-Agent strings.

Chrome plans to complete the simplification of User Agent strings in Chrome 113, but from the final result, the changes in User-Agent are actually very small.

Taking Chrome Windows users as an example, the old User-Agent string looked like this:

Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56 Safari/537.36

The final User-Agent string after simplification is as follows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Safari/537.36

Windows NT 6.3 became Windows NT 10.0, Chrome/93.0.1234.56 became Chrome/93.0.0.0, and that's it. The version number of Windows is fixed at 10.0, and it will not change even if the user updates the operating system; the version number of Chrome only retains the major version number, omitting the minor version number. In other words, we can still get the name of the browser and its major version number, the name of the operating system, and the distinction between desktop and mobile through the User-Agent string. However, we can't get the minor version number of the browser and the version of the operating system through the User-Agent string. In addition, for the Android terminal, the brand and model of the mobile phone are no longer available.

The browser information provided by the User-Agent string is more ambiguous, which is beneficial to protect user privacy.

If developers need to get more accurate browser information, they need to use User-Agent Client Hints , which is available in Chrome 89. The HTTP request Header fields corresponding to User-Agent Client Hints are as follows:

request header	Value example
Sec-CH-UA	"Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile	?1
Sec-CH-UA-Full-Version	"84.0.4143.2"
Sec-CH-UA-Platform	"Android"
Sec-CH-UA-Platform-Version	"10"
Sec-CH-UA-Arch	"arm"
Sec-CH-UA-Model	"Pixel 3"
Sec-CH-UA-Bitness	"64"

By default, the browser only sends Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform, which is consistent with the amount of information provided by User-Agent. If the server needs to obtain other User-Agent Client Hints fields If so, you need to explicitly specify the required fields. The advantage of this is that the browser provides less user information by default, and the browser and Web applications can theoretically record and audit the amount of information requested by the server, which can more actively protect user privacy.

Web-side monitoring services, such as ARMS , Fundebug , Sentry , etc., if you need to obtain more accurate client information, you need to use User-Agent Client Hints. Of course, it is recommended to use User-Agent Client Hints to obtain user authorization. Plug-ins and applications should not help users make decisions, otherwise this feature has no practical significance for user privacy protection.

Deprecate the document.domain setter

Chrome 106, which is scheduled to be released in September this year, will no longer support the modification of document.domain to bypass the restrictions of the same origin policy, and Chrome 100 will start printing warning messages in the console's Issues.

For example, when visiting https://www.google.com , its original document.domain value is www.google.com. After I change it to google.com, the Deprecated Feature Used information will appear in Issues:

Relaxing the same-origin policy by setting "document.domain" is deprecated, and will be disabled by default in M106, around September 2022. To continue using this feature, please opt-out of origin-keyed agent clusters by sending an Origin- Agent-Cluster: ?0 header along with the HTTP response for the document and frames. See https://developer.chrome.com/blog/immutable-document-domain/ for more details.

Curious children may have to ask, document.domain should not be supported to modify it, serious people who can modify this!

It's like this, when we embed an iframe page from https://video.example.com in https://parent.example.com , the main domain of both is example.com, but the subdomain is different, so It is not the same-origin. If the document.domain of both is set to example.com, they become the same-origin. Therefore, modifying document.domain is to bypass the restrictions of the same-origin policy, so that the main page and the iframe page can read and modify the DOM of each other, such as adding the autoplay attribute to the embedded video.

The same origin policy is one of the most basic security foundations of web applications. Can it be easily bypassed with just one line of code?

This is obviously a hack, which violates the original intention of the same-origin policy and has security risks. For example, for web hosting services like GitHub Pages, each user has different subdomains and the same main domain name. Modifying document.domain can bypass the restrictions of the same-origin policy.

Therefore, Chrome decided to plug this security hole, modifying document.domain will not be able to bypass the restrictions of the same-origin policy, and Firefox also expressed its support.

If you still need to communicate between https://parent.example.com and https://video.example.com , you can use postMessage() or the Channel Messaging API .

If you still need to bypass the restrictions of the same-origin policy by modifying document.domain, or if it is too late to modify, you can add the following Header when returning the HTML file:

 Origin-Agent-Cluster: ?0

Chrome is committed to making the web more secure. For this goal, it keeps tossing web developers all over the world. This approach makes people have to be convinced. Whoever tells it to have the final say, everyone should hurry up and check whether your code is in it. Modify document.domain!

According to data from Chrome Platform Status , about 0.5% of page loads bypass the same-origin policy by modifying document.domain. This ratio is very low, but considering Chrome's market share, the absolute number is also quite large, which affects There are not many users and developers:

Summarize

In 2008, Chrome, which had been secretly developed for 2 years, was officially released. After 14 years, the version number of Chrome reached 100. Chrome's UI design is basically unchanged, but its kernel has been completely new, and Web technology has benefited from Chrome's promotion and has made great progress.

I believe that Chrome 100 is just the starting point. With the application of various new Web technologies such as WebAssembly, WebGPU, and HTTP/3, the future Web will be even more exciting!

Here, might as well imitate Atwood's Law :

Any application that can be written in the Web, will eventually be written in the Web.

We have seen heavyweight applications such as AutoCAD, Google Earth, Phontoshop, and Figama appear in the Web, and the performance bottleneck will be gradually broken through. In the future, there will be more and more applications such as video editing, games, and VR/VA.

I haven't updated the Chrome blog for almost 2 months. In fact, the blogs of Chrome 98 and Chrome 99 are almost the same, but due to the Spring Festival holiday and the epidemic, they were not released in time. Keeping the Chrome blog up to date is hard work, but I'm not going to give up, keep going!

I have little knowledge and knowledge. There are bound to be mistakes in what I wrote. Comments and corrections are welcome. Interested students can communicate via WeChat: KiwenLau .

Welcome to the official account of Hanyan Talk , follow the blog series "The Great Chrome Browser" , and witness the sea of stars on the front end with me!

References

• The awesome Chrome browser (7): Chrome 95 finally supports WebAssembly exception handling!
• The Amazing Chrome Browser (10): What Chrome Changes to Watch in 2021?
• Chrome 100 Beta: Reduced User-Agent Strings, Multi-Screen Window Placement, and More
• Managing several displays with the Multi-Screen Window Placement API
• User-Agent Reduction Origin Trial and Dates
• Chrome will disable modifying document.domain to relax the same-origin policy