利用圖片傳輸數據的另類思路_html/css

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

下面這幾段直接摘自我的《 關于啟用 HTTPS 的一些經驗分享（一）》這篇文章：

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

Optionally-blockable類 Mixed Content 包含那些危險較小，即使被中間人篡改也無大礙的資源。現代瀏覽器默認會加載這類資源，同時會在控制臺打印警告信息。這類資源包括：

通過 標簽加載的圖片（包括 SVG 圖片）；

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

也就是說對于移動端瀏覽器，除非將本地 HTTP 服務升級為 HTTPS，否則在 HTTPS 網頁中創建 script 標簽或者發送 XHR2 請求調用本地服務，默認都會被阻止。

那么，有沒有其它數據交互方案可以繞過 Mixed Content 限制呢？顯然，圖片類 HTTP 資源屬于 Optionally-blockable類 Mixed Content，現代瀏覽器默認不阻止他們加載，只會在控制臺打印警告，地址欄不顯示小綠鎖而已，可以好好利用。

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

如果需要返回值，那就可以用我之前的方案將文本編為圖片，成功加載后解碼圖片即可還原內容。這里要注意一點：給圖片響應配置 CORS 頭之后，才能在 Canvas 中讀到它的像素點數據。

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

這個例子演示了如何通過圖片在 HTTPS 網站中獲取 HTTP 接口數據，用到了 Canvas。實際上，如果返回值可枚舉，連 Canvas 也可以省了 —— 服務端直接生成寬 1px，高 npx 的圖片，JS 獲取圖片高度即可知道返回值。

https://imququ.com/post/use-image-to-transfer-data.html， 參與評論。

-- EOF--

發表于 2016-03-10 00:38:48，并被添加「canvas、HTTPS」標簽。

本站部署于「 阿里云 ECS」。如果你也要購買阿里云服務，可以使用我的九折推薦碼 NY1Z0E （限新用戶），多謝支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com