微信号:fed-talk

介绍:公众号开通于2016年,内容起于前端而不止于前端.

可爱可恨的 Cookie

2019-01-03 00:04 五溪

Cookie 曾一度用于客户端数据的存储,由于历史原因这是那个年代唯一可以使用的存储手段,通常情况下 Cookie 都是由服务端向用户客户端发送的一小块数据,它会在同一个请求中被携带重新回到服务端,不可否认的是 Cookie 在一定的历史条件下为用户体验增进了极大的可能性,因为:


  • 会话管理(登录一次一段周期内不需要再次登录)

  • 个性化设置(比如皮肤主题)

  • 浏览器行为追踪(用于分析用户行为,精准的为你推荐你想要的)


但是,随着现代浏览器开始支持各种各样的存储方式,Cookie 也会随着历史进程而被淘汰。一个普通的 Cookie 被创建其实很简单,当服务器接收到请求时,可以在响应头里添加一个 Set-Cookie 字段,浏览器在收到响应时会保存这一份 Cookie ,之后对该服务的请求中,浏览器会自动的将此 Cookie 又发送给了服务端,这就完成了一次有意义的 Cookie 过程。

Set-Cookie: = <cookie名>=<cookie值>



Cookie 虽然看起来仅仅是一句字符串,麻雀虽小却五脏俱全,它有一系列的字段来描述,比如:过期时间路径适应站点 等等属性,这些属性完整的构成了一条有效的 Cookie


会话期 Cookie 是一个最简单的 Cookie ,它会随着浏览器关闭而被自动删除。与会话期 Cookie 相对应的是一种可以被长久持有的 Cookie ,这种被长久持有的 Cookie 需要被指定 ExpiresMax-Age


由于 HttpOnly 标记的存在,前端的 document.cookie 只能处理有限的 Cookie,它可以创建一个 Cookie 也可以访问无 HttpOnly 标记的 Cookie,这种有限的处理方式可以有效的避免 XSS 攻击。

document.cookie

关于 Cookie 的 Domain 和 Path 则是定义了关于 Cookie 可以被哪些 Domain 或 Path 访问,举个例子如果该 Cookie 的 Domain 被设置为 icepy.me ,那么该 Cookie 也被包含在子域名中,如 developer.icepy.me


比较遗憾的是前端的 document.cookie 这个简陋的 API 对于处理 Cookie 是极度不友好的,因此,多数情况下我们都会选择一个第三方库来完成 Cookie 的操作。如果你已经阅读到了这里,其实就能很明白在前端中操作 Cookie 的原理,如果我们要实现一个很简单的创建 Cookie,那么就要进行一些简单的处理,如:

value = encodeURIComponent(String(value));
key = encodeURIComponent(String(key));

let stringifiedAttributes = '';

for (let attributeName in attributes){  if (!attributes[attributeName]){    continue;  }  stringifiedAttributes += '; ' + attributeName;  if (attributes[attributeName] === true){    continue;  }  stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
}

return document.cookie = key + '=' + value + stringifiedAttributes;

众所周知的原因,目前互联网上被追踪的技术主要还在使用 Cookie ,这也是今天我想讲一讲的主题,关于追踪和隐私的事情,抛开 Web Storage API 不谈(因为这种情况下可以被理解为一种僵尸Cookie),多数情况下,每一个 Cookie 都会有一个与之关联的 Domain,如果 Cookie 的 Domain 与当前页面的域相同,我们称之为第一方 Cookie,如果 Cookie 的 Domain 与当前页面的域不同,那么我们将它称之为第三方 Cookie。多数情况下,我们在浏览网页时看见的广告,都可以归纳为第三方 Cookie,用来追踪一个潜在的广告客户。


如果是稍微有良心一些的服务提供者,可能会遵循 DNT 原则,也就是所谓的禁止追踪 Do-Not-Track,前端可以通过navigator.doNotTrack来访问用户的浏览器是否开启了 DNT,但这并不是一个强制性的技术实现,而是完全凭借服务提供商的业界良心是否遵循这一原则。


如果你将访问的页面使用的是 Web Storage API 来完成的追踪,那么这很遗憾,虽然大多数的浏览器默认就启动了屏蔽了第三方Cookie ,但是它很难被绕过,虽然 Firefox 43 开始支持,如果用户禁止了第三方 Cookie ,同样的第三方 iframes 对 Web Storage 的访问将被禁止,这种情况依然需要信任服务提供访问。


想想,这其实很糟糕;


隐私 真是一个可爱可恨的事情,除非有人能专门去做这样的事情。正好 https://mijisou.com 秘迹搜索是一个真正可以保护你个人隐私的网络搜索服务,它不会记录任何你的查询关键字,也从不存储你的个人信息,不传播你的任何信息,真正做到搜索不留痕,摆脱你不想要的定向广告的骚扰和可能的隐私泄露,它完美的符合了我的预期。


我们可以通过 Storage Inspector 手动的探索一下,如它所言,这确实是没有任何记录和追踪的搜索服务。

如果你已经被广告骚扰烦了,不妨来试一试;


 
象尘说 更多文章 读《血色浪漫》有感 《浅谈 TypeScript》 《Chrome Extension 入门指南》 stdin and stdout which it&#39;s ? Chat推荐:成长-浅谈从前端小工到工程师的三年转换
猜您喜欢 我泡在GitHub上的177天 前端周报:Udacity弃用RN,微信小程序将支持npm、分包和可视化编程 Oracle数据库恢复之前车之鉴 淘宝技术部世界杯算法大赛赛况 iOS app多语言文件开源编辑器Localization Editor