关于img 403 forbidden的一些思考

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

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

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

<img src="http://ia.media-imdb.com/images/M/MV5BMjIwMjYyNjk4Nl5BMl5BanBnXkFtZTcwNzA4NDYwMw@@._V1_UY317_CR12,0,214,317_AL_.jpg" height="350" width="200">

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

奇怪的是通过浏览器访问图片的连接，图片就正常的显示了出来。

这又是为什么？其实Referer是由浏览器自动加上的，但是也有例外比如

1. 直接通过浏览器访问

2. 在web前段使用location.href 或者location.replace

3. 利用HTTPS等加密协议

这就是HotLinking 盗链问题, 可以通过配置网站Server 端来实现这种反盗链的行为。

为什么像IMDB这样的网站要做 Anti HotLinking反盗链的事情呢？

版权的问题是一方面。

另一方面可以称作Bandwidth Theft，当用户访问IMDB页面的时候，IMDB需要Bandwidth传输数据，而Bandwidth 是网站的成本之一。

好比谁也不愿意陌生人偷偷的把电器插到你的插座，偷偷的用你的电，而你去负担所有的费用。

如何配置Server实现Anti HotLinking 呢？

以Asp.net MVC 为例

可以给Controller 添加ActionFilter 或者添加处理AntiHotLinking 的 IHttpHandler

核心都是UrlReferrer

HttpRequest 有个字段 UrlReferrer:

该字段表示哪个Url 通过像上面Img Src的方式访问了Server.

//访问者的域

var refDomain = Request.UrlReferrer.Host;

//当前WebSite的域

var serverDomain = Request.Url.Host;

最后可以通过判断是否来自同一个域来决定Anti HotLinking的策略

或者可以通过在web.config 中配置URLRewrite来实现

<rewrite>

<rules>

  <rule name="Anti HotLinking Rule for Image" enabled="true" stopProcessing="true">

  <match url=".*\.(gif|jpg|png)$" />

  <conditions>

    <add input="{HTTP_REFERER}" negate="true" pattern="^$" />

    <add input="{HTTP_REFERER}" negate="true" pattern="http://www.yourwebsite.com/.*" />

    <add input="{HTTP_REFERER}" negate="true" pattern="http://yourwebsite.com/.*" />

  </conditions>

  <action type="Rewrite" url="/images/anti-hotlinking.png" />

</rule>

</rules>

</rewrite>

如果网站用户就是希望看到不能显示的图片或者视频呢？

这里给大家推荐一个Chrome 插件 Anti-Anti-HotLinking

安装后就能看到未能显示的图片。

对该插件我没有仔细研究，有可能是通过Download来解决Hotlinking 问题的，也有可能是通过Chrome劫持Request 修改UrlReferer实现的。

对网站开发人员有什么解决办法吗？

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;

                }

            }

        }

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

2. 利用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>

　　加载js 是没有跨域访问的问题。

　　ReferrerKiller 就动态生成一个iframe，并在iframe内加入img标签。利用src加载的特性把代码放到src中，就可以去掉Referer。

　　所以ReferrerKiller.imageHtml返回的是一个能显示图片的iframe。