IP摄像头图片刷新HTML代码仅本地生效 上传服务器后无法显示

核心故障原因 #

• 混合内容拦截：如果你的Hostinger站点使用HTTPS协议访问，而摄像头的图片地址是HTTP协议，现代浏览器会默认阻止HTTPS页面加载HTTP的不安全资源。本地用file://协议打开HTML时没有该限制，所以会出现本地正常、线上异常的情况，这是该场景下最常见的故障原因。
• Referer校验限制：部分IP摄像头的服务端会校验请求的Referer头，本地打开HTML时请求不会携带Referer，线上站点请求时会携带你的站点域名作为Referer，若摄像头服务端设置了非空Referer拦截，就会导致请求失败。

排查方法 #

打开Chrome开发者工具（按F12），切换到「网络」面板，刷新页面后找到对应snapshot.cgi的请求，查看请求的状态码和响应内容：

• 状态码为blocked:mixed-content：属于混合内容拦截问题
• 状态码为403：大概率是Referer校验问题
• 状态码为401：检查摄像头用户名、密码是否填写正确

解决方案 #

混合内容问题解决 #

临时方案：点击浏览器地址栏左侧的盾牌/安全提示图标，选择允许加载不安全内容，即可正常显示图片。
永久方案：建议在你的Web服务器上配置反向代理，将摄像头的快照请求代理到你站点的同域名路径下，既可以避免混合内容问题，还能隐藏摄像头的明文账号密码，安全性更高。

Referer校验问题解决 #

在img标签中添加referrerpolicy="no-referrer"属性，让请求不携带Referer头即可，修改后的代码如下：

<img src="http://sotiritsa.dyndns.org:81/cgi-bin/snapshot.cgi?cmd=snapPicture2&usr=XXXXXXX&pwd=XXXXXXXXX&t=" 
referrerpolicy="no-referrer"
onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' 
onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' 
alt='image of my city' 
title='Image of my city' />

内容的提问来源于stack exchange，提问作者John Anastasiou