img标签src为空的陷阱

http://youngae520.lofter.com/post/28e9e5_a67a8a

https://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+nczonline+(NCZOnline+-+The+Official+Web+Site+of+Nicholas+C.+Zakas)&utm_content=Google+Reader

 

把页面中的img标签的src设置为“”存在巨大的风险，无论是在html中写入

 

<img src=”" />

 

还是在js中写入

 

var img = new Image(); img.src = “”;

 

出现一次这样的标签会导致向你的服务器多做一次请求。

• 在IE中，这样做会请求一次当前页面所在的目录。如在http://playgoogle.com/demo/a.html 中出现这种空src的标签，会导致重新请求一次://playgoogle.com/demo/

 

• 在Safari 和 Chrome中，将请求当前页面本身。

 

• 在Firefox 3.5以前的版本中，有和Safari同样的问题，但是在3.5中修正了这个BUG。

 

• 在Opera 中，不会做额外的请求。

 

在一个访问量不高的网站中，多一个这样的请求也无所谓（甚至可以让你的网站浏览看上去翻番），但在一个千万级访问量甚至更高的WEB站点里，这样会导致你的服务器和带宽的成本显著增加。 另外一个隐患是，重新请求某个页面可能会导致用户的一些信息被无意中修改，例如cookies，或者ajax操作。

你永远不会写出这样的代码？ 

我并不这么认为，很多时候这种情况在无意中出现，比如下面这段php代码：

<img src="$imageUrl" > 

你原计划是从服务器端读取这个src地址，但是由于某个原因，这个地址还未设置，或者代码的BUG导致读取失败，就会出现空的src标签。

其他的标签中的空src会不会导致这样的问题？ 

好消息是，在IE中只有image标签有这个问题。坏消息是，在Chrome, Safari, 和 Firefox中<script src=""> 和<link href="">都会导致出现一个新的请求。

如何解决这个问题？ 

可以从两方面着手，一是尽量避免这种坏的编程方式，不要出现空的src标签。另外，可以从服务器端着手，在发现时这种无意义的请求时不要返回任何东西给客户端。

<?php 
    //Works for IE only when using path URLs and not file URLs 

    //get the referrer 
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : ''; 

    //current URL (assuming HTTP and default port) 
    $url = "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; 

    //make sure they're not the same 
    if ($referrer == $url){ 
        exit; 
    } 
?>