前端杂谈 · Web

防止扒站之反向注入恶意代码思路

小编 · 4月24日 · 2020年 ·

最近公司遭遇竞争对手大规模扒站、仿页面模版,领导让博主想办法阻止这种事情。。。博主眉头一皱,计上心来。下面开始详细说说思路,嘿嘿。

防止扒站之反向注入恶意代码思路

思路

我们知道前端页面很容易被别人扒走,既然我们不能阻止这种行为,那么我们可以在代码中预留”后门”,与被扒的代码建立通信,远程操控代码,来恶心扒站的家伙。别看我说的很牛皮,其实逻辑思路与实现方式很简单。

步骤一

我们可以把所有页面结构代码写在JS文件中,就像这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- 一些css文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    ...

    <!-- 一些JS文件 -->
	  <script src="vue.js"></script>
    ...

    <!-- 页面结构代码写在此JS文件中 -->
    <script src="html.js"></script>
</head>

<body>
    <!-- 啥都不写-->
</body>

</html>

步骤二

好了,重点就在这个JS文件里,我们可以通过document.write(` … `) 函数以及ECMA6的新特性,写入大量页面结构代码:

document.write(`<div class="app">
 ...
 <h3>...</h3>
 <p>...</p>
 ...
<div>`);

注意document.write(` … `)写入的JS代码中,如果再次有` `符号,请用文件形式引入,比如:

document.write(`<div class="app">
 ...
 <script type="text/javascript" src="js/app.js"></script>
 ...
<div>`);

/**   以下代码报错  **/

document.write(`<div class="app">
 ...
 <script>
        //渲染html
        function innerHTMl(List) {
            List = List || []
            List.forEach(item => {
                let str =
                    `<h3>...</h3>              //报错
                     <p>...</p>`               //报错
                $(".msgCon").prepend(str);
            })
        }
 </script>
 ...
<div>`);

步骤三

页面结构代码应该没问题了,接下来放“后门”代码,其实也不算后门。我们可以根据当前时间来控制页面上显示哪些内容,比如说:在晚上20点到23点这个时间段,显示我们埋下的预设代码:

var myDate = new Date();//创建时间对象
... 

//如果当前时间大于等于20点,并且小于等于23点,那么浏览器渲染以下代码
if(myDate.getHours() >= 20点 && myDate.getHours() <= 23点 ){  

    document.write('<h3 style="text-align: center;display:block">当前时间小于设置时间</h3>');

}else{  //否则渲染以下代码
    document.write('<h3 style="text-align: center;display:block">当前时间大于设置时间</h3>');
}

我们还可以判断一下当前网页的地址,如果跟我们自己目录绑定的域名组不匹配的话,那么根据后台设置特定的时间段,修改页面结构的中的参数

//获取当前网页域名   如: www.zsxcool.com
var href = window.location.hostname;

//如果当前域名,不等于我们自己目录绑定的域名
if(href=='www.xxx.com' || href=='www.xxx.com'){
}else if(myDate.getHours()>=time && myDate.getHours()<=timeend){
    $.ajaxSetup({
        async: false
    });
    $.post('http://www.xxx.com/xxx.php', {
        wx: '10',
    }, function(date) { //从数据库获取数据
        //处理获取到的数据
        mess2 = date;
    });
}

这里的20点,23点是发送ajax请求得到的数值,我们可以在后台控制

防止扒站之反向注入恶意代码思路-字节智造

发送ajax请求示例代码

var startTime=""; //预设开始时间段变量
var endTime="";  //预设结束时间段变量

var myDate = new Date();  //创建时间对象

$.ajaxSetup({    
    async: false
});
$.post('请求地址1', {}, function(date) { //获取开始时间段数据
    //处理获取到的数据
    startTime = date;
});

$.ajaxSetup({
    async: false
});
$.post('请求地址2', {}, function(date) { //获取结束时间段数据
    //处理获取到的数据
    endTime= date;
});

if(myDate.getHours() >= startTime && myDate.getHours() <= endTime){  //判断时间段逻辑
    document.write('<h3 style="text-align: center;display:block">特定时间段显示的代码</h3>');
}else{
    document.write('<h3 style="text-align: center;display:block">其他时间显示的代码</h3>');
}

我们在把以上代码特定位置加密,你们有想到什么吗?可以试想一下:当竞争对手扒掉你的网站,修修改改html结构之后,美滋滋的开始上线推广啦,这个时候,你在后台改一下if判断的时间段,上线的推广页面瞬间显示我们预设的代码,竞争对手可能在浑然不知中帮我们免费推广哦~~ 哼!叫你扒的我代码!

无形代码,最为致命

0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!