不少网站都对图片等静态内容开启防盗链,尤其是CDN加速后。然而,Firefox对CSS背景图片的处理同IE、Chrome是不同的。CSS背景图片对于Firefox的Referer是CSS本身,而IE和Chrome的Referer是图片本身地址。如果防盗链白名单没有加入CSS所在域名地址,则在Firefox中会加载失效。
CSS背景图片的Referer
HTTP referer主要是告知服务器,这个url请求是从哪里来的。这符合防盗链的判断机制。
CSS背景图片对于Firefox的Referer是CSS本身,而IE和Chrome的Referer是图片本身地址。
比如:
CSS(http://cdn.enkoo.net/style.css)中有这样定义
background: url(“http://img.enkoo.net/test.png”)
浏览器在加载test.png时的请求分别为:
- Firefox——Referer——http://cdn.enkoo.net/style.css
- IE和Chrome——Referer——http://img.enkoo.net
如果img.enkoo.net的防盗链白名单没有加入cdn.enkoo.net,则在Firefox中test.png不能正常加载,显示“403 Forbidden”。
使用第三方域名保存静态资源发生这种冲突的可能性更大,比如外链相册,CDN缓存(未绑定域名)等。