前端安全相关_{ from: path.resolve(__dirname, './public/robots.t

1. 请求后端接口必须带上sign

以上主要是解决：除了数据泄露外，一些重要功能的接口如果没有做好保护措施也会被恶意调用造成DDoS、条件竞争等攻击效果

一些营销活动类的Web页面，领红包、领券、投票、抽奖等活动方式很常见。此类活动对于普通用户来说应该是“拼手气”，而对于非正常用户来说，可以通过直接刷活动API接口的这种“作弊”方式来提升“手气”。这样对普通用户来说就很不公平

2. 登录密码使用sha256加密后传给后端

首先我们先说一下为什么选择sha256，而不是Aes,md5:

对密码进行加密时，通常使用哈希函数而不是对称加密算法。因此，对密码进行加密选择SHA-256这样的哈希算法更为常见和推荐。这是因为哈希算法是单向的（不可逆），而对称加密算法是可逆的。

安全性比较：

AES加密：安全性主要依赖于密钥的保密性和密钥长度。较长的密钥长度提供更高的安全性。目前，AES-256被认为是非常安全的。

SHA-256哈希：SHA-256是一个强大的哈希算法，提供较高的抗碰撞性，即相同的哈希值几乎不可能由不同的输入产生。然而，哈希碰撞攻击的发展可能对其安全性产生一定影响。

MD5：是一种哈希函数，它生成128位（16字节）的散列值，通常以32个十六进制数字的形式表示。MD5 曾经是广泛使用的哈希算法，但由于其存在碰撞（collision）漏洞和对抗性较弱，已经不再被推荐用于安全性要求较高的场景。

前端目前主要用crypto-js来实现加解密：

Crypto-JS是一个纯JavaScript编写的密码学库，提供了许多常见的加密算法，如AES、DES、Triple DES、Rabbit、MD5、SHA-1、SHA-256等。它的目标是在浏览器中提供安全的加密算法实现。

以下是Crypto-JS的一些主要特点和用法：

1. 多种算法支持： Crypto-JS支持多种对称和哈希算法，使其成为一个全面的密码学工具库。

2. 简单易用： 它提供了简单易用的API，使得在JavaScript中使用密码学算法变得相对容易。这对于在浏览器中进行客户端加密或在Node.js环境中进行服务器端加密都很有用。

3. 模块化： Crypto-JS采用模块化设计，你可以选择性地只引入需要的模块，减小库的体积。

4. 与标准兼容： 它的API设计与Web Crypto API标准相似，这使得在各种环境下进行加密操作更加一致。

5. 容易集成： 由于是纯JavaScript实现，可以轻松地在浏览器中嵌入，也可以在Node.js环境中使用。

以下是一个简单的Crypto-JS使用示例，演示了在浏览器中使用AES加密：

// 引入 CryptoJS 库
var CryptoJS = require("crypto-js");

// 定义密钥和明文
var key = CryptoJS.enc.Utf8.parse("1234567890123456");
var plaintext = CryptoJS.enc.Utf8.parse("Hello, Crypto-JS!");

// 进行 AES 加密
var ciphertext = CryptoJS.AES.encrypt(plaintext, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
});

// 输出加密后的结果
console.log("Ciphertext: " + ciphertext.toString());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. vue.config.js中配置防爬虫文件

	{
	   from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
	   to: './' //到根目录下
	}
1
2
3
4

虽然这样能防止爬取，但我们的代码还是能被调试，接下来我们要防止调试：

1. 禁用开发者工具

监听是否打开开发者工具，若打开，则直接调用JavaScript的window.close( )方法关闭网页

① 监听F12按键、监听Ctrl+Shift+I（Windows系统）组合键、监听右键菜单，监听Ctrl+s禁止保存至本地，避免被Overrides。

<script>
 
    //监听F12、Ctrl+Shift+i、Ctrl+s
    document.onkeydown = function (event) {
        if (event.key === "F12") {
            window.close();
            window.location = "about:blank";
        } else if (event.ctrlKey && event.shiftKey && event.key === "I") {//此处I必须大写
            window.close();
            window.location = "about:blank";
        } else if (event.ctrlKey && event.key === "s") {//此处s必须小写
            event.preventDefault();
            window.close();
            window.location = "about:blank";
        }
 
    };
 
    //监听右键菜单
    document.oncontextmenu = function () {
        window.close();
        window.location = "about:blank";
    };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

② 监听窗口大小变化

<script>
 
    var h = window.innerHeight, w = window.innerWidth;
    window.onresize = function () {
        if (h !== window.innerHeight || w !== window.innerWidth) {
            window.close();
            window.location = "about:blank";
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

③ 利用Console.log

<script>
 
    //控制台打开的时候回调方法
    function consoleOpenCallback(){
        window.close();
        window.location = "about:blank";
        return "";
    }
 
    //立即运行函数，用来检测控制台是否打开
    !function () {
        // 创建一个对象
        let foo = /./;
        // 将其打印到控制台上，实际上是一个指针
        console.log(foo);
        // 要在第一次打印完之后再重写toString方法
        foo.toString = consoleOpenCallback;
    }()
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

无限debugger反调试

<script>
 
    function consoleOpenCallback() {
        window.close();
        window.location = "about:blank";
    }
 
    setInterval(function () {
        const before = new Date();
        (function(){}).constructor("debugger")();
        // debugger;
        const after = new Date();
        const cost = after.getTime() - before.getTime();
        if (cost > 100) {
            consoleOpenCallback();
        }
    }, 1000);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

好了，今天就分享到这了，觉得博主写的有帮助的麻烦点个赞！！！