chaihongjun.me

如何正确的删除二级域名的cookie

早上看到掘金一篇译文,关于前端优化的内容,然后使用了它介绍的一个工具(https://tools.pingdom.com/)去测试了运行的网站。

如何正确的删除二级域名的cookie

结果让人有点悲伤,加载时间需要十多秒,考虑到服务器在深圳,检测点在美国也就释然了。然而,头两个F还是让人不舒服.:

Parallelize downloads across hostnames

 中午的意思就是并行下载到主机,这里都是二级域名下面的资源,这个没办法实现了。

Serve static content from a cookieless domain

静态资源放到不带cookie的域下面。

这个前面已经提到了静态资源在二级域名下面。而百度统计等(这里实际就是百度统计)第三方的cookie都是全域名覆盖的,比较讨厌。所以,希望在这块下下功夫。

首先想到的是使用前端JS来控制百度的cookie,网上有一段针对cnzz的代码:

QQ截图如何正确的删除二级域名的cookie

 

function clearCnzzCookies() {
    if (document.cookie.indexOf('cnzz') > -1) {
        var cookies = document.cookie.split(';')
        for (var i = 0; i < cookies.length; i++) {
            if (cookies[i].indexOf('cnzz') > -1) {
                var cookieName = cookies[i].split('=')[0];
                document.cookie = cookieName + "=deleted; expires=" + new Date(0).toUTCString();
                console.log(cookieName + "removed");
            }
        }
    }
}

其实这里对比着改成针对百度的就可以了。业务网站的百度统计cookie:

如何正确的删除二级域名的cookie

最后一个是疑似百度的,不管这么多了,直接干掉:

function deleteCookies(deleteCookie) {
    if (document.cookie.indexOf('deleteCookie') > -1) {
        var cookies = document.cookie.split(';')
        for (var i = 0; i < cookies.length; i++) {
            if (cookies[i].indexOf('deleteCookie') > -1) {
                var cookieName = cookies[i].split('=')[0];
                document.cookie = cookieName + "=deleted; expires=" + new Date(0).toUTCString();
                console.log(cookieName + "removed");
            }
        }
    }
}
deleteCookies("Hm");
deleteCookies("Um");

突然发现这样似乎没办法调用执行,这段代码放在哪里呢?因为二级域名下面都是直接放置的静态资源不存在HTML页面,所以无法施展。于是想到在服务器端操作。

//nginx配置
...
  add_header Set-Cookie "UM_distinctid=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.exampl.com";
  add_header Set-Cookie "Hm_lpvt_6188cc7a9315dbe7155a5b2c9ecc1103=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.example.com";
  add_header Set-Cookie "Hm_lvt_6188cc7a9315dbe7155a5b2c9ecc1103=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.example.com";
...

domain后面跟的是需要屏蔽的二级域名,相比较JS代码更简洁。但是测试的时候出现问题了:

如何正确的删除二级域名的cookie

如何正确的删除二级域名的cookie

前面一张图是在FireFox下面的结果,后面一张是在Chrome下面的结果,通过开发者控制台的扩展cookie部分也可以看出来。所以,到底如何屏蔽百度统计等第三方cookie对网站优化的影响呢?

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»