成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

第三方CSS安全嗎？

walterrwu / 2058人閱讀

摘要：不過真正的問題在于第三方內(nèi)容是不是安全的。第三方的作用更接近于腳本而不是圖像。結(jié)論第三方內(nèi)容并不安全這些只是我所知道的一些技巧，我相信還會有更多類似的小技巧。第三方內(nèi)容在其沙箱中具有很高的影響力。

原文：https://jakearchibald.com/201...
翻譯：瘋狂的技術(shù)宅

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

前一段時(shí)間，有很多關(guān)于用CSS構(gòu)建的“鍵盤記錄器”的討論（源代碼見：https://github.com/maxchehab/...）。

有些人要求瀏覽器“修復(fù)”它。 另有一些人挖掘得更深一些，發(fā)現(xiàn)它只影響使用React及類似框架編寫的網(wǎng)站，并為此指責(zé)React。 不過真正的問題在于第三方內(nèi)容是不是“安全的”。

下面我們逐一分析這些第三方內(nèi)容。

第三方圖片

如果因?yàn)槲倚湃?b>example.com，就在自己的代碼中包含上述內(nèi)容。那么 他們可能會刪除資源，從而給我返回一個(gè)404，使我的網(wǎng)站看起來支離破碎，從而辜負(fù)了這種信任。同時(shí)他們也有可能會用一些不恰當(dāng)?shù)膬?nèi)容取代原來的圖片。

不過圖像的影響僅限于元素本身的內(nèi)容框。 我可以向自己的用戶解釋“這是來自example.com的內(nèi)容，如果它變冒犯了你，那是他們的錯(cuò)，可別來找我”，并寄希望于用戶們能夠相信我。 但是這種事肯定不會影響我數(shù)據(jù)庫中密碼字段之類的東西。

第三方腳本

與圖片相比，第三方腳本有更多的控制權(quán)。 如果我的代碼中包含上述內(nèi)容，就會給example.com完全控制自己的網(wǎng)站的機(jī)會。 他們能：

讀取/更改頁面內(nèi)容。

監(jiān)控用戶交互的每一個(gè)步驟。

運(yùn)行計(jì)算量很大的代碼（比如用你的瀏覽器挖礦）。

盜取用戶的cookie向我的來源發(fā)出請求，并轉(zhuǎn)發(fā)響應(yīng)數(shù)據(jù)。

讀取/更改原始存儲。

幾乎可以做任何他們想做的事。

“原始存儲”位非常重要。 如果腳本影響了IndexedDB或緩存存儲API，即使你把腳本刪掉，攻擊也可能會仍然繼續(xù)。

如果你在自己的代碼中引用了來自其他來源的腳本，那么必須絕對信任它們，并保證其安全性。

如果遇到惡意腳本，則應(yīng)使用 Clear-Site-Data 標(biāo)頭清除所有站點(diǎn)數(shù)據(jù)。

第三方CSS

CSS的作用更接近于腳本而不是圖像。和腳本一樣，它適用于整個(gè)頁面。 它可以：

刪除/添加/修改頁面內(nèi)容。

根據(jù)頁面內(nèi)容發(fā)出請求。

對許多用戶交互作出響應(yīng)。

CSS不能修改原始存儲，你不能用CSS寫一個(gè)挖礦程序（也有可能，或許我還不知道），但惡意CSS仍然可以造成很大的破壞。

鍵盤記錄器

咱們從最開始的那個(gè)問題開始

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

如果輸入的 value 屬性以 p 結(jié)尾，上面的代碼將觸發(fā)對 /password?p 的請求。 對每個(gè)字符都會執(zhí)行此操作，這樣你會獲得大量鍵盤輸入的數(shù)據(jù)。

默認(rèn)情況下，瀏覽器不會將用戶輸入的值存儲在 value 屬性中，因此攻擊往往在同步這些值的內(nèi)容時(shí)發(fā)生，例如React。

為了緩解這種情況，React可以使用另一種同步密碼字段的方法，或者瀏覽器可以限制與密碼字段的 value 屬性匹配的選擇器，但這僅僅是一種虛假的安全感。 你只不過是解決了一個(gè)特定的問題，但其他情況下一切照舊。

如果 React 切換到使用data-value屬性，則上述手段將失敗。如果站點(diǎn)將輸入更改為type ="text"，那么用戶可以看到他們正在輸入的內(nèi)容，則這種手段失敗。 如果站點(diǎn)創(chuàng)建并將值作為屬性公開，同樣上述手段失敗。

此外，還有許多基于CSS的攻擊：

消失的內(nèi)容 
body {
  display: none;
}

html::after {
  content: "HTTP 500 Server Error";
}

這是一個(gè)極端的例子，但想象一下，如果第三方代碼為你的一小部分用戶做了這種事，會出現(xiàn)什么樣的后果：將會侵蝕掉用戶對你的信任，同時(shí)很難排查問題到底出在何處。

更加腹黑的黑客可能會偶爾刪除“購買”按鈕，或著重新排列內(nèi)容中的段落。

添加內(nèi)容 
.price-value::before {
  content: "1";
}

哎呀，你這么快就漲價(jià)了！

移除內(nèi)容 
delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

把一個(gè)有“刪庫跑路”功能的按鈕設(shè)為不可看，然后再把它放在用戶可能會點(diǎn)擊的地方。

值得慶幸的是，如果按鈕執(zhí)行的是后果非常嚴(yán)重的操作，該網(wǎng)站可能會首先顯示確認(rèn)對話框。 沒關(guān)系，只需使用更多的CSS來誘騙用戶單擊“是的我確定！”按鈕而不是“哦天吶！不是！”按鈕。

想象一下，如果瀏覽器確實(shí)試圖消除“鍵盤記錄”這種小伎倆的影響。攻擊者還可以在頁面上放一個(gè)非密碼文本輸入框（可能是搜索字段）并將其覆蓋在密碼輸入框之上，呵呵，現(xiàn)在他們又回來了。

讀取屬性

你擔(dān)心的可不僅僅是密碼。 一些私有內(nèi)容可能會保存在屬性中：

所有這些都可以被CSS選擇器設(shè)為目標(biāo)，并且可以把結(jié)果發(fā)到某個(gè)服務(wù)器上。

監(jiān)控互動(dòng) 
.login-button:hover {
  background: url("/login-button-hover");
}

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

可以將hover和active等動(dòng)作發(fā)送回服務(wù)器。 適當(dāng)?shù)氖褂肅SS，你可以很好地了解用戶想要干什么。

讀取文本 
@font-face {
  font-family: blah;
  src: url("/page-contains-q") format("woff");
  unicode-range: U+71;
}

html {
  font-family: blah, sans-serif;
}

在這種情況下，如果頁面包含q，將發(fā)送請求。 你可以為不同的文字創(chuàng)建大量的這種請求，并可以定位特定的元素。 字體還可以包含連字，因此還可以檢測字符序列。 你甚至可以將字體技巧與滾動(dòng)條檢測相結(jié)合，從而能推斷出更多相關(guān)內(nèi)容的信息。

結(jié)論：第三方內(nèi)容并不安全

這些只是我所知道的一些技巧，我相信還會有更多類似的小技巧。

第三方內(nèi)容在其沙箱中具有很高的影響力。 雖然圖像或沙盒iframe有著非常小的沙箱，但腳本和樣式的作用范圍卻影響你的整個(gè)頁面，甚至是整個(gè)站點(diǎn)。

如果你擔(dān)心用戶會欺騙你的網(wǎng)站去加載第三方資源，可以使用CSP（內(nèi)容安全策略）保證安全，從而限制從中獲取圖像，腳本和樣式的位置。

還可以使用子資源完整性來確保腳本/樣式的內(nèi)容與特定的哈希匹配，否則將無法執(zhí)行。

如果你對這種安全技術(shù)感興趣，包括滾動(dòng)條技巧的更多細(xì)節(jié)，可以去看看Mathias Bynens在2014年的演講，Mike West在2013年的演講，或Mario Heiderich等人的2012年論文。 沒錯(cuò)，這些技術(shù)并不是最新的。

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117292.html

相關(guān)文章

  • 第三方CSS安全嗎？

    摘要：不過真正的問題在于第三方內(nèi)容是不是安全的。第三方的作用更接近于腳本而不是圖像。結(jié)論第三方內(nèi)容并不安全這些只是我所知道的一些技巧，我相信還會有更多類似的小技巧。第三方內(nèi)容在其沙箱中具有很高的影響力。 原文：https://jakearchibald.com/201...翻譯：瘋狂的技術(shù)宅 本文首發(fā)微信公眾號：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 前...

    Yu_Huang 評論0 收藏0

  • 前端面試題大集合：來自真實(shí)大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長期一個(gè)一個(gè)的記錄下來的，可能會有重復(fù)，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    Kerr1Gan 評論0 收藏0

  • 前端面試題大集合：來自真實(shí)大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長期一個(gè)一個(gè)的記錄下來的，可能會有重復(fù)，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    lushan 評論0 收藏0

  • 前端面試題大集合：來自真實(shí)大廠的532道面試題(只有題，沒有答案)

    答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@?？途W(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長期一個(gè)一個(gè)的記錄下來的，可能會有重復(fù)，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...

    joyvw 評論0 收藏0

  • 前端面試每日3+1（周匯總2019.08.11）

    摘要：前端面試每日題，以面試題來驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)讓努力成為一種習(xí)慣，讓奮斗成為一種享受相信堅(jiān)持的力量項(xiàng)目地址推薦歡迎跟一起折騰前端，系統(tǒng)整理前端知識，目前正在折騰，打算打通算法與數(shù)據(jù)結(jié)構(gòu)的任督二脈。 《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。 前端面試每日3+1題，以面試題來驅(qū)動(dòng)學(xué)習(xí)，每天進(jìn)步一點(diǎn)！ 讓努力成為一種習(xí)慣，讓奮斗成為一種享受！相信 堅(jiān)持 的力量?。?！ 項(xiàng)目...

    Baoyuan 評論0 收藏0

發(fā)表評論

0條評論

walterrwu

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<