探讨Img标签403 forbidden报错

1.问题

网页中经常需要显示图片给用户看，对网站本身来说有的图片是从本地图片服务器来的，但是一旦数量多了以后，磁盘空间又是一个问题。

有时就希望显示其他网站的Image，直接把其他网站的图片显示在我的网站上。但并不是所有的外网Image 都能直接连接过来显示。

但是很多情况下网站开发人员就会遇到 403 forbidden 的问题。比如想显示来自的一张图片

本地localhost Debug的时候完全可以显示，但是将网站部署到服务器后就会遇到这样的错误

403.png

2.原因

为什么网站要做 Anti HotLinking反盗链的事情呢

• 版权的问题

• Bandwidth Theft

当用户访问IMDB 页面的时候，IMDB 需要Bandwidth 传输数据，而Bandwidth 是网站的成本之一，好比谁也不愿意陌生人偷偷的把电器插到你的插座，偷偷的用你的电，而你去负担所有的费用。

3.解决

针对web 开发人员有以下解决办法：

1. 将外网的Image在Server端下载 再转换成 base64 最后传输给img 标签

public static string ImageToBase64(Stream imageStream, ImageFormat format)
        {
            using (System.Drawing.Image image = System.Drawing.Image.FromStream(imageStream))
            {
                using (MemoryStream stream = new MemoryStream())
                {
                    image.Save(stream, format);

                    var result = System.Convert.ToBase64String(stream.ToArray());
                    return result;
                }
            }
        }

 
  
利用RefererKiller这个JavaScript插件 绕过UrlReferer 
 
  
 

ReferrerKiller.imageHtml("fakeweb/fakeimage.png"); 返回能够显示的 img 的 Html 字符串

ReferrerKiller.imageHtml("fakeweb/fakeimage.png"); 返回能够显示的 img 的 DOM 节点

 
 
其实这两个函数是同一个东西，可以捡方便的用。
 
 
这种方式解决HotLinking 问题其实原理很简单，在web中 比如:
 
 

 
 
script 标签是没有跨域访问的问题。
 ReferrerKiller 就动态生成一个iframe，并在iframe 内加入img 标签。利用src 加载的特性把代码放到src 中，就可以去掉Referer，所以：
 
 
 
  
ReferrerKiller.imageHtml
 
 
 
 
返回的是一个能显示图片的iframe
 
 
 
  
利用html中的meta标签关闭浏览器的UrlReferer 
 
 
 
 

 
 
此方法简单粗暴！
 
 
部分内容摘自： 关于img 403 forbidden的一些思考