阻止 URL 包含嵌入凭据的子资源请求的解决方案

Question

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

我一直在使用这种嵌入式凭据方法从 IP 摄像机中检索照片。现在谷歌浏览器更新阻止了这个方法，我得到了这个错误：

[弃用] URL 包含嵌入式凭据（例如https://user:pass@host/）的子资源请求将被阻止。详情请见https://www.chromestatus.com/feature/5669008342777856。

我尝试了另一种方法，使用带有基本身份验证的 JQuery Ajax。但我得到了另一个错误。

XMLHttpRequest 无法加载 example.com。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://example.com' 不允许访问。响应的 HTTP 状态代码为 401。

我无法对网络摄像机中的 Web 服务进行任何更改以允许跨域请求。

看起来我只剩下一个选项，即从服务器端检索图像，并将其提供给浏览器？但这会浪费我的服务器带宽。

还有什么建议/想法吗？

谢谢。

Answer 1

一种方法是使用请求拦截器，例如ModHeader。它可以作为 Chrome 的扩展安装，并且具有解决您的问题的必要功能。

所以你需要遵循这个方法：

1. 从 Chrome 网上应用店安装扩展程序。
2. 通过连接您的用户名和密码来创建一个字符串，例如它们用冒号分隔 (username:password)。阅读HTTP Basic Authorization。
3. Base64 Encode 刚刚创建的字符串。
4. 打开 ModHeader 的设置面板。
5. 在 Request Headers 部分中，添加名称为 Authorization 且值为 Basic encoded_string 的标头。将 encoded_string 替换为您在第 3 步中编码的字符串。请参阅下面的快照。
6. 现在您可以直接获取您的照片，而无需在其前面加上username:password@。因此，您的 URL 将类似于 http://example.com/snap。

为什么它可以解决问题？

您之前所做的基本上是在 URL 本身中传递授权详细信息。这是一种常见的情况，但显然会泄露凭据，因此不是一种安全的方法。

幸运的是，同样的事情也可以使用Authorization 标头来完成。您只需要以编码形式传递凭据。 ModHeader 为您做到这一点。它拦截浏览器的每个请求并在其中附加此标头。

但请注意，它会拦截所有请求。因此，建议您仅在从 IP 摄像机获取照片时使用它。对于所有其他情况，请记住禁用它。