如何在 HTML 中进行基本身份验证？答案

【问题标题】：How to basic authenticate in HTML?如何在 HTML 中进行基本身份验证？
【发布时间】：2018-02-14 14:01:35
【问题描述】：

我有一个网络摄像头，我想在网页上放一张快照。如果我把它放在我的浏览器中，它会返回一个用户名和密码弹出窗口

http://CAM_IP_ADD:PORT/Streaming/Channels/1/picture

如果我输入用户名和密码，我会得到一个快照。所以我发现如果我在浏览器中输入它会返回一个快照

http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture

所以我想我会用这个创建一个简单的 HTML

<!DOCTYPE html>
<html>
<body>
    <img src="http://USERNAME:PASSWORD@CAM_IP_ADD:PORT/Streaming/Channels/1/picture">
</body>
</html>

但它不返回图像。我怎样才能对其进行身份验证以使其正常工作？

【问题讨论】：

【解决方案1】：

您的网络摄像头正在使用基本身份验证，您可以将身份验证字符串添加到 url。然而，这是一个已弃用的功能 (https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Access_using_credentials_in_the_URL)，这可能是您的网络摄像头图片未显示的原因：浏览器不再支持该格式，至少不支持图像链接。

首选的身份验证方法是通过以下格式的授权标头

Authorization: Basic [Username:Password]

[username:password] 必须是 base64 编码。有关详细信息，请参阅上面的链接。

所以一个简单的链接是行不通的，您必须设置自定义 http 标头。为此，您可以设置一个简单的 Web 服务器作为反向代理，也可以使用 javascript 发出 ajax 请求，然后将结果呈现为图像。不幸的是，这一切都不像添加一个简单的链接那么简单。

这里有一些链接可以帮助您开始使用任一选项：

带有标题的 JS 帖子

Apache 反向代理指南

您添加 url 的方式有可能适用于某些较旧的浏览器，因此您可能需要先尝试不同的浏览器，然后再采用简洁但繁琐的操作方式

【讨论】：