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;CHILD

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:

• A new window.getScreenDetails()method is added to obtain the information of the monitor screen (including the external monitor); in contrast, window.screen can only obtain the information of the monitor screen 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;
});
复制代码

根据Web Almanac 2021报告，Lodash的使用率仅次于jQuery和Modernizr，高于React，由此可见类似于goupBy等工具函数还是非常常用的：

如果哪天Lodash的常用函数都变成了ECMAScript的提案，大家也不必意外。。。

Reduce User Agent string information

Chrome 95开始试用Reduce User Agent string information特性，试用期将于Chrome 100结束，具体的结束日期为2022年4月19日。Chrome 101开始，将逐步正式发布Reduce User Agent string information特性。

Reduce User Agent string information旨在简化User-Agent字符串，减少其信息量，缓解利用User-Agent字符串作为用户指纹，更好地保护用户隐私。同时，引导开发者使用更加保护用户隐私的User-Agent Client Hints来获取浏览器信息，降低大家对User-Agent字符串的依赖。

Chrome计划到Chrome 113彻底完成User Agent字符串的简化，不过从最终的结果来看，其实User-Agent的变化其实非常小。

以Chrome Windows用户为例，旧的User-Agent字符串是这样的：

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

简化之后最终的User-Agent字符串是这样的：

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变成了Windows NT 10.0，Chrome/93.0.1234.56变成了Chrome/93.0.0.0，仅此而已。Windows的版本号被固定在了10.0，即使用户更新了操作系统，也不再变化了；Chrome的版本号仅保留大版本号，省略了小版本号。换句话说，我们依然可以通过User-Agent字符串获取浏览器的名称及其大版本号、操作系统的名称、区分桌面端和移动端。但是，我们无法通过User-Agent字符串获取浏览器的小版本号以及操作系统的版本了。另外，对于安卓端，手机的品牌及型号也不再提供。

User-Agent字符串所能提供的浏览器信息更加模糊了，这样有利于保护用户隐私。

如果开发者需要获取更加精确的浏览器信息，则需要使用User-Agent Client Hints，该特性在Chrome 89已上线。User-Agent Client Hints对应的HTTP请求Header字段如下表：

请求Header	取值示例
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"

浏览器默认仅发送Sec-CH-UA、Sec-CH-UA-Mobile、Sec-CH-UA-Platform，与User-Agent所提供的信息量一致，如果服务端需要获取其他User-Agent Client Hints字段的话，则需要明确指定所需要的字段。这样做的好处在于，浏览器默认提供的用户信息更少了，同时浏览器及Web应用理论上能够记录、审计服务端所请求的信息量，能够更加主动地保护用户隐私。

Web端的监控服务，例如ARMS、Fundebug、Sentry等，若需要获取更加准确的客户端信息，则需要使用User-Agent Client Hints了。当然，建议使用User-Agent Client Hints需要获得用户的授权，插件以及应用端不应该帮用户做决定，否则这个特性对用户隐私的保护就没有实际意义了。

Deprecate the document.domain setter

计划于今年9月份发布的Chrome 106将不再支持通过修改document.domain来绕开同源策略（same origin policy）的限制，Chrome 100开始在控制台的Issues中打印warning信息。

例如，访问www.google.com时，其原本的document.domain取值为www.google.com，我将其修改为google.com之后，Issues中将会出现Deprecated Feature Used信息：

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 developer.chrome.com/blog/immuta… for more details.

好奇的小朋友可能就要问了，document.domain看着就不应该支持修改，正经人谁改这个啊！

是这样的，当我们在parent.example.com中嵌入来自https://video.exam…

开同源策略（same origin policy）是Web应用最基本的安全基础之一，这么1行代码就轻易地绕开了？

这显然是一种hack的做法，违背了同源策略的初衷，存在安全风险，比如对于类似GitHub Pages这种网页托管服务来说，各个用户的子域名不同，主域名相同，这时理论上通过修改document.domain是可以绕开同源策略的限制的。

所以，Chrome决定堵住这个安全漏洞，修改document.domain将不能绕开同源策略的限制，Firefox也表示了支持。

如果你依然需要进行parent.example.com与video.example.com之间的通信，则可以使用postMessage()或者Channel Messaging API。

如果你依然需要通过修改document.domain绕开同源策略的限制，或者来不及进行改造的话，可以返回HTML文件时，增加以下Header：

Origin-Agent-Cluster: ?0
复制代码

Chrome致力于让Web变得更加安全，为了这个目标，不停地折腾全世界的Web开发者，这种做法让人不得不服，谁叫它说了算，大家还是赶紧检查一下你的代码里面是否修改document.domain了吧！

根据Chrome Platform Status的数据，大概有0.5%的页面加载通过修改document.domain来绕开同源策略的限制，这个比例很低，但是考虑到Chrome的市场占有率，其绝对数量也是相当大，影响的用户和开发者并不少：

总结

2008年，秘密开发2年的Chrome正式发布，14年之后，Chrome的版本号达到了100。Chrome的UI设计基本上没什么变化，不过它的内核已经焕然一新了，Web技术获益于Chrome的推动得到了长足的进步。

相信Chrome 100只是起点，随着WebAssembly、WebGPU、HTTP/3等各种Web新技术得到应用，未来的Web会更加精彩！

这里，不妨模仿一下Atwood's Law：

Any application that can be written in Web, will eventually be written in 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