探讨Img标签403 forbidden报错

1.问题

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

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

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

<img src="https://upload-images.jianshu.io/upload_images/15521290-b56cd3b1bc721cf9.png">

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

403.png

2.原因

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

版权的问题
Bandwidth Theft

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

3.解决

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

将外网的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;
                }
            }
        }

<img src="data:image/png;base64,这里存放转换成base64的字符串 />

利用RefererKiller这个JavaScript插件绕过UrlReferer


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

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

其实这两个函数是同一个东西，可以捡方便的用。

这种方式解决HotLinking 问题其实原理很简单，在web中比如:

<script src="differentDomain/fake.js"> </script>

script 标签是没有跨域访问的问题。
ReferrerKiller 就动态生成一个iframe，并在iframe 内加入img 标签。利用src 加载的特性把代码放到src 中，就可以去掉Referer，所以：

ReferrerKiller.imageHtml

返回的是一个能显示图片的iframe

利用html中的meta标签关闭浏览器的UrlReferer

<meta name="referrer" content="no-referrer" />

此方法简单粗暴！

部分内容摘自：关于img 403 forbidden的一些思考

最后编辑于：2019.11.07 16:58:26