解決方案子網元包含嵌入憑據的URL請求被阻止

Question

http://username:password@domain.com/snap

我一直在使用這種嵌入式憑證方法從IP攝像機檢索照片。現在，谷歌Chrome瀏覽器更新阻止這種方法，我得到這個錯誤：

[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass@host/) are blocked. See https://www.chromestatus.com/feature/5669008342777856 for more details.

我嘗試另一種方法，使用JQuery Ajax和基本身份驗證。但我得到另一個錯誤。

XMLHttpRequest cannot load example.com. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://example.com ' is therefore not allowed access. The response had HTTP status code 401.

我無法對IP攝像頭中的Web服務進行任何更改以允許跨域請求。

看起來我只剩下1個選項，即從服務器端檢索圖像並將其提供給瀏覽器？但是這會浪費我的服務器帶寬。

更多建議/想法？

謝謝。

Answer 1

做到這一點的一種方法是使用請求攔截器，如ModHeader。它可以作爲Chrome的擴展來安裝，並且具有解決您的問題的必要功能。

所以你需要遵循這個方法：

1. 安裝Chrome網上應用店的擴展。
2. 通過連接用戶名和密碼來創建一個字符串，例如用冒號分隔（username:password）。閱讀HTTP Basic Authorization。
3. Base64 Encode您剛創建的字符串。
4. 打開ModHeader的設置面板。
5. 在請求標頭部分中，添加名爲Authorization的標頭，值爲Basic encoded_string。將encoded_string替換爲您在步驟3中編碼的字符串。請參閱下面的快照。
6. 現在，您可以直接抓取您的照片，而不必在username:password@之前。所以你的網址看起來像http://example.com/snap。

爲什麼會解決這個問題？

基本上你之前做的是在URL本身傳遞授權細節。這是一種常見的情況，但很明顯顯示憑證，因此不是一種安全的方法。

幸運的是，使用Authorization標頭也可以做同樣的事情。您只需要以編碼形式傳遞憑據。 ModHeader爲你做到這一點。它攔截瀏覽器的每個請求並在其中添加此標頭。

但要小心，它攔截所有請求。因此，建議僅在從IP攝像機獲取照片時使用它。對於所有其他情況，請記住禁用它。