容易被忽略的CSS安全性【黑马web前端】

更新时间:2019年07月26日 11时17分39秒来源:黑马程序员论坛

前一段时间，有很多关于用CSS构建的“键盘记录器”的讨论（源代码见：https://github.com/maxchehab/CSS-Keylogging）。

有些人要求浏览器“修复”它。另有一些人挖掘得更深一些，发现它只影响使用React及类似框架编写的网站，并为此指责React。不过真正的问题在于第三方内容是不是“安全的”。

下面我们逐一分析这些第三方内容。

第三方图片

如果因为我信任example.com，就在自己的代码中包含上述内容。那么他们可能会删除资源，从而给我返回一个404，使我的网站看起来支离破碎，从而辜负了这种信任。同时他们也有可能会用一些不恰当的内容取代原来的图片。

不过图像的影响仅限于元素本身的内容框。我可以向自己的用户解释“这是来自example.com的内容，如果它变冒犯了你，那是他们的错，可别来找我”，并寄希望于用户们能够相信我。但是这种事肯定不会影响我数据库中密码字段之类的东西。

第三方脚本

与图片相比，第三方脚本有更多的控制权。如果我的代码中包含上述内容，就会给example.com完全控制自己的网站的机会。他们能：

读取/更改页面内容。
监控用户交互的每一个步骤。
运行计算量很大的代码（比如用你的浏览器挖矿）。
盗取用户的cookie向我的来源发出请求，并转发响应数据。
读取/更改原始存储。
几乎可以做任何他们想做的事。

“原始存储”位非常重要。如果脚本影响了IndexedDB或缓存存储API，即使你把脚本删掉，攻击也可能会仍然继续。

如果你在自己的代码中引用了来自其他来源的脚本，那么必须绝对信任它们，并保证其安全性。

如果遇到恶意脚本，则应使用 Clear-Site-Data标头清除所有站点数据。

第三方CSS

CSS的作用更接近于脚本而不是图像。和脚本一样，它适用于整个页面。它可以：

删除/添加/修改页面内容。
根据页面内容发出请求。
对许多用户交互作出响应。

CSS不能修改原始存储，你不能用CSS写一个挖矿程序（也有可能，或许我还不知道），但恶意CSS仍然可以造成很大的破坏。

键盘记录器

咱们从最开始的那个问题开始

如果输入的 value属性以 p结尾，上面的代码将触发对 /password?p的请求。对每个字符都会执行此操作，这样你会获得大量键盘输入的数据。

默认情况下，浏览器不会将用户输入的值存储在 value属性中，因此攻击往往在同步这些值的内容时发生，例如React。

为了缓解这种情况，React可以使用另一种同步密码字段的方法，或者浏览器可以限制与密码字段的 value属性匹配的选择器，但这仅仅是一种虚假的安全感。你只不过是解决了一个特定的问题，但其他情况下一切照旧。

如果 React 切换到使用data-value属性，则上述手段将失败。如果站点将输入更改为type ="text"，那么用户可以看到他们正在输入的内容，则这种手段失败。如果站点创建<better-password-input>并将值作为属性公开，同样上述手段失败。

此外，还有许多基于CSS的攻击：

消失的内容

这是一个极端的例子，但想象一下，如果第三方代码为你的一小部分用户做了这种事，会出现什么样的后果：将会侵蚀掉用户对你的信任，同时很难排查问题到底出在何处。

更加腹黑的黑客可能会偶尔删除“购买”按钮，或着重新排列内容中的段落。

添加内容

哎呀，你这么快就涨价了！

移除内容

把一个有“删库跑路”功能的按钮设为不可看，然后再把它放在用户可能会点击的地方。

值得庆幸的是，如果按钮执行的是后果非常严重的操作，该网站可能会首先显示确认对话框。没关系，只需使用更多的CSS来诱骗用户单击“是的我确定！”按钮而不是“哦天呐！不是！”按钮。

想象一下，如果浏览器确实试图消除“键盘记录”这种小伎俩的影响。攻击者还可以在页面上放一个非密码文本输入框（可能是搜索字段）并将其覆盖在密码输入框之上，呵呵，现在他们又回来了。

读取属性

你担心的可不仅仅是密码。一些私有内容可能会保存在属性中：

所有这些都可以被CSS选择器设为目标，并且可以把结果发到某个服务器上。

监控互动

可以将hover和active等动作发送回服务器。适当的使用CSS，你可以很好地了解用户想要干什么。

读取文本

在这种情况下，如果页面包含q，将发送请求。你可以为不同的文字创建大量的这种请求，并可以定位特定的元素。字体还可以包含连字，因此还可以检测字符序列。你甚至可以将字体技巧与滚动条检测相结合，从而能推断出更多相关内容的信息。

结论：第三方内容并不安全

这些只是我所知道的一些技巧，我相信还会有更多类似的小技巧。

第三方内容在其沙箱中具有很高的影响力。虽然图像或沙盒iframe有着非常小的沙箱，但脚本和样式的作用范围却影响你的整个页面，甚至是整个站点。

如果你担心用户会欺骗你的网站去加载第三方资源，可以使用CSP（内容安全策略：https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP）保证安全，从而限制从中获取图像，脚本和样式的位置。

还可以使用子资源完整性来确保脚本/样式的内容与特定的哈希匹配，否则将无法执行。

如果你对这种安全技术感兴趣，包括滚动条技巧的更多细节，可以去看看Mathias Bynens在2014年的演讲（https://vimeo.com/100264064#t=1290s），Mike West在2013年的演讲（https://www.youtube.com/watch?v=eb3suf4REyI），或Mario Heiderich等人的2012年论文（PDF：http://www.nds.rub.de/media/emma ... Attacks-ccs2012.pdf）。没错，这些技术并不是最新的。

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

容易被忽略的CSS安全性【黑马web前端】

相关阅读