[黑帽技术分享]浏览器回退拦截及代码实现

流光啸月 • 2020-08-14 • SEO优化

故事的开始

如果你是一个不安分的小伙子或小姑娘，半夜无人之时，你正在手机浏览器里面搜索某些不为人知的词语，看到眼花缭乱的结果，你随手点击进了一个标题非常吸引你的网站。

可怕的事情还是发生了，这个站点里面并不是你想要的内容，标题和描述都是骗人的。然后你想返回搜索结果换另一家，当你点击返回按钮的时候，神奇的一幕出现了，居然给你跳到了一个“快乐APP”的下载页面，这个页面里面有很多非常诱人的图片和十几秒的小视频。然后在冲动之下，你用颤抖的小手点击了下载按钮，经过了一段漫长的心理历程之后，你打开了这个“可能满足”你欲望的APP，然后终于看到了那些让你荷尔蒙疯狂分泌的视频，然而刚要到那个啥的时候，发现视频停止了，提示要收费。好吧，都这种时候了，已经冲昏头脑的你还是忍不住付了费……就这样一步步的沦陷…………

回退拦截

好了，回归正题，我们从这个故事里面，可以看到一种新的技术，那就是回退拦截，这个玩意是怎么做的呢？其实就是通过JavaScript监听用户的返回操作，当用户点击返回按钮的时候就会触发相应的事件。但是触发之后要如何处理那就是写代码的人的事情了。对于黑帽seo来讲基本都是进行跳转到其它的网址。

为什么要拦截

为什么要这么做呢？我们从两个方面来说明原因。

从seo角度：

搜索引擎认为，用户在某个关键词的搜索结果中，当用户进入某个网址之后，如果对里面的内容不满意的话，那么用户是会返回搜索结果继续点击其它的搜索结果或者是换个搜索词继续搜索的。如果用户对某个搜索结果比较满意，那么会一直在里面，不会回到搜索结果，或者会直接关闭搜索结果页面。那么如果很多的用户在该关键词下，都对某个特定的网址有这种“满意”的行为，那么搜索引擎就会给予这个网址比较好的排名。把它提升到前面，甚至top1。
之前被动推送js还没有实效的时候，搜索引擎也会通过这个js的推送来发现新的网址，或进行满意度调查。如果某个网址被经常推送，说明这个网址的质量是很好的，是否也会基于不错的排名？或者是否可以跳转到那些没有收录的页面进行推送？？？
好不容易来了个流量，岂能让它白白流失，帮我刷刷其它的用户数据，比如PV？PV高了，说明页面的质量也不错的哦？

从盈利角度：

黑帽seo其实最大的优势就是暴利，如果不暴利的行业是不会做的。那么好不容易来个流量，可能要最大化的利用。首先就是要跳转到转化页面.当用户不喜欢这个转化页想要返回时，再给他跳到另外的转化页。（反正广告多）
不是所有的广告都是播放器广告或类似CPA的广告，所以对于那些CPM，CPC的广告，这种跳转也同样的美滋滋。

其实利用的点还有很多，这里就不一一细说了，毕竟不是什么好的事情。

代码实现

我们来看看这些代码的实现吧，代码实现有两种方式。

第一种监听popstate事件，然后利用pushState进行事件绑定。

//封装的常规操作，跳转到其他页面
function toUrl(url){
    //首先跳回顶点，防止多次添加记录
    window.history.pushState({target:  "Final",}, "", location.href);
   location.href=url;
}

//封装的常规操作，回退到上一级
function back() {
    let backCount=history.state.target == "Final"?-3:-2;
    history.go(backCount);
}

//封装的常规操作，停留在本页面
function stay() {
    history.forward();
}
 
 
//实际的拦截操作
 !function() {
        //此处添加500毫秒延迟，目的是等待历史记录变化之后再添加空地址，使空地址能准确添加到栈顶，防止出错
        setTimeout(() => {
            if (!(history.state && history.state.target == "Final")) {
                window.history.pushState({target: "MeanSure", random: Math.random()}, "", location.href);
                window.history.pushState({target: "Final", random: Math.random()}, "", location.href);
            }
            window.addEventListener("popstate", function (e) {
                if (e.state && e.state.target == "MeanSure") {
                    //此处可调用一些自定义的操作，例如弹窗提示之类的，最后根据实际需要可调用上面三个函数中的任何一个，用于决定当前自定义操作完成之后，需要停留在本页面，还是回退，还是跳转到其他页面
                    //stay();如此操作会停留在本页面
                    //back();如此操作会无副作用回退到上一级
                    toUrl('http://www.baidu.com'); //如此操作会执行完自定义操作之后跳转到百度
                }
            }, false);
        }, 500);
}();

第二种就是监听URL的haschange事件了，代码如下：

!function doIt() {
//此处添加500毫秒延迟，目的是等待历史记录变化之后再添加空地址，使空地址能准确添加到栈顶，防止出错
        setTimeout(() => {
            if (!(location.hash && location.hash == "#Final")) {
                location.href=location.href+'#MeanSure';
                location.href=location.href+'#Final';
            }
            window.addEventListener("hashchange", function(e){
                if (location.hash && location.hash ==  "#MeanSure") {
                    doSomething();
                }
            }, false);
        }, 500);
}();

function doSomething() {
    window.location.href = "https://www.baidu.com";
}

说明：第一种方法其实是h5新出的，所以对于那些不支持H5浏览器来说，那就不是很好了。不过目前这个年代，不支持h5的浏览器几乎没人用了。

第二种方法兼容性比较好，但是会改变URL，在URL上加上锚点，对于那些原本存在锚点的页面可能会存在冲突，导致原本的锚点链接失效。

如何取舍在于个人。

顺带说下，这个百度在2016年底的时候就已经出了算法（烽火算法）进行打击了哈, 不过算法的正式上线是在17年初。所以大家要慎用，也不建议大家用了。但是可能在UC和搜狗还是有部分站点在用的。