Chrome開發人員工具詳解 (5)：Application、Security、Audits面板

標籤：網路通訊協定   體系   work   dbr   目標   加密   攻擊   lock   man   

Application面板簡介

 

該面板主要是記錄網站載入的所有資源資訊，包括儲存資料（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、快取資料、字型、圖片、指令碼、樣式表等。

 

 

這個面板跟前前面幾道硬菜（Network面板、Timeline面板、Profiles面板）比起來簡單多了，這裡就稍微作一下介紹：

 

• Local Storage 如果你在開發過程中使用了local storage來儲存索引值對(KVPs)，那麼你就可以通過Local Storage窗格來檢查、新增、修改、刪除這個索引值對。

• Application Cache 你可以使用Application Cache窗格去查看通過Application Cache API建立的資源。

• Frames 將頁面上的資源按frame類別進行組織顯示。

 

Frames窗格

 

在中可以查看到頂級的top是一個主文件，在top下面是主文件的Fonts、Images、Scripts、Stylesheets等資源。最後一個就是主檔案自身。

 

在資源上右擊後在快顯功能表選擇Reveal in Network Panel，就會跳轉到Network面板並定位到該資源的位置。

 

 

你也可以在Sources面板裡面按frame類別來查看資源資訊。

 

Security面板簡介

 

通過該面板你可以去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。

 

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全為目標的HTTP通道，簡單講是HTTP的安全版。即HTTP下加入SSL層，HTTPS的安全基礎是SSL，因此加密的詳細內容就需要SSL。 它是一個URI scheme（抽象標識符體系），句法類同http:體系。用於安全的HTTP資料轉送。https:URL表明它使用了HTTP，但HTTPS存在不同於HTTP的預設連接埠及一個加密/身分識別驗證層（在HTTP與TCP之間）。 > HTTPS和HTTP的區別主要為以下四點： > ① https協議需要到CA申請認證，一般免費認證很少，需要交費。 > ② http是超文字傳輸通訊協定 (HTTP)，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。 > ③ http和https使用的是完全不同的串連方式，用的連接埠也不一樣，前者是80，後者是443。 > ④ http的串連很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路通訊協定，比http協議安全。

 

如果網頁是安全的，則會顯示這樣一條訊息：This page is secure (valid HTTPS).。

 

 

通過點擊View certificate可以查看main origin的伺服器憑證資訊。 點擊左側可以查看指定源的串連和認證詳情。

 

 

 

如果網頁是不安全的，則會顯示：This page is not secure.。

 

 

該面板可以區分兩種類型的不安全的頁面：

 

• 如果被請求的頁面通過HTTP提供服務，那麼這個主源就會被標記為不安全。

• 如果被請求的頁面是通過HTTPS擷取的，但這個頁面接著通過HTTP繼續從其他來源檢索內容，那麼這個頁面仍然被標記為不安全。這就是所謂的混合內容頁面,混合內容頁面只是部分受到保護,因為HTTP內容(非加密的內容)可以被嗅探者入侵,容易受到中間人攻擊。

 

點擊左側則提供一個跳轉到Network面板視圖的連結資訊。

 

中間人攻擊(Man-in-the-Middle Attack,”MITM攻擊”)是一種“間接”的入侵攻擊，這種攻擊模式是通過各種技術手段將受入侵者控制的一台電腦虛擬放置在網路連接中的兩台通訊電腦之間，這台電腦就稱為“中間人”。

 

Audits面板簡介

 

對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些最佳化建議。比如列出所有沒有用到的CSS檔案等。

 

 

選中Network Utilization、Web Page Performance，點擊Run按鈕，將會對當前頁面進行網路利用率和頁面的效能最佳化作出診斷，並給出相應的最佳化建議。

 

 

伯樂線上專欄作者 - CharlieChu

原文地址：https://mp.weixin.qq.com/s/xVp3BkVyncWS6qOGn0XFOw

Chrome開發人員工具詳解 (5)：Application、Security、Audits面板