如何使用基本身份验证设置 <img> 标签

Posted 2023-02-19

【中文标题】如何使用基本身份验证设置 <img> 标签

【英文标题】：How to set the <img> tag with basic authentication

【发布时间】：2011-04-18 21:52:09

【问题描述】：

我想在我的网页上显示来自网络摄像机的图像，但该图像位于 HTTP 基本身份验证服务器之后。

在 Firefox 和 Chrome 中我可以这样做：

<img   src="http://username:password@server/Path" />

但在 Internet Explorer 8 中，我得到一个空的图像框。如果我使用 JQuery 来设置 src 属性，IE8 会显示一个空白的 src。看起来 IE8 正在检查字符串并拒绝它。

有没有办法将基本身份验证凭据放在 img 标签中？

【问题讨论】：

这样做会不会不安全？该标签对所有人可见。

在用户可以访问这个 html 文件之前，他必须通过一个登录页面。

我明白了，我认为它会像用户一样访问该页面，然后登录。大声笑。

你最终使用代理方法了吗？我遇到了同样的问题，我在任何地方都找不到解决方案

我刚刚遇到了这个问题。我使用user3053216's answer 解决了这个问题，我认为 Spudley 在下面建议这样做，但它提供了一个代码示例来解释如何做到这一点。

【参考方案1】：

见http://support.microsoft.com/kb/834489和http://msdn.microsoft.com/en-us/library/ie/ee330735(v=vs.85).aspx#login_creds_urls

长话短说，用户名/密码不受 HTTP/HTTPS 协议方案的正式支持，并且由于它们用于网络钓鱼攻击，它们在 XPSP2 上的 IE6 中被禁用。用户可以使用注册表覆盖 (FEATURE_HTTP_USERNAME_PASSWORD_DISABLE) 手动重新启用支持，但不建议这样做。

【参考方案2】：

最好的方法是创建一个登录页面，然后在路由器上设置端口转发以显示摄像头。相机自带网络软件吗？

【参考方案3】：

底线：并非所有浏览器都允许这样做。它可能适用于某些人，但不适用于其他人。

但正如其他人已经说过的那样，这不是很安全——您实际上是在将登录名和密码详细信息提供给浏览该页面的任何人。不好。

更好的选择是通过您提供 html 代码的同一服务器代理它，然后 <img> 标记中的 href 可能只是一个本地 URL，没有人需要知道图像在哪里实际上来自。

【讨论】：

"并非所有浏览器都允许这样做。它可能适用于某些浏览器，但不适用于其他浏览器。"你能引用你的出处吗？

@Robert - 无来源；只是经验；前段时间我也对你有过类似的挫败感，尝试了一些非常相似的事情。 :) 但是话虽如此，由于我的另一点，我可能已经过时了，因为我已经有一段时间没有真正尝试过做这种事情了；即它不是很安全。

另外，澄清一下：如果您在地址栏中输入name:password@server/path 与在链接中输入，浏览器将如何处理它会有所不同。因为涉及密码，所以浏览器的安全策略开始发挥作用。

【参考方案4】：

您可以使用 XMLHttpRequest 使用 AJAX 加载您的 img。您可能知道，XMLHttpRequest 有一个setRequestHeaders 方法，因此您将能够为您的请求操作标头，因此您将能够进行基本的 HTTP 身份验证。

【讨论】：

您可以将参数中的身份验证信息传递给open()。不幸的是，提取响应的二进制内容并将其注入页面上的图像节点并不容易。

你能举个例子吗？