by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7856
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、前言

Do Not Track API顾名思意就是有一个接口，可以设置不对用户行为进行跟踪。我们或许第一反应是：是不是只要做了相关设置，什么Cookie之类的数据就不记录了呢？

不是的，Do Not Track API不是浏览器的隐私模式，虽然也是和用户隐私有密切关系，但还是有明显区别的，听我娓娓道来。

二、Do Not Track的历史

说到Do not track（简称DNT），最早对其进行支持的是IE9浏览器，在2010年的时候，IE居然占了先机，这有些出乎意料，然后2011年Firefox火狐浏览器支持，2012年Chrome浏览器也加入支持。可见，在很早的时候，浏览器基本就已经支持了Do not track设置。

会不会很奇怪？这个API出现足足有6年多了，似乎就没见人提及过，估计90%的前端就不知道浏览器还有这个东西。为什么呢？我们继续看。

三、浏览器开启“不追踪”

默认情况下，浏览器是不开启Do not track，也就是没有禁止不跟踪，需要我们自己手动开启。例如在Chrome浏览器下，我们可以设置-高级，然后“随浏览流量一起发送‘不跟踪’请求”，如下截图示意：

点击开关按钮，我们会看到下面的提示（随着浏览器变化，提示文案可能会有调整）：

文字版如下：

如果您启用了“不跟踪”，即意味着您的浏览流量中将会包含一个请求。所造成的任何影响均取决于网站是否回应该请求以及如何解读该请求。例如：某些网站在收到该请求后，可能会向您展示广告（这些广告并不是根据您访问过的其他网站展示的）。许多网站仍会出于一些目的收集并使用您的浏览数据，例如，为了提高安全性，为了提供相关内容、服务、广告和推荐内容，以及为了生成报告统计信息。

是不是看不懂说的是什么？我用中文再次翻译下就是：

如果你启用了“不跟踪”，则向服务器发送的请求我们都会带一个“Do Not Track”的请求头，至于会对你浏览页面有什么影响，要看这个网站对这个请求怎么处理。有些网站比较重视用户的隐私，发的广告就是随机的，不会出现在淘宝查了一下丧葬用品，然后满屏棺材广告的情况（典型基于用户隐私投放的广告）。当然，有些网站还是会出于一些冠冕堂皇的理由收集你的浏览数据，什么理由呢，比方说为了提供更好服务，为了你账户更安全等。

如果我们说得再直白一点就是：

尊敬的用户啊，如果你启用了“不跟踪”，我们浏览器呢，会仁至义尽，给网站服务器、客户端都发送用户不希望被跟踪的信息。至于你访问的这个网站是否尊重你的设置，我们就无能为力了！

至此，我们可以明白，为什么6年多了，Do Not Track无人问津。因为这玩意是否有效果完全就靠互联网公司是否自觉！

考虑到在中国，那更是变本加厉，啥用户隐私啊，且先不说绝大多数网站的管理者，产品，甚至开发不知道浏览器有“不跟踪”，就算知道有这么个东西，且用户也会去设置，大家也一定会选择无视。中国的互联网对隐私那真是一点都不上心，前有“李彦宏称中国用户愿用隐私换便利”，后有“美团点评会显示你的好友在哪儿里点过餐，住过什么酒店”，什么“Do Not Track”，根本就是聋子的耳朵——摆设，在中国，有和没有有区别吗？没有用，不在意，自然就无人关心。

不过，从近些年诸多事件网民的言论来看，隐私这件事情已经越来越关注，一定会在哪天摆在台面上成为很重要的议题进行发酵的！因此，如果网站能在隐私这件事情上做得能让用户明显感觉到尊重，则这个网站的影响力，公司的口碑说不定会爆炸式增长。网上不是有句话吗？不是我厉害，同行衬托的好。

四、前端开发可以做些什么

浏览器在前端提供了Do Not Track API，可以让前端开发人员知道用户是否开启了Do Not Track。

这个HTML5 API就是navigator.doNotTrack，IE9和IE10还需要私有前缀navigator.msDoNotTrack，然后IE11+不知出于什么考虑，使用window.doNotTrack代替了navigator.doNotTrack。

除了API名称细节差异，对于doNotTrack属性的返回值也存在差异，具体参见下表：

也就是，所有浏览器如果用户开启了“不追踪”，则API返回值是'1'；如果没有开启，则IE9，IE10返回'0'，IE11+和Chrome返回null，Firefox浏览器返回'unspecified'。

因此，我们可以逻辑合并，这样获知用户是否这是了“不跟踪”：

var isDoNotTrack = (navigator.msDoNotTrack || window.doNotTrack || navigator.doNotTrack) == '1';
// 如果设置“不跟踪”，isDoNotTrack为true

接下来就可以付诸实际应用了。

比方说，很有产品搜索会有历史搜索，如果用户选择了“隐私不跟踪”，则原来现实历史搜索列表的地方可以这么提示：

“由于您选择了隐私跟踪保护，您的搜索历史我们不会记录！”

例如新浪微博的搜索历史就会长下面这样：

多好！一看就是尊重用户选择，注重隐私的好公司，好产品！

在座的产品经理千万不要自以为是地认为：搜索历史功能很好啊，很方便啊，展示出来是为你好啊！也不要说这里有清除按钮啊！

请尊重用户的选择，你自以为是的感受不能代表用户真正的心声。就好比小时候父母自以为是地为你好，很多时候很多的是负担！

评论中harttle补充了另外一些信息

* DNT 也会发 HTTP 头，服务端也可以拿到。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT
* DNT 在跨域情况下会产生额外问题，使得Mobile Safari跨域问题尤为麻烦。重定向时会把 Simple Request 变成非 Simple Request 导致一次 Preflight

五、火狐浏览器的跟踪保护

最后，花点篇幅说说火狐浏览器。

1. 火狐浏览器配置项更丰富

见下图：

相比，多了个“隐私窗口”选项，如果选中该项，则默认正常窗口，不禁止追踪，navigator.doNotTrack值是'unspecified'，但如果下面的单选组选中了“始终”，则会无视是否是隐私窗口，navigator.doNotTrack值是'1'。

2. 火狐浏览器自带追踪拦截

Chrome浏览器的“不追踪”也就是给网站发“请勿追踪”的信号，然后就是静静地围观。但是Firefox浏览器却显得正义十足，一旦开启“追踪保护”，则其会自动启动一个第三方提供的“跟踪保护功能”，会拦截一些追踪行为。我测试了下，应该Google统计会被拦截掉，还有其他一些知名的追踪工具脚本也会被拦截。

当然，我们也可以在针对某具体网址进行追踪恢复，类似白名单，在地址栏左侧，有个盾牌一样的标志：

点击，然后点击禁用按钮即可！

六、结语

隐私本质上也是用户体验的一部分，作为前端这个与用户紧密打交道的群体，更应对其保持关注。用不用倒无所谓，但至少知道有这么个东西，至少有这方面关注的意识，那也很不错了。

人人对这块都加以关注的话，整个大环境想必也会越来越好。

打算下周例会给同事们讲讲这个东西，我觉得还是很有必要的，这种不需要动脑子就能知道的知识最适合分享了！

感谢阅读，欢迎交流！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=7856

（本篇完）