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

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

思路

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

步骤一

我们可以把所有页面结构代码写在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判断的时间段，上线的推广页面瞬间显示我们预设的代码，竞争对手可能在浑然不知中帮我们免费推广哦~~ 哼！叫你扒的我代码！

无形代码，最为致命

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

思路

步骤一

步骤二

步骤三

在网页字体加载期间所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

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

思路

步骤一

步骤二

步骤三

在网页字体加载期间 所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

在网页字体加载期间所有文本都保持可见状态