整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
去年，有一位開發者創建了一個網站，用于跟蹤和記錄用戶數據，包括點擊，鼠標移動，瀏覽器類型和操作系統。通過Web應用進行用戶跟蹤大家已經司空見慣，但是這個網站使用的方法卻有點"低端"，低端的讓大都為之內心一顫，因為他的方法沒有用到動態語言，甚至也沒有用到JavaScript，只是純HTML和一行CSS。這打破長期以來大家認為了CSS改只能靜態樣式顯示的的思維。蟲蟲今天就來給大家解析的他的方法，并附上如何防止此類跟蹤的方法。
這個方法利用了CSS的兩個特性：將內容注入HTML元素的能力（操縱DOM），以及在用戶執行操作后更改樣式的能力（渲染頁面）。該網站的工作原理是使用content屬性在執行操作時設置URL。 URL調用一個PHP腳本，該腳本記錄有關操作的詳細信息，這些操作將作為URL參數傳遞。使用:: before和:: after CSS選擇器設置此URL可確保僅在執行操作時調用URL，而不是在首次加載頁面時調用URL。
例如，以下CSS在每次單擊#link元素時調用URL：
跟蹤腳本包含記錄事件時間和執行操作的代碼。它還可用于提取用戶的IP地址，用戶代理和其他識別信息。
以下是這樣一個腳本的PHP示例：
用戶可以設置瀏覽器的User-agent來欺騙服務器，但是該追蹤方法中使用@supports at-rule測試特定于瀏覽器的CSS屬性來規避它。例如，以下操作通過檢測-webkit-appearance可用，以及-ms-ime-align不可用，來檢測是否為Chrome瀏覽器：
為了正確檢測用戶操作系統，在這個跟蹤中動用了字體檢測。例如，通過檢測瀏覽器是否支持Calibri字體系列，就可以判斷瀏覽器是不是在Windows中運行：
方法也有個示例的頁面證明可以識別除了上述提到一些信，還有其他的數據，包括瀏覽器窗口的大小和方向，用戶是否點擊了鏈接，以及用戶將鼠標懸停在元素上的時間。
下面是蟲蟲操作后跟蹤到的信息的展示頁面：
在瀏覽器中很難防止這種攻擊。可以借助一個跨站注入漏洞來完美實現信息竊取，還非常難于發現。如果想要完全避免這種攻擊，除非禁用CSS，但是這樣一來網站也就掛掉了。雖然無法完全杜絕攻擊，但是我們可以使用內容安全策略（CSP）增加其利用的難度。
CSP是一組規則，用于確定瀏覽器可以執行和不執行的操作。 CSP通常用于防止跨瀏覽器加載不受信任的腳本導致的跨站點腳本（XSS）和其他攻擊。雖然通常與JavaScript文件一起使用，但CSP也可以應用于CSS樣式表。
我們假設由第三方提供商托管的樣式表的網站，攻擊者危及樣式表并將用戶跟蹤添加到頁面上的鏈接如下：
當用戶單擊該鏈接時，他們的瀏覽器會其他網站上的跟蹤腳本。由于該行為是通過瀏覽器完成的，因此網站所有者完全不知道該漏洞。內容安全策略通過設置允許的樣式以及來源網站，就可以避免調用非法來源的鏈接。
禁用內聯樣式是CSP提供的最大安全優勢之一。內聯樣式是直接在HTML文檔中聲明（或通過JavaScript設置）的樣式，而不是從樣式表中加載的樣式。內聯樣式，尤其是動態生成的樣式或用戶創建的樣式，非常難以調試和保護。所以CSP通常會阻止所有內聯樣式，并將那些經過特別批準的內容列入白名單。
以下規則阻止所有內聯樣式以及外部托管的樣式表：
Content-Security-Policy "style-src 'self';"
如果阻止內聯樣式不能禁止，我們仍然可以使用哈希和隨機數確保CSS的完整性。
在樣式表或內聯樣式上執行散列函數時，除非樣式更改，否則它應該始終返回相同的結果。這對于將某些內聯樣式和樣式表列入白名單非常有用，同時可以驗證樣式是否未被修改或篡改。
Nonces則使用哈希類似的功能。但是加入了隨機數，為每個請求生成一個新的隨機數，使攻擊者更難以猜測其值。這避免了哈希的關鍵缺點:多個輸入可能生成相同的哈希。
樣式表通常托管在第三方服務器上，例如CDN中，這會導致一個新的攻擊入口。如果CDN遭到入侵，怎么能阻止攻擊篡改托管的CSS呢？
答案是SRI，可以使用資源完整性（SRI）解決此問題。
SRI使用哈希來驗證腳本和樣式表的內容。計算每個文件的哈希并將其附加到HTML元素的完整性屬性。當瀏覽器下載腳本或樣式表時，它會計算其哈希值并將其與存儲在屬性中的值進行比較。如果匹配，才會加載腳本或樣式。
雖然通過CSS跟蹤用戶的能力并不是什么新鮮事，但它確實需要我們對網絡上的隱私和安全性進行不同的思考。CSS是現代網絡的基本語言之一，禁用網站的CSS戶導致大部分網站無法使用。 Content-Security-Policy是防止XSS攻擊和CSS泄露的最佳方法。關注蟲蟲，瀏覽更多技術原創文章。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
想要在一個頁面引入CSS，共有以下3種方式
1、外部樣式表
2、內部樣式表
3、行內樣式表
一、外部樣式表
外部樣式表是最理想的CSS引入方式，指的是CSS代碼和HTML代碼都單獨放在不同文件種，然后在HTML文檔中使用link標簽引用CSS樣式表
語法：
<link rel="stylesheet" type="text/css" href="文件路徑" />
rel表示引入的是一樣樣式文件（即CSS文件）
type屬性取值也是固定的，即"text/css"，表示這是標準的CSS
href屬性表示CSS文件的路徑，
舉例：
.行內式
直接在標簽后面添加該標簽的屬性值
例如:
<table bgcolor="black" cellspacing="1px" width="600">
二.嵌入式
在title標簽后添加<style type="text/css"></style>
注意：需要將樣式放入<head></head>中
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css樣式使用</title>
<style type="text/css">
body{
background-color: antiquewhite;
}
p{
background-color: aqua;
}
</style>
</head>
<body>
<h1>CSS使用規則</h1>
<p>CSS使用規則/p>
</body>
三.導入式
創建css樣式表如mystyle.css，再在HTML中鏈接此mystyle.css樣式表。
<style type="text/css">
@import"mystyle.css"
</style>
四.鏈接式
創建css樣式表如style.css，再在HTML中鏈接此style.css樣式表。
<link rel="stylesheet" type="text/css" href="style.css">
例如：
HTML例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css樣式使用</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS使用規則</h1>
<p>CSS使用規則/p>
</body>
</html>
CSS例子：
body{
background-color: antiquewhite;
font-size: 17px;
}
結果圖：
五.采用導入式和鏈接式還是有不同的區別的：
1.使用鏈接式時，會在加載頁面主體部分之前裝載CSS文件，這樣顯示出來頁面一開始就是帶有樣式效果的；
使用導入式時，會在整個頁面裝載完成后在裝載CSS文件，對于有的瀏覽器來說，在一些情況下，如果網頁文件體積比較大的的時候，則會出現先顯示無樣式的頁面，閃爍一下在出現設置樣式后的效果，對于瀏覽者的感受，這是導入式的一個缺陷。
2.對于一些較大的網站，為了便于維護，可能會希望把所有的CSS樣式分類別放到幾個CSS文件中，如果這樣使用鏈接式引入，就需要幾個語句分別導入CSS文件。如果要調整CSS文件的分類，就需要同時調整HTML文件。這對于維護工作來說，是一個巨大的缺陷。如果使用導入式，則可以只引進一個總的CSS文件，在這個文件中在導入其他獨立的CSS文件；而鏈接式則不具備這個功能。
因此，建議如果需要引入一個CSS文件，則使用鏈接方式；如果需要引入多個CSS文件，則首先用鏈接方式引入一個“目錄”CSS文化，在這個“目錄”CSS文件中再使用導入式引入其他CSS文件。
但是，若是希望通過JavaScript來動態決定引入哪個CSS文件，則必須使用鏈接方式才能實現。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
