提醒：本文最後更新於 1037 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

本部落格之前的《畫素化你的程式碼》文章中，我介紹了一種將文字生成圖片的方法，還提供了一個 Encode/Decode 工具。在那篇文章中，我寫到「這又是一個除了好玩並沒什麼卵用的東西」，確實如此。不過，我今天想到一個用圖片傳遞資料的另類應用場景，分享給大家。

在 Android 系統中，很多 App 為了在網頁裡實現一些客戶端的功能，往往會在客戶端開啟一個本地 HTTP 服務。通過在網頁中呼叫這個服務的不同介面，可以輕鬆實現原本無法實現的功能。本文不討論這種做法本身，只說存在的問題：隨著越來越多 Web 產品升級到 HTTPS，通過 JSONP 或 XHR2 與 HTTP 服務互動就行不通了。

現代瀏覽器（Chrome、Firefox、Safari、Microsoft Edge），基本上都遵守了 W3C 的 Mixed Content 規範，將 Mixed Content 分為 Optionally-blockable 和 Blockable 兩類：

Optionally-blockable 類 Mixed Content 包含那些危險較小，即使被中間人篡改也無大礙的資源。現代瀏覽器預設會載入這類資源，同時會在控制檯列印警告資訊。這類資源包括：

• 通過 <img> 標籤載入的圖片（包括 SVG 圖片）；
• 通過 <video> / <audio> 和 <source>
  標籤載入的視訊或音訊；
• 預讀的（Prefetched）資源；

除此之外所有的 Mixed Content 都是 Blockable，瀏覽器必須禁止載入這類資源。所以現代瀏覽器中，對於 HTTPS 頁面中的 JavaScript、CSS 等 HTTP 資源，一律不載入，直接在控制檯列印錯誤資訊。

Android 各版本的 Chrome，Android 5+ 的 Webview 都遵守了 Mixed Content 規範。也就是說除非將本地 HTTP 服務升級為 HTTPS，否則在 HTTPS 網頁中通過 JSONP 或 XHR2 呼叫本地服務，預設都會被阻止。就像這樣：

而且，這個問題解決起來並不容易：

• 本地 HTTP 服務目的是為了在不可控瀏覽器中實現一些特定功能（可控瀏覽器直接注入 JS 介面即可），也就意味著無法通過修改瀏覽器安全設定繞過這個問題；
• 本地 HTTP 服務使用的是本地 IP（如 127.0.0.1），無法通過 CA 申請合法證書；
• 如果自己簽發證書，需要 root 許可權修改系統受信任證書列表，否則不被信任照樣會被攔截；
• 使用解析到本地 IP 的公開域名，可以解決證書合法性問題，但這麼做需要把證書私鑰內建在客戶端，風險很大；
• 這個問題也無法通過服務端代理中轉來解決；

那麼，有沒有其它資料互動方案可以繞過 Mixed Content 限制呢？顯然，圖片類 HTTP 資源屬於 Optionally-blockable 類 Mixed Content，現代瀏覽器預設不阻止他們載入，只會在控制檯列印警告，位址列不顯示小綠鎖而已，可以好好利用。

所以，網頁端單向通知 App，不需要拿返回值時，直接把本地介面請求改用 Image 傳送即可。

如果需要返回值，那就可以用我之前的方案將文字編為圖片，成功載入後解碼圖片即可還原內容。這裡要注意一點：給圖片響應配置 CORS 頭之後（並且在請求圖片時加上 img.crossOrigin = '*'），才能在 Canvas 中讀到它的畫素點資料。

原理差不多就是這些，下面是一個例子（使用閱讀器的同學請點到原文檢視）：

點選獲取本機 IP 資訊

這個例子演示瞭如何通過圖片在 HTTPS 網站中獲取 HTTP 介面資料，用到了 Canvas。實際上，如果返回值可列舉，連 Canvas 也可以省了 —— 介面直接返回寬 1px，高 npx 的圖片，JS 獲取圖片高度即可知道返回值。

--EOF--

發表於 2016-03-10 00:38:48 ，並被新增「 Canvas 、 HTTPS 」標籤 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 1037 天前，文中所描述的資訊可能已發生改變，請謹慎使用。