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