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

Question

  

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

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

  

[弃用]其网址包含嵌入凭据（例如https://user:pass@host/）的子资源请求被阻止。有关详细信息，请参阅https://www.chromestatus.com/feature/5669008342777856。

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

  

XMLHttpRequest无法加载example.com。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://example.com”访问。响应的HTTP状态代码为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摄像机获取照片时使用它。对于所有其他情况，请记住禁用它。