1.问题

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

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

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

1
<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 开发人员有以下解决办法：

  1. 将外网的Image在Server端下载 再转换成 base64 最后传输给img 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
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;
                }
            }
        }
1
<img src="data:image/png;base64,这里存放转换成base64的字符串 />
  1. 利用RefererKiller这个JavaScript插件 绕过UrlReferer
1
2
3
4
5

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

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

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

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

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

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

ReferrerKiller.imageHtml

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

  1. 利用html中的meta标签关闭浏览器的UrlReferer
1
<meta name="referrer" content="no-referrer">

此方法简单粗暴！

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