整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
去年，有一位開發者創建了一個網站，用于跟蹤和記錄用戶數據，包括點擊，鼠標移動，瀏覽器類型和操作系統。通過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泄露的最佳方法。關注蟲蟲，瀏覽更多技術原創文章。
京時間 8 月 3 日零時 18 分，飛行航班信息平臺 Flightradar24 發布推文稱，佩洛西搭乘的 C-40C 專機（呼號 SPAR19）在臺北降落時有 70.8 萬人進行實時追蹤，SPAR19 創下 Flightradar24 平臺實時追蹤人數最高紀錄。
當日凌晨 4 時 21 分，Flightradar24 發布推文稱，這架呼號為 SPAR19 的飛機從吉隆坡起飛到降落在臺北期間，有 292 萬用戶追蹤了至少其中一段飛行航程動態。飛機降落時，有 70.8 萬人進行實時追蹤。這兩項數據都創下 Flightradar24 的最高紀錄。
Flightradar 24 是一項全球航班跟蹤服務，最初由瑞典航空愛好者創立，可以提供全球數千架飛機的實時信息。
Flightradar 24 可以實時跟蹤來自全球 1200 多家航空公司的 180000 多個航班，往返于全球 4000 多個機場。可以在線跟蹤當天飛行航班的飛行地圖軌跡、飛機型號、出發地、目的地、海拔高度、飛行速度、經緯度、飛機雷達型號等信息。此外，多天以前的飛行航班信息也可以追蹤到。
Flightradar24 提供的上述服務可在線使用，適用于 iOS 以及 Android 設備。用戶如果想追蹤某一航班的信息，可以直接登錄 Flightradar24 官網（http://www.flightradar24.com/），輸入航班信息或者點擊地圖中的航班，就可以追蹤該航班飛行信息。
Flightradar24 結合了來自多個數據源的數據，包括 ADS-B、MLAT 和雷達數據。ADS-B、MLAT 和雷達數據與航空公司和機場的時刻表和航班狀態數據匯總在一起，可以在 Flightradar24 官網（www.flightradar24.com）和應用程序（https://www.flightradar24.com/apps）中實現航班跟蹤功能。
ADS-B 系統
Flightradar24 用于接收航班飛行信息的主要技術稱為廣播式自動相關監視系統。下圖很好地解釋了 ADS-B 技術。
1、飛機從 GPS 導航源（衛星）獲取其位置
2、飛機上的 ADS-B 應答器傳輸包含位置（以及更多內容）的信號
3、ADS-B 信號由連接到 Flightradar24 的接收器接收
4、接收器向 Flightradar24 發送數據
5、數據顯示在 www.flightradar24.com 和 Flightradar24 應用程序中
ADS-B 是一項正在開發中的相對較新的技術，目前，它還很少被空中交通管制 (ATC) 使用。Flightradar 24 估計，大約 70% 的商用客機（歐洲 80%，美國 60%）配備了 ADS-B 應答器。對于通用航空來說，這個數字可能低于 20%。不過，配備 ADS-B 接收器的飛機的比例正在穩步增加， 逐漸成為全球大多數飛機的強制要求。在強制要求的情況下，ADS-B 將取代初級雷達，成為空中交通管制中心使用的主要監視方法。
Flightradar24 在全球擁有一個超過 2 萬個 ADS-B 接收器的網絡，這些接收器從帶有 ADS-B 應答器的飛機接收飛行信息，并將這些信息發送到 Flightradar24 的服務器。由于使用的高頻頻率（1090 MHz），每個接收器的覆蓋范圍被限制在所有方向上大約 250-450 公里（150-250 英里），具體取決于位置。飛機飛行距離接收器越遠，它必須飛得越高才能被接收器覆蓋。因為距離的限制，使得 ADS-B 目前對海洋的覆蓋變得非常困難。
在巡航高度（30,000 英尺以上），Flightradar24 覆蓋了歐洲和美國的 100%（區域）。在加拿大、墨西哥、加勒比、委內瑞拉、哥倫比亞、厄瓜多爾、秘魯、巴西、南非、俄羅斯、中東、巴基斯坦、印度、中國、日本、泰國、馬來西亞、印度尼西亞、澳大利亞、新西蘭，ADS-B 的覆蓋和范圍也不錯。在世界其他地區，ADS-B 的覆蓋范圍各不相同。Flightradar24 正在不斷通過 FR24 接收器在世界各地增加覆蓋范圍。
MLAT
在一些覆蓋多個 FR24 接收器的 地區，Flightradar24 還使用一種到達時間差 (TDOA) 的方法，借助多點定位 (MLAT) 計算未配備 ADS-B 的飛機的位置。通過測量從使用老式
ModeS 應答器的飛機接收信號所需的時間，就可以計算出這些飛機的位置。需要 4 個或更多的 fr24 接收器，接收來自同一架飛機的信號，才能使 MLAT 工作。MLAT 的覆蓋范圍只能在大約 3,000-10,000 英尺以上實現，因為隨著高度的增加，四個或更多的接收器接收應答器信號的概率增加。
目前，歐洲和北美的大部分地區都被 3,000-10,000 英尺以上的 MLAT 覆蓋。墨西哥、巴西、南非、印度、中國、日本、泰國、馬來西亞、印度尼西亞、澳大利亞和新西蘭也有一些 MLAT 覆蓋。隨著 Flightradar24 繼續向網絡添加新的接收器，更多地區將獲得 MLAT 覆蓋。
衛星
基于衛星的航班跟蹤是 Flightradar24 尋求全球 ADS-B 覆蓋的最新舉措。配備 ADS-B 接收器的衛星從地面 ADS-B 網絡覆蓋區域之外的飛機收集數據，并將該數據發送到 Flightradar24 網絡。Flightradar24 上可用的基于衛星的 ADS-B 數據來自多個供應商。由于提供數據的衛星數量及其位置是動態的，因此衛星覆蓋范圍也各不相同。通常，基于衛星的 ADS-B 增加了無法進行地面接收的海洋上空飛行的覆蓋范圍。只有配備 ADS-B 應答器的飛機才能通過衛星被跟蹤。
估計
當一架飛機飛出覆蓋范圍時，如果航班目的地已知，Flightradar24 會持續估計飛機的位置長達 2 小時。對于沒有已知目的地的飛機，位置估計可達 10 分鐘。位置是根據許多不同的參數計算出來的，且在大多數情況下相當準確，但對于長途飛行來說，在最壞的情況下，位置可能會偏離約 100 公里 (55 英里)。在設置中有一個選項，可以設置多長時間你想看到估計的飛機在地圖上。
本教程將幫助大家使用 FlightRadar24（https://cesium.com/blog/2020/08/13/flightradar24/）收集到的雷達數據，構建自己的第一款 Cesium 應用程序，以可視化方式追蹤從舊金山到哥本哈根的真實航班。
接下來，你將學習如何：
前期準備
我們將從 Cesium ion（用于流傳輸和 3D 內容托管的開放平臺）獲取全球衛星圖像、3D 建筑與地形數據。
如果您還沒有 Cesium ion 賬戶，請點擊此處（https://cesium.com/ion/signup）免費注冊。
在登錄完成后：
轉向 Access Tokens（https://cesium.com/ion/tokens）選項卡。
請注意默認令牌（https://cesium.com/ion/signin/tokens）旁的復制按鈕，我們會在下一步操作中使用這個令牌。
Cesium ion 是一個用于流傳輸和 3D 內容托管的開放平臺，您可以使用其中提供的全球精選數據創建自己的實際應用。
1、設置 Cesium 應用
這里我們使用開源 JS 引擎 CesiumJS 創建自己的應用，同時使用在線 IDE Glitch 托管應用成果。
使用基礎模板創建一個新的 Glitch 項目（https://glitch.com/edit/#!/remix/cesium-template）。
單擊左側面板中的 index.html，查看應用程序代碼。
將 your_token_here 替換為我們從令牌頁面處獲取的訪問令牌。
點擊上方的 Show，再選擇 Next to The Code 運行應用。
到這里，index.html 中的代碼會執行三項操作：
導入 CesiumJS 庫。通過以下兩行加載 JS 和 CSS 文件：
<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">為場景添加一個 HTML 容器:
<div id="cesiumContainer"></div>.初始化查看器:
const viewer = new Cesium.Viewer('cesiumContainer');現在我們已經在瀏覽器中運行起最基礎的 CesiumJS 應用程序，其中包含來自 Cesium ion 的全球衛星圖像。
配置自動刷新
Glitch 會在每次代碼更改時，自動刷新當前頁面。您可以單擊左上角的項目名稱并取消相應勾選框，借此切換為不自動刷新：
使用應用窗口上方的刷新按鈕，即可重新運行當前應用：
2、添加全球 3D 建筑物與地形
下面，我們在場景中添加一些全局圖層。您的 Cesium ion 賬戶默認可以訪問以下資產：
Cesium World Terrain（https://cesium.com/platform/cesium-ion/content/cesium-world-terrain/）——高分辨率地形，精度可達 1 米。
Cesium OSM Building（https://cesium.com/platform/cesium-ion/content/cesium-osm-buildings/）——由 OpenStreetMap 提供超過 3.5 億座建筑物的數據。
Bing Maps Aerial Imagery——分辨率達 15 厘米的全球衛星影像。
到這里，您的應用已經用上 Bing Maps 層了。
1 在 index.html 中，使用以下代碼替換掉您的 JS 代碼，但請保留之前使用的訪問令牌行。
// Keep your `Cesium.Ion.defaultAccessToken = 'your_token_here'` line from before here.
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});2 通過單擊和拖動來探索場景。手動時按住 CTRL 鍵可以調整相機角度。
請注意，放大時會加載更多高級細節，請根據實際準確性需求選擇可視化比例。
這里我們使用的是 3D Tiles，一種能夠將內容流傳輸至任意設備的開放標準。感興趣的朋友請點擊此處（https://cesium.com/docs/tutorials/ion-intro/）了解如何將自有數據轉換為 3D Tiles。
3、可視化各單獨樣本
FlightRadar24 使用多種方法追蹤空中交通，包括雷達信號。為簡單起見，這里我們將雷達數據直接復制到應用程序當中。但大家之后也可以擴展相應代碼以解析原始數據，甚至在樣本從服務器傳遞至應用程序的過程中，對空中交通進行實時可視化。感興趣的朋友可以點擊此處（https://s3.amazonaws.com/cesiumjs/downloads/FlightRadar24_SFO_to_CPH_SK936.csv）下載航班原始數據。
1 添加以下代碼，即可對場景中的單一點位進行可視化，并引導相機前往該點。
2 點擊紅點以查看附加說明。此描述可用于附加信息，例如每個點位的確切位置或捕捉時間。
此處代碼片段過長，請查看：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/
4、要對完整雷達樣本進行可視化，請將以上代碼（第 3 步）替換為以下代碼片段。
此處代碼片段過長，請查看：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/
現在，我們已經可以看到航班的完整雷達樣本了，從登機口、跑道、一直到降落在哥本哈根機場的全過程。
我們使用的是什么坐標系？
CesiumJS 中的坐標，使用的是 ECEF 格式的 Cartesian3 類。在這套系統中，原點（0，0，0）代表地球的地心。
因此，我們才使用 Cartesian3.fromDegrees 將經度、緯度和高度轉換為 ECEF 中的 X、Y 和 Z。
CesiumJS 的高度單位為米，與 WGS84 保持一致。我們對雷達數據進行了預處理，借此將相對平均海平面高度的英尺轉換為米。
5、隨時間推移實現航班軌跡可視化
到這里，我們已經完成了對雷達樣本的可視化。CesiumJS 內置支持，允許向持續收集到的樣本間插值，因此可以看到飛機在任意給定時刻的所處位置。
我們還將創建一個 SampledPositionProperty ，用于存儲各位置及時間戳。源數據不并不包含各樣本的時間戳，但由于我們明確知道追蹤的航班編號為 SK936，計劃于太平洋標準時間 2020 年 3 月 9 日下午 4：10 起飛。這里，我們假設位置樣本的采集間隔為 30 秒。
1 在 index.html 中將所有 JS 代碼替換為以下代碼，只保留開頭確定的訪問令牌行。
2 航班動畫：
此處代碼片段過長，請查看：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/
從這趟跨大西洋航班，我們可以看到 3D 可視化為何能大大降低數據的理解難度。不過雷達樣本的連接線大多是直的，我們可以在 2D 地圖上使用常見的 Web 墨卡托投影，用曲線表示飛機的起降軌跡。
6、上傳飛機模型
最后一步，我們把飛機的 3D 模型添加到實體當中，替換掉簡陋的綠色圓圈。
1 下載飛機的 3D 模型（https://s3.amazonaws.com/cesiumjs/downloads/Cesium_Air.glb）。
2 前往賬戶儀表板，將模型文件拖進此頁面。
3 選擇 3D Model（Convert to glTF），之后點擊 Upload。
4 處理完成之后，通過在儀表板中選擇新資產并查看右側的預覽窗口，即可找到資產 ID。
7、添加飛機模型
1 刪除從以下行開始的之后所有代碼：
// STEP 4 CODE (green circle entity)2 替換為以下代碼。
3 將 your_asset_id 部分替換為你的資產 ID。
現在，我們就有了能夠跟隨飛行雷達樣本持續前進的飛機模型！如果大家有自己的 3D 模型，也可以嘗試添加到場景中。
完整代碼源過長，請查看：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/
參考鏈接：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/
https://www.flightradar24.com/how-it-works
著用戶越來越關注隱私并越來越注意防止在線跟蹤，用戶開始使用廣告攔截器和腳本攔截器來阻止JavaScript跟蹤腳本。目前，研究人員已經發現了一種新方法，利用HTML和CSS來跟蹤網站訪問者的鼠標移動，還可以繞過跟蹤保護。
大多數在線跟蹤是通過加載到網站和廣告中的JavaScript腳本完成的，這允許廣告商和網站跟蹤您上網的位置，您使用網站的方式或其他在線行為。
可以使用廣告攔截器、瀏覽器跟蹤保護（如Firefox的內容阻止）或完全阻止JavaScript來阻止這些腳本。
Firefox的內容阻止
研究人員發現了一種新方法，可在不使用任何JavaScript，僅使用HTML和CSS的情況下跟蹤網站訪問者在網頁上的鼠標移動情況，阻止這種跟蹤方式非常困難。
安全研究員Davy Wybiral在Twitter上展示了網站如何使用HTML和CSS在另一個瀏覽器窗口中觀察一個瀏覽器窗口中的鼠標移動情況。
Wybiral通過創建一個利用CSS的HTML DIV網格實現了這一點：當鼠標移動到網格上的一個框上時，hover選擇器可以請求新的背景圖像。由于圖像請求是在后臺完成的，因此瀏覽器不會顯示正在建立連接，因此所有請求對用戶來說都是隱藏的。
HTML源代碼
當用戶將鼠標懸停在某個框上并請求新的背景圖像時，該腳本將記錄鼠標懸停的位置。然后，另一個瀏覽器中的用戶可以使用/ watch URL進行實時監視。
可以利用該技術來進行多種操作，包括確定網站上的熱點以及研究用戶界面。除此之外，該技術還可用來進行動態（步態）分析以及深入了解訪客的其它行為特征。
研究人員還表示除了hover選擇器還可以利用其它選擇器來跟蹤瀏覽器行為。
其他CSS跟蹤技術
Wybiral發現的方法并不是唯一一個表明CSS和HTML可用來跟蹤網站用戶的方法。
去年發布了一個名為CrookedStyleSheets的項目，允許網站收集用戶信息，例如屏幕分辨率、正在使用的瀏覽器，用戶點擊鏈接時的信息，以及根據支持的字體推斷用戶使用的操作系統。
與Wybiral的方法一樣，這都是使用HTML和CSS完成的，沒有使用JavaScript。
本文作者：Gump，轉載自：http://www.mottoin.com/detail/3950.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
