摘要：不过真正的问题在于第三方内容是不是安全的。第三方的作用更接近于脚本而不是图像。结论第三方内容并不安全这些只是我所知道的一些技巧，我相信还会有更多类似的小技巧。第三方内容在其沙箱中具有很高的影响力。
原文：https://jakearchibald.com/201...
翻译：疯狂的技术宅
本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章
前一段时间，有很多关于用CSS构建的“键盘记录器”的讨论（源代码见：https://github.com/maxchehab/...）。
有些人要求浏览器“修复”它。 另有一些人挖掘得更深一些，发现它只影响使用React及类似框架编写的网站，并为此指责React。 不过真正的问题在于第三方内容是不是“安全的”。
下面我们逐一分析这些第三方内容。
第三方图片如果因为我信任example.com，就在自己的代码中包含上述内容。那么 他们可能会删除资源，从而给我返回一个404，使我的网站看起来支离破碎，从而辜负了这种信任。同时他们也有可能会用一些不恰当的内容取代原来的图片。
不过图像的影响仅限于元素本身的内容框。 我可以向自己的用户解释“这是来自example.com的内容，如果它变冒犯了你，那是他们的错，可别来找我”，并寄希望于用户们能够相信我。 但是这种事肯定不会影响我数据库中密码字段之类的东西。
第三方脚本与图片相比，第三方脚本有更多的控制权。 如果我的代码中包含上述内容，就会给example.com完全控制自己的网站的机会。 他们能：
读取/更改页面内容。
监控用户交互的每一个步骤。
运行计算量很大的代码（比如用你的浏览器挖矿）。
盗取用户的cookie向我的来源发出请求，并转发响应数据。
读取/更改原始存储。
几乎可以做任何他们想做的事。
“原始存储”位非常重要。 如果脚本影响了IndexedDB或缓存存储API，即使你把脚本删掉，攻击也可能会仍然继续。
如果你在自己的代码中引用了来自其他来源的脚本，那么必须绝对信任它们，并保证其安全性。
如果遇到恶意脚本，则应使用 Clear-Site-Data 标头清除所有站点数据。
第三方CSSCSS的作用更接近于脚本而不是图像。和脚本一样，它适用于整个页面。 它可以：
删除/添加/修改页面内容。
根据页面内容发出请求。
对许多用户交互作出响应。
CSS不能修改原始存储，你不能用CSS写一个挖矿程序（也有可能，或许我还不知道），但恶意CSS仍然可以造成很大的破坏。
键盘记录器咱们从最开始的那个问题开始
input[type="password"][value$="p"] {
background: url("/password?p");
}
如果输入的 value 属性以 p 结尾，上面的代码将触发对 /password?p 的请求。 对每个字符都会执行此操作，这样你会获得大量键盘输入的数据。
默认情况下，浏览器不会将用户输入的值存储在 value 属性中，因此攻击往往在同步这些值的内容时发生，例如React。
为了缓解这种情况，React可以使用另一种同步密码字段的方法，或者浏览器可以限制与密码字段的 value 属性匹配的选择器，但这仅仅是一种虚假的安全感。 你只不过是解决了一个特定的问题，但其他情况下一切照旧。
如果 React 切换到使用data-value属性，则上述手段将失败。如果站点将输入更改为type ="text"，那么用户可以看到他们正在输入的内容，则这种手段失败。 如果站点创建
此外，还有许多基于CSS的攻击：
消失的内容body {
display: none;
}
html::after {
content: "HTTP 500 Server Error";
}
这是一个极端的例子，但想象一下，如果第三方代码为你的一小部分用户做了这种事，会出现什么样的后果：将会侵蚀掉用户对你的信任，同时很难排查问题到底出在何处。
更加腹黑的黑客可能会偶尔删除“购买”按钮，或着重新排列内容中的段落。
添加内容.price-value::before {
content: "1";
}
哎呀，你这么快就涨价了！
移除内容delete-everything-button {
opacity: 0;
position: absolute;
top: 500px;
left: 300px;
}
把一个有“删库跑路”功能的按钮设为不可看，然后再把它放在用户可能会点击的地方。
值得庆幸的是，如果按钮执行的是后果非常严重的操作，该网站可能会首先显示确认对话框。 没关系，只需使用更多的CSS来诱骗用户单击“是的我确定！”按钮而不是“哦天呐！不是！”按钮。
想象一下，如果浏览器确实试图消除“键盘记录”这种小伎俩的影响。攻击者还可以在页面上放一个非密码文本输入框（可能是搜索字段）并将其覆盖在密码输入框之上，呵呵，现在他们又回来了。
读取属性你担心的可不仅仅是密码。 一些私有内容可能会保存在属性中：
所有这些都可以被CSS选择器设为目标，并且可以把结果发到某个服务器上。
监控互动
.login-button:hover {
background: url("/login-button-hover");
}
.login-button:active {
background: url("/login-button-active");
}
可以将hover和active等动作发送回服务器。 适当的使用CSS，你可以很好地了解用户想要干什么。
读取文本@font-face {
font-family: blah;
src: url("/page-contains-q") format("woff");
unicode-range: U+71;
}
html {
font-family: blah, sans-serif;
}
在这种情况下，如果页面包含q，将发送请求。 你可以为不同的文字创建大量的这种请求，并可以定位特定的元素。 字体还可以包含连字，因此还可以检测字符序列。 你甚至可以将字体技巧与滚动条检测相结合，从而能推断出更多相关内容的信息。
结论：第三方内容并不安全这些只是我所知道的一些技巧，我相信还会有更多类似的小技巧。
第三方内容在其沙箱中具有很高的影响力。 虽然图像或沙盒iframe有着非常小的沙箱，但脚本和样式的作用范围却影响你的整个页面，甚至是整个站点。
如果你担心用户会欺骗你的网站去加载第三方资源，可以使用CSP（内容安全策略）保证安全，从而限制从中获取图像，脚本和样式的位置。
还可以使用子资源完整性来确保脚本/样式的内容与特定的哈希匹配，否则将无法执行。
如果你对这种安全技术感兴趣，包括滚动条技巧的更多细节，可以去看看Mathias Bynens在2014年的演讲，Mike West在2013年的演讲，或Mario Heiderich等人的2012年论文。 没错，这些技术并不是最新的。
本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117292.html
摘要：不过真正的问题在于第三方内容是不是安全的。第三方的作用更接近于脚本而不是图像。结论第三方内容并不安全这些只是我所知道的一些技巧，我相信还会有更多类似的小技巧。第三方内容在其沙箱中具有很高的影响力。 原文：https://jakearchibald.com/201...翻译：疯狂的技术宅 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 前...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。 《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！ 项目...
阅读 2013·2021-11-15 11:38
阅读 2047·2019-08-30 15:55
阅读 2181·2019-08-30 15:52
阅读 3165·2019-08-30 14:01
阅读 2682·2019-08-30 12:47
阅读 1127·2019-08-29 13:17
阅读 1060·2019-08-26 13:55
阅读 2628·2019-08-26 13:46
