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

Posted 2023-03-04

【中文标题】阻止 URL 包含嵌入凭据的子资源请求的解决方案

【英文标题】：Solution to Subresource requests whose URLs contain embedded credentials are blocked

【发布时间】：2017-12-19 05:17:08

【问题描述】：

http://username:[e-mail]/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 服务进行任何更改以允许跨域请求。

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

还有什么建议/想法吗？

谢谢。

【问题讨论】：

我想详细了解一下，您之前是如何获取照片的？请用这些更新您的问题。

嗨，更新了一个例子

以下链接中提供的答案可能会对您有所帮助... ***.com/a/7190487/3548578

我想您是在问如何解决跨站点请求阻止问题，而无需在相关服务器中明确允许它。您找到的任何解决方案都将是一个安全漏洞（迟早会被浏览器开发人员关闭）。

【参考方案1】：

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

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

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

为什么它可以解决问题？

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

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

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

【讨论】：

对不起，我需要非特定于浏览器的解决方案，而且，教育客户安装此扩展是不可能的。感谢您的解决方案。我学到了一些东西:)

@user3162662 -- 我想了解更多关于从 IP 摄像机获取这些照片的代码。也许我也可以帮忙。请在您的问题本身中详细分享特定代码。没有它，任何人都无法为这个问题提供绝对的解决方案。