别天真了，第三方CSS并不安全

添加内容

.price-value::before {  
  content: '1';  
}

哦，价格被标高了。

.delete-everything-button {  
  opacity: 0;  
  position: absolute;  
  top: 500px;  
  left: 300px;  
}

值得光荣的是，如不雅按钮的操作确切异常重要，网站可能会先显示确认对话框。但也不是弗成绕过，只需应用更多的 CSS 来欺骗用户点击 “肯定” 按钮而不是“撤消”按钮即可。

假设浏览器确切采取膳绫擎的应对办法解决“键盘记录器”的问题。进击者只需在页面上找到一个非暗码文本输入框（可能是搜刮输入框）并将其盖在暗码输入框上即可。然后他们的进击就又可用了。

攫取属性

默认情况下，浏览器不会将用户输入的值存储在 value 属性中，是以这种进击须要依附某些能同步这些值的器械，如 React。

其实，你须要担心的不仅仅是暗码输入框。你可能在属性中保存着其他的隐蔽内容：

这些只是我所知道的一些技能，我信赖还有更多。

膳绫擎的按钮能做一些重要的操作，设置其为弗成见，然后放在用户可能点击的处所。

攫取文本

所有这些都可以经由过程 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+85;  
}  
 
 
html {  
  font-family: blah, sans-serif;  
}

在这种情况下，如不雅页面内有 q 字符，则会发送请求。你可认为不合的字符，并针对特定的元素，创建大年夜量不合的字体。字体也可以包含 ligature（连字），所以你可以在开端检测字符序列。你甚至可以经由过程将字体技能与滚动条检测结合起来来揣摸内容。

译注：关于 ligature（连字）, 可查看 Wikipedia Typographic Ligature

第三方内容不安然

第三方内容在其沙箱区域内具有强大年夜的才能。一张图片或沙盒化的 iframe 仅在一个小范围内的沙箱中，但脚本和样式典范围倒是你的页面，甚至是全部站点。

如不雅你担心恶意用户诱使你的网站加载第三方资本，可以经由过程 CSP 用作防护手段，其可以限制加载图片，脚本和样式的来源。

你还可以应用 Subresource Integrity（子资本完全性）来确保脚本/样式的内容匹配特定的 hash，不然将不加载。感激 Hacker News上的Piskvorrr 提示我！

如不雅你想懂得更多如上述的 hack 技能，包含滚动条技能，更多信息请参阅 Mathias Bynens' talk from 2014，Mike West's talk from 2013，或 Mario Heiderich et al.'s paper from 2012（PDF）。是的，这不是什么新器械。

移动内容

【编辑推荐】

新思科技杨国梁：安然和质量应成闻敉件研发的重要身分
50道CSS基本面试题（附谜底）
前妒攀利器，6款开源的Web机能优化帮助对象推荐
2018 年 2 月 15 个有意思的 JavaScript 和 CSS 库
美团点评开源竽暌姑 Vue.js 开辟小法度榜样的前端框架 mpvue
2/3 首页上一页 1 2 3 下一页尾页

　　推荐阅读

　　云计算在金融服务业的应用日益广泛

沙龙晃荡 | 3月31日京东、微博拭魅战专家与你合营商量容器技巧实践！云计算办事供给商(CSP)如今懂得这些金融机构的挂念和请求，并响应地为其量身定制了云计算产品。近年来，AWS公司大年夜>>>详细阅读

本文标题：别天真了，第三方CSS并不安全

地址：http://www.17bianji.com/lsqh/40617.html

1/2 1