别天真了,第三方 CSS 并不安全彩民之家高手论坛

2019-10-11 12:50 来源:未知

读取属性

实际,你供给思念的不不过密码输入框。你只怕在品质中保留着其他的遮盖内容:

JavaScript

<input type="hidden" name="csrf" value="1687594325"> <img src="/avatars/samanthasmith83.jpg"> <iframe src="//cool-maps-service/show?st-pancras-london"></iframe> <img src="/gender-icons/female.png"> <div></div>

1
2
3
4
5
<input type="hidden" name="csrf" value="1687594325">
<img src="/avatars/samanthasmith83.jpg">
<iframe src="//cool-maps-service/show?st-pancras-london"></iframe>
<img src="/gender-icons/female.png">
<div></div>

装有这个都足以经过 CSS 选取器获取,且能发出央求。

办法一:用CSS和JavaScript达成预加载

金镶玉裹福禄双全预加载图片有那多少个方法,包蕴使用CSS、JavaScript及相互的各样组合。那个工夫可依据不一致规划场景设计出相应的施工方案,十一分高速。

一味施用CSS,可轻易、高效地预加载图片,代码如下:

Html代码  

  1. #preload-01 { background: url() no-repeat -9999px -9999px; }  
  2. #preload-02 { background: url() no-repeat -9999px -9999px; }  
  3. #preload-03 { background: url() no-repeat -9999px -9999px; }   

将那多个ID选拔器应用到(X)HTML元素中,大家便可透过CSS的background属性将图片预加载到显示器外的背景上。只要那一个图片的路线保持不改变,当它们在Web页面包车型大巴别的市方被调用时,浏览器就能够在渲染进度中应用预加载(缓存)的图片。简单、高效,无需别的JavaScript。 

该办法就算比相当慢,但仍有改革余地。使用该法加载的图片会同页面包车型客车别的剧情一起加载,扩充了页面包车型大巴总体加载时间。为了化解这些标题,大家增加了一些JavaScript代码,来延缓预加载的时光,直到页面加载完结。代码如下:

Js代码  

  1. // better image preloading  
  2. function preloader() {  
  3.     if (document.getElementById) {  
  4.         document.getElementById("preload-01").style.background = "url() no-repeat -9999px -9999px";  
  5.         document.getElementById("preload-02").style.background = "url() no-repeat -9999px -9999px";  
  6.         document.getElementById("preload-03").style.background = "url() no-repeat -9999px -9999px";  
  7.     }  
  8. }  
  9. function addLoadEvent(func) {  
  10.     var oldonload = window.onload;  
  11.     if (typeof window.onload != 'function') {  
  12.         window.onload = func;  
  13.     } else {  
  14.         window.onload = function() {  
  15.             if (oldonload) {  
  16.                 oldonload();  
  17.             }  
  18.             func();  
  19.         }  
  20.     }  
  21. }  
  22. addLoadEvent(preloader);  

在该脚本的率先片段,大家收获使用类采取器的成分,并为其安装了background属性,以预加载区别的图形。

该脚本的第二部分,大家运用addLoadEvent()函数来耽搁preloader()函数的加载时间,直到页面加载达成。

若果JavaScript非常的小概在顾客的浏览器中寻常运维,会发生哪些?极粗略,图片不会被预加载,当页面调用图片时,平常展现就能够。 

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

2018/03/07 · CSS · 安全

原来的作品出处: Jake   译文出处:[众成翻译

  • KING]()   

多年来一段时间,关于 通过 CSS 创造“keylogger”(键盘记录器) 的商酌比比较多。

些微人伸手浏览器厂家去“修复”它。有些人则长远钻研,表示它仅能影响通过类 React 框架建构的网站,并喝斥React。而真正的标题却在于感觉第三方内容是“安全”的。

办法三:使用Ajax完成预加载

地方所付出的方法就像是缺乏酷,那今后来看三个利用Ajax实现图片预加载的办法。该办法运用DOM,不止预加载图片,还有大概会预加载CSS、 JavaScript等连锁的事物。使用Ajax,比向来动用JavaScript,优越之处在于JavaScript和CSS的加载会影响到方今页面,而Ajax不会,使用Ajax该办法简单、高效。

Js代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // XHR to request a JS and a CSS  
  4.         var xhr = new XMLHttpRequest();  
  5.         xhr.open('GET', '');  
  6.         xhr.send('');  
  7.         xhr = new XMLHttpRequest();  
  8.         xhr.open('GET', '');  
  9.         xhr.send('');  
  10.         // preload image  
  11.         new Image().src = "";  
  12.     }, 1000);  
  13. };   

下面代码预加载了“preload.js”、“preload.css”和“preload.png”。一千微秒的过期是为着抗御脚本挂起,而招致健康页面出现成效难题。 

上面,我们看看哪些用JavaScript来贯彻该加载进度:

Js代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // reference to <head>  
  4.         var head = document.getElementsByTagName('head')[0];  
  5.         // a new CSS  
  6.         var css = document.createElement('link');  
  7.         css.type = "text/css";  
  8.         css.rel  = "stylesheet";  
  9.         css.href = "";  
  10.         // a new JS  
  11.         var js  = document.createElement("script");  
  12.         js.type = "text/javascript";  
  13.         js.src  = "";  
  14.         // preload JS and CSS  
  15.         head.appendChild(css);  
  16.         head.appendChild(js);  
  17.         // preload image  
  18.         new Image().src = "";  
  19.     }, 1000);  
  20. };   

那边,大家经过DOM创造八个因向来贯彻八个文件的预加载。正如上面提到的那么,使用Ajax,加载文件不会选择到加载页面上。从这点上看,Ajax方法优越于JavaScript。

其三方脚本

JavaScript

<script src=";

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

与图片相比较,第三方脚本则有更加的多的调控权。假诺本身将上述代码引进笔者的文件中,则代表笔者赋予了 example.com 完全调节笔者的网址的权能。该脚本能:

  • 读取/修改页面内容。
  • 监听客商的保有交互。
  • 运维费用多量计量能源的代码(如 cryptocoin 挖矿程序)。
  • 透过向本站发诉求,那样能附带客户的 cookie,转发响应。(译注:盗取用户的 cookie 及其他数据)
  • 读取/修改本地存款和储蓄。
  • ……能够做其余对方想做的事情。

“本地存款和储蓄”非常主要。假如脚本通过 IndexedDB 或缓存 API 发起攻击,则就是在剔除脚本后,攻击仍只怕在总体站点内继续存在。

借让你引进了别的站点的脚本,则必需断然相信对方及对方的防御技巧。

一经你面前境遇恶意脚本的口诛笔伐,则可设置 Clear-Site-Data header(清空站点数据响应头) 清除站点全部数据。

预加载图片是抓牢客户体验的贰个很好办法。图片预先加载到浏览器中,报事人便可顺遂地在您的网址上冲浪,并享受到十分的快的加载速度。那对图片画 廊及图片占领异常的大比例的网址以来特别有帮忙,它保障了图片飞速、无缝地公布,也可扶持客商在浏览你网址内容时取得越来越好的客户体验。本文将享受八个分化的预加 载技能,来坚实网站的习性与可用性。 

监听交互

JavaScript

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

1
2
3
4
5
6
7
.login-button:hover {
  background: url('/login-button-hover');
}
 
.login-button:active {
  background: url('/login-button-active');
}

可将 hover 和 active 状态发送到服务器。通过适当的 CSS,你就能够博取到客户意图。

主意二:仅使用JavaScript完结预加载

上述办法一时的确很便捷,但大家稳步察觉它在实际上落到实处进程中会费用太多时间。相反,笔者更爱好使用纯JavaScript来促成图片的预加载。上面将提供三种那样的预加载方法,它们得以极漂亮貌地工作于具有当代浏览器之上。 

JavaScript代码段1

只需轻巧编辑、加载所急需图片的不二等秘书籍与名称就可以,很轻巧实现:

Html代码  

  1. <div>  
  2.     <script type="text/javascript">  
  3.         <!--//--><![CDATA[//><!-- 
  4.         var images = new Array() 
  5.             function preload() { 
  6.                 for (i = 0; i < preload.arguments.length; i ) { 
  7.                     images[i] = new Image() 
  8.                     images[i].src = preload.arguments[i] 
  9.                 } 
  10.             } 
  11.             preload( 
  12.                 "", 
  13.                 "", 
  14.                 "" 
  15.             ) 
  16.         //--><!]]>  
  17.      </script>  
  18. </div>  

该方法特别适用预加载多量的图形。笔者的画廊网址选取该技术,预加载图片数量达50多张。将该脚本金和利息用到登入页面,只要客户输入登入帐号,超过贰分之一画廊图片将被预加载。 

JavaScript代码段2

该方法与地点的诀要类似,也得以预加载大肆数量的图样。将上面包车型地铁脚本添参预别的web页中,依据程序指令张开编写制定就能够。

Html代码  

  1. <div>  
  2.     <script type="text/javascript">  
  3.         <!--//--><![CDATA[//><!--  
  4.         if (document.images) { 
  5.                 img1 = new Image(); 
  6.                 img2 = new Image(); 
  7.                 img3 = new Image(); 
  8.                 img1.src = ""; 
  9.                 img2.src = ""; 
  10.                 img3.src = ""; 
  11.             } 
  12.         //--><!]]>  
  13.     </script>  
  14. </div>  

 

正如所见到,每加载叁个图形都亟需制造贰个变量,如“img1 = new Image();”,及图片源地址注解,如“img3.src =“../path/to/image-003.gif”;”。参照他事他说加以考察该方式,你可依照须要加载大肆多的图形。

大家又对该办法开展了改正。将该脚本封装入三个函数中,并动用 addLoadEvent(),延迟预加载时间,直到页面加载实现。

Js代码  

  1. function preloader() {  
  2.     if (document.images) {  
  3.         var img1 = new Image();  
  4.         var img2 = new Image();  
  5.         var img3 = new Image();  
  6.         img1.src = "";  
  7.         img2.src = "";  
  8.         img3.src = "";  
  9.     }  
  10. }  
  11. function addLoadEvent(func) {  
  12.     var oldonload = window.onload;  
  13.     if (typeof window.onload != 'function') {  
  14.         window.onload = func;  
  15.     } else {  
  16.         window.onload = function() {  
  17.             if (oldonload) {  
  18.                 oldonload();  
  19.             }  
  20.             func();  
  21.         }  
  22.     }  
  23. }  
  24. addLoadEvent(preloader);   

第三方CSS

JavaScript

<link rel="stylesheet" href=";

1
<link rel="stylesheet" href="https://example.com/style.css">

相对来说图片,CSS 在力量上更类似脚本。像脚本同样,它适用于全体页面。它能够:

  • 剔除/增添/修改页面内容。
  • 依据页面内容提倡呼吁。
  • 可响应二种客户交互。

尽管如此 CSS 无法改改本地存款和储蓄,也无法通过 CSS 运营 cryptocoin 挖矿程序(可能是恐怕的,只是自己不知晓而已),但恶意 CSS 代码依旧能促成异常的大的损失。

增进原委

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

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

嗯,价格被标高了。

活动内容

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

1
2
3
4
5
6
.delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

地点的开关能做一些最首要的操作,设置其为不可以知道,然后放在客户大概点击的地点。

值得庆幸的是,假诺按键的操作确实足够重大,网址也许会先出示确认对话框。但亦不是不行绕过,只需使用更加多的 CSS 来诈骗客户点击 “鲜明” 开关并不是“撤除”按键就能够。

若果浏览器确实采取地点的回应方式化解“键盘记录器”的标题。攻击者只需在页面上找到三个非密码文本输入框(可能是索求输入框)并将其盖在密码输入框上就可以。然后他们的攻击就又可用了。

其三方内容不安全

这几个只是自己所精通的一部分本领,笔者相信还会有越多。

其三方内容在其沙箱区域内享有强盛的工夫。一张图纸或沙盒化的 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)。是的,那不是如何新东西。

1 赞 1 收藏 评论

彩民之家高手论坛 1

读取文本

JavaScript

@font-face { font-family: blah; src: url('/page-contains-q') format('woff'); unicode-range: U 85; } html { font-family: blah, sans-serif; }

1
2
3
4
5
6
7
8
9
@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

流失的源委

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

1
2
3
4
5
6
7
body {
  display: none;
}
 
html::after {
  content: 'HTTP 500 Server Error';
}

上述是三个极度的例证,但想象一下,若是第三方仅对某一小部分客商那样做。不但你很难调节和测量试验,还会错失客商的信赖。

更油滑的措施如不经常删除“购买”开关,或重排内容段落。

键盘记录器

从孳生周边关怀的代码开端讲起:

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

1
2
3
input[type="password"][value$="p"] {
  background: url('/password?p');
}

借使输入框的 value 属性值以 p 结尾,上述代码将会向 /password?p 发起呼吁。各样字符都可触及那些操作,通过它能获得到不菲数据。

默许情况下,浏览器不会将顾客输入的值存款和储蓄在 value 属性中,因而这种攻击须要凭借有个别能共同那几个值的东西,如 React。

要应对那些主题素材,React 可用另一种共同密码字段的办法,或浏览器可限制那多少个能协作密码字段属性的选用器。可是,那只是是一种虚假的安全。你只化解了在特殊情状下的该难点,而别的意况照旧。

设若 React 改为运用 data-value 属性,则该答复方法行不通。要是网址将输入框更改为 type="text",以便顾客能够旁观他俩正在输入的内容,则该回应办法行不通。假若网址创设了多少个 <better-password-input> 组件并揭破 value 作为质量,则该回应格局行不通。

除此以外,还恐怕有为数不菲此外的依照 CSS 的攻击形式:

其三方图片

<img src=";

1
<img src="https://example.com/kitten.jpg">

假定本人将上述代码引进小编的公文中,即意味着信赖 example.com。对方大概会去除能源,给自个儿一个404,导致网址不完整,进而破坏这种信赖关系。可能,他们也许会用别的非预期的数目来代替猫咪图片的数码。

唯独,图片的熏陶只限于成分本身的从头到尾的经过区域。笔者得以向顾客解释并希望客户相信,“此处的剧情出自 example.com,要是它有误,则是原站点的难点,并非本站形成的”。但这一个主题材料早晚不会影响到密码输入框等剧情。

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:别天真了,第三方 CSS 并不安全彩民之家高手论坛