Chrome 91发布 - 新的登录凭证共享方案、支持剪贴板读取文件

ConardLi
1,777 阅读4分钟

谷歌已经在 2021 年 5 月 25 日发布了 Chrome 91 正式版。以下是作为一名 Web 开发者需要了解的一些更新：

  • 安全相关
    • 支持不同域名共享登录凭证
    • Linux 上支持基于 HTTPS 的 DNS
    • HTTP 端口 10080 被默认阻止，以减轻 NAT Slipstream 2.0 攻击
    • 如果权限策略启用，如果通过权限策略启用，则 Android 上支持跨域 iframe 的 WebOTP API。支持 JSON 模块
    • WebTransport 协议框架支持 “使受 Web 安全模型约束的客户端能够使用安全的多路传输与远程服务器进行通信”
  • 新特性支持
    • 支持从剪贴板读取文件
    • 文件访问 API 支持设置建议文件名、起始目录
    • 默认情况下启用 GravitySensor API
    • WebAssembly SIMD 完成试用版本，默认开启

共享登录凭证

为了用户的隐私安全，三方 Cookie 正慢慢被浏览器弃用，但是我们程序中一些非常重要的功能仍然需要借助 三方Cookie ， 例如单点登录。

如果你的站点有多个子网站，然后你希望用户只登录其中一个网站就可以默认登录所有网站，在以前我们会借助一个第三方登录域名的 Cookie 来存储所有网站的登录态，本次 Chrome 新推出的登录凭证共享方案，应该可以让我们在这个场景下脱离 三方Cookie了。

在这个方案中，你可以通过创建一个 Digital Asset Links (DALs) 文件来将你的不同域名进行关联，用户的登录信息可以在任何关联的网站中进行共享。例如，你想创建 www.conardli.com 和 www.conardli.dev 两个域名的关联，可以创建一个 assetlinks.json：

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.conardli.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.conardli.dev"
  }
 }]
  • relation 字段是一个字符串数组，描述了站点之间的关系，想要让站点共享登录凭证，可以指定字符串 delegate_permission/common.get_login_creds。
  • target 字段是一个对象，用于指定声明所适用的资产
    • namespace: 必须 web 用于网站

Digital Asset Links JSON 文件需要托管在登录域的以下位置：

https://domain[:optional_port]/.well-known/assetlinks.json

例如在上面的例子中，JSON 文件应托同时被托管在下面的位置：

https://www.conardli.com/.well-known/assetlinks.json
https://www.conardli.dev/.well-known/assetlinks.json

如果你的网站有 robots.txt 文件，则必须允许 Googlebot 代理检索 /.well-known/assetlinks.json。

使用上面的方案需要你的网站支持下面的条件：

  • 使用 Chrome 91 或更高版本。
  • 启用选项 chrome://flags#filling-across-affiliated-websites
  • 已在 chrome://settings/passwords 中打开 Offer to save passwords 选项
  • 确保你的网站的登录域可通过 HTTPS 访问。

了解更多：developer.chrome.com/blog/site-a…

支持基于剪贴板的文件上传

还有另一个很酷的新 API，现在你可以在 Chrome 91 中实现复制粘贴上传文件了。Chrome 现在支持在 paste 事件中直接读取到文件了。

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

当然，Safari 在 2018 年就支持了这个功能...

文件访问 API 支持设置建议文件名、起始目录

在用户授予文件交互权限后，我们的网站就可以与像一个桌面客户端一样和用户本地文件进行交互了，从而给用户更自然的用户体验。

从 Chrome 91 开始，你现在可以建议要与之交互的文件或目录的名称和位置。可以设置给 showSaveFilePicker 函数增加一个 suggestedName 属性：

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

默认的起始目录也是类似的。例如，文本编辑器可能想要启动文件 documents 夹中的文件保存或文件打开对话框。而图像编辑器可能想打开 pictures 文件夹。你可以通过传递 startIn 属性来建议默认的起始目录。

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

了解更多：web.dev/file-system…

基于媒体查询定制图标

你可以在 link rel="icon" 的元素上使用 media 属性，这意味着你可以基于媒体查询定义不同的图标。例如，用于黑暗和明亮模式的不同图标。

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

WebAssembly SIMD 正式支持

WebAssembly SIMD 原始版本试用版在 Chrome 84 版本开始进行实验，在 Chrome 91 版本正式启用支持。

SIMD(Single Instruction Multiple Data)即单指令流多数据流，是一种采用一个控制器来控制多个处理器，同时对一组数据中的每一个分别执行相同的操作从而实现空间上的并行性的技术。简单来说就是一个指令能够同时处理多个数据。

WebAssembly SIMD 提议的最终目标是将向量运算引入 WebAssembly 规范中，这可以大大加速音频/视频编解码、图像处理应用程序、密码应用程序等高级计算应用程序。虽然还在实验阶段，现在已经被开源程序广泛使用了（如 Halide、OpenCV.js、XNNPACK）都支持 WebAssembly SIMD 。

抖音前端急缺人才，如果你有意向加入我们，或有其他事情想和我交流，欢迎加我的个人微信 ConardLi 。

avatar
文章
阅读
粉丝