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

Question

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

我一直在使用这种嵌入式凭据方法从IP相机中检索照片。现在Google Chrome更新阻止了这个方法，我得到了以下错误：

阻止其URL包含嵌入式凭据(例如https://user:pass@host/)的弃用子资源请求。有关更多详细信息，请参阅https://www.chromestatus.com/feature/5669008342777856。

我尝试了另一种方法，在basic中使用JQuery Ajax。但我又犯了一个错误。

XMLHttpRequest无法加载example.com。对飞行前请求的响应不会通过访问控制检查:请求的资源上没有“访问-控制-允许-原产地”标题。因此，“http://example.com”源是不允许访问的。响应具有HTTP状态代码401。

我不能对Ip相机中的Web服务进行任何更改，以允许跨域请求。

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

还有什么建议/想法吗？

谢谢。

Answer 1

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

因此，您需要遵循这样的方法：

1. 安装Chrome的扩展名。
2. 通过连接用户名和密码来创建字符串，例如它们由冒号(username:password)分隔。读HTTP基本授权。
3. Base64编码刚才创建的字符串。
4. 打开ModHeader的设置面板。
5. 在请求标头部分中，添加名称为Authorization、值为Basic encoded_string的标头。用步骤3中编码的字符串替换encoded_string。请参阅下面的快照。
6. 现在，您可以直接获取您的照片，而无需在此之前使用username:password@。所以你的网址看起来有点像http://example.com/snap。

​

​

为什么要解决这个问题？

基本上，您之前所做的是在URL本身中传递授权细节。这是一个常见的场景，但显然显示了凭据，因此不是一个安全的方法。

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

但是要小心，它会拦截所有的请求。因此，只在从IP摄像机获取照片时才使用它是明智的。对于所有其他情况，请记住禁用它。