最近公司遭遇竞争对手大规模扒站、仿页面模版，领导让博主想办法阻止这种事情。。。博主眉头一皱，计上心来。下面开始详细说说思路，嘿嘿。
思路
我们知道前端页面很容易被别人扒走，既然我们不能阻止这种行为，那么我们可以在代码中预留”后门”，与被扒的代码建立通信，远程操控代码，来恶心扒站的家伙。别看我说的很牛皮，其实逻辑思路与实现方式很简单。
步骤一
我们可以把所有页面结构代码写在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判断的时间段，上线的推广页面瞬间显示我们预设的代码，竞争对手可能在浑然不知中帮我们免费推广哦~~ 哼！叫你扒的我代码！
无形代码，最为致命
必须 注册 为本站用户， 登录 后才可以发表评论！