关于微信公众号图片防盗链问题的解决办法

时间 2020-06-10

标签关于微信公众号图片防盗问题解决办法繁體版

原文原文链接

对于网页里引用微信公众号图片时出现的"此图片来自微信公众平台, 未经容许不可引用"的问题, 能搜索到的解决方案很少, 除去已经被和谐掉的, 大概能够分为两种:javascript

第一种, 更改图片src, 例如html

options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;

　　但这种加跳板的方式受制于跳板的状态, 若是cores-anywhere.herokuapp.com中止服务了, 那么图片仍是不能显示出来. 因此这种方法不予考虑.java

第二种, 嵌套iframe微信

　　这里参考了http://www.javashuo.com/article/p-neazsssn-kc.html 的解决方案, 可是这种方案并不能解决网页里有多张图片的状况, 会致使只有最后一张图片能正常显示. app

　　不过既然第一步已经成功了, 后面就简单多了. 微信公众平台

　　研究一下代码, 发现他给父页面window赋予了一个img属性, 而后把这个img显示进全部iframe里, 那我给每张图片都赋予一个不一样的属性不就好了?cors

$(function () {
            $(".xiangxi img").each(function (index, element) {
                var img = $(this);
                var img_src = img.attr("src");
                if (img_src.indexOf("wxfrom") != -1) {
                    var frameid = 'frameimg' + Math.random();
                    var atr = "wximg" + frameid;
                    var imgcode = '<img id="' + atr + '" src=\'' + img_src + '?' + Math.random() + '\' /><script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'' + atr + '\').height+\'px\'; }<' + '/script>';
                    window.attr(atr, imgcode);
                    img.parent().append('<iframe id="' + frameid + '" src="javascript:parent.' + atr + ';" frameBorder="0" scrolling="no" width="100%"></iframe>');
                    img.remove();
                }
            });
        })

　　Ok, 解决!dom