震驚！網頁內容變成了天書！
- 2019 年 12 月 19 日
- 筆記
前言
小編前段時間遇到一個問題，使用瀏覽器打開某域名網頁的小說閱讀器，閱讀器正文內容顯示為亂碼。 經排查定位發現，該問題是由於小說原網頁改版後對原網頁HTML內容解碼失敗引起的。 那麼常見的網頁相關編碼基本邏輯及測試點都有哪些呢？
網頁相關編碼
常見的web網頁編碼的基本邏輯有：
1、URL編碼；
2、HTML源碼內容編碼。
1、URL編碼
URL 是統一資源定位器，是用來引導指向對應的網絡資源的，狹義來說查詢字符串並不是 URL 的一部分，URL 是由協議、域名、端口和 URI 組成的。URI 是統一資源標識符，是用來引導指向某站點的服務資源的。
URL=protocol+domain+port+URI
RFC 1738(Uniform Resource Locators (URL))規定 URL 只能包含英文字母、阿拉伯數字和某些標點符號，這要求在 URL 中使用非英文字符的話必須編碼後使用。如果瀏覽器在編碼URL和查詢參數時使用的編碼方式不一致，或者不同瀏覽器使用的URL編碼機制不一致，就會導致無法正常解析。
2、HTML源碼編碼
當用瀏覽器打開某個URL網站查看網頁內容時，之所以可以正常看到網頁的內容，這一過程涉及到HTML網頁源碼的解碼處理。
在解析HTML源碼內容時，瀏覽器需要識別HTML源碼對應的編碼方式，從而根據此字符編碼類型，解碼對應的HTML內容，顯示對應的文字，以保證不會顯示亂碼。
常見的HTML網頁源碼的編碼方式有GBK、UTF-8、ISO8859-1，關於這三種編碼方式的原理及規則介紹，在這裡就不做贅述了，感興趣的同學可以打開的鏈接了解https://www.crifan.com/files/doc/docbook/char_encoding/release/html/char_encoding.html
HTML源碼編碼
HTML源碼編碼類型的查看方式 1、response.header 在訪問網頁URL時，通過查看請求的response可以知曉其HTML源碼的編碼類型，具體查看response.headers中content-type的charset字段值。例如，通過fiddler看到某一網站的response，我們可以看出其編碼類型為UTF-8。
如果headers中content-type無charset字段，只content-type：text/html，根據RFC2016的規定，認為採用的是默認的ISO-8859-1。 2、網頁源代碼 網頁源代碼中head的meta中會有charset的參數值，可以用來判斷網頁的編碼類型。
HTML源碼編碼類型的測試 針對HTML源碼內容的編碼類型的測試，重點關注點是對不同的編碼類型的網頁，是否可以正常的解析其編碼類型，並可以正確解碼顯示對應的HTML內容。
備註：在實際測試中發現，有的網頁HTML中不同段落的charset字段值（編碼類型）不一致，可能會導致瀏覽器解析編碼類型時錯誤，影響網頁內容的正常展示。
結語
作為APP端的軟件測試人員，小編認為在提高測試能力的過程中，需要不斷學習積累前端、客戶端、後端等的常見基本概念及原理，如Android開發基本術語-webview、activity，https傳輸原理等。所謂知己知彼，百戰不殆。 參考文章： 1.https://www.ibm.com/developerworks/cn/web/wa-lo-ecoding-response-problem/index.html; 2.https://www.crifan.com/summary_explain_what_is_html_charset_and_common_value_of_gb2312_gbk_utf_8_iso8859_1/; 3.https://juejin.im/post/5a6946846fb9a01ca267acd1;
