| 实用

chrome 80 的奇技淫巧

Module workers

module workers 允许在创建一个新的 worker 对象的时候带上 { type: 'module' } 的属性

如：

1
const worker = new Worker('worker.js', { type: 'module' });

这样写的意义在于什么地方呢？

  • 带上了 module 属性之后，浏览器会按照 <script type="module"></script> 的方式去加载和执行这个 worker 文件

  • 因为使用了 js module 的方式，所以也可以使用动态导入和懒加载代码，就不会阻塞 worker 的执行

  • 深入了解 worker 传送门

Optional chaining

在我们日常从对象中取值的时候，会遇到链式比较长的操作，一旦对象里没有链式中的属性或者有值为 null 的我们都会收到抛出的异常，这往往不是我们想要的。

例如：

1
const nameLen = obj.user.name.length;

如果按照上述的写法，一旦不存在 name 属性，或者 name 为 null 之类的其他类型，浏览器都会直接抛出异常。所以，通常我们会做多个判断去做兜底的处理。

例如：

1
2
3
4
let nameLen;
if (obj && obj.user && obj.user.name) {
  nameLen = obj.user.name;
}

上述的判断写的非常的冗长，如果每次遇到解析对象里的属性的时候都这样写兜底，代码会显得非常复杂且可读性不高，于是出现了可选链接的新特性

例如：

1
const nameLen = obj?.user?.name?.length;

上述的式子，在可读性和兜底上的表现都更加优异。

TL;DR: Chrome 80 (released in Feb, 2020) 將針對 cookie 的發送機制有一些新的調整，將影響現有網站上仰賴第三方 cookie 實作的功能與使用者體驗。

cookie 在实现状态追踪、广告投放、埋点、个性化界面展示等都有极大的作用。所以在很多的 web 网站上都有很多方面关于 cookie 的应用。而谷歌近日声明，将渐进移除对第三方 cookie 的支援外，也将同时持续发展 Privacy Sandbox 等提升隐私的开放标准以及研发能够侦测并扫除未经使用者同意的数位指纹系统。

谈到 cookie 不免会说起 SameSite（同站），同站的定义是顶级域名加一级域名相同。

如： a.baidu.com 和 b.baidu.com 就会被认为是同一个网站，而 a.github.io 和 b.github.io 就不是同一个网站。因为 github.io 是作为一个顶级域存在的。

而 cookie 的 SameSite 的属性有三个值：

值 含义
Strict 最严格，完全禁止第三方 cookie 跨站点时发送 cookie
Lax 规则稍微放宽，大多数情况不发送 cookie，但是导航到目标网站的 Get 请求除外
None 关闭 SameSite 熟悉，前提是设置 Secure 属性，否则无效
  • 关于 Lax 的导航到目标网址的 Get 请求，包括三种情况：链接、预加载请求和 Get 表单：
请求类型 示例 正常情况 Lax
链接 <a href="..." /> 发送 cookie 发送 cookie
预加载 <link rel="prerender" href="..."/> 发送 cookie 发送 cookie
GET 表单 <form method="GET" action="..."> 发送 cookie 发送 cookie
POST 表单 <form method="POST" action="..."> 发送 cookie 不发送 cookie
iframe <iframe src="..."></iframe> 发送 cookie 不发送 cookie
AJAX $.get("...") 发送 cookie 不发送 cookie
Image <img src="..."> 发送 cookie 不发送 cookie

chrome 80 已经将默认的 SameSite 的值设置为 Lax

  • 为什么这样修改呢？ 减少 CSRF 和 xss 攻击
  • 如果一定要跨站使用 cookie 如何操作呢？ 需要将 SameSite: none 且带上 Secure 属性
ESC