js modify referer to solve the problem of anti-leech of pictures

 Recently, a problem encountered in the project is that the project needs to display pictures from other websites. I have found a lot on the Internet, but there is no specific code strategy. I will provide you with a solution here.

Let’s talk about the principle of anti-leech first. In the http protocol, if you jump from one webpage to another, the http header field will contain a Referer. The image server performs anti-leech by detecting whether the Referer is from a specified domain name.

If the stolen website is the protocol of https, and the image link is http, the request from https to http will not carry a referer due to security regulations, thus bypassing the anti-leech.

 

The principle of my solution is to use iframe to bypass the image anti-leech, specifically to get the image address in the page, then put the image in an iframe, then replace the new iframe to the position of the original image, and then replace the original image Picture removed, perfect solution.

The specific code is as follows:

 

<script type="text/javascript">
 $(document).ready(function() {
    //Get Class is all img in arcContent
    var imglist=$(".mainList img");
    //Or use the following sentence to get all img whose ID is divArticle
    //var imglist=$("#divArticle img");
    for(var i=0;i<imglist.length;i++){
    	if(imglist[i].getAttribute('src')){
    		url = new URL(imglist[i].getAttribute('src'));
        	var frameid = 'frameimg' + Math.random();
        	window.img = '<img id="img" width="158" height="108" src=\''+url+''+Math.random()+'\' /><script>window.onload = function() { parent.document.getElementById(\''+frameid+'\').height = document.getElementById(\'img\').height+\'px\'; }<'+'/script>';
    		$(imglist[i]).parent().empty().append('<iframe id="'+frameid+'" src="javascript:parent.img;" frameBorder="0" scrolling="no" width="158" height="108"></iframe>');
        }
    }
});
</script>