前端安全相关

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

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

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

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

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

sha256Aes对称加密算法哈希算法不可逆性可逆性不需要存储密钥需要存储密钥
对密码进行加密时，通常使用哈希函数而不是对称加密算法。因此，对密码进行加密选择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. vue.config.js中配置防爬虫文件

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

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

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";}elseif(event.ctrlKey && event.shiftKey && event.key ==="I"){//此处I必须大写
            window.close();
            window.location ="about:blank";}elseif(event.ctrlKey && event.key ==="s"){//此处s必须小写
            event.preventDefault();
            window.close();
            window.location ="about:blank";}};//监听右键菜单
    document.oncontextmenu=function(){
        window.close();
        window.location ="about:blank";};</script>

② 监听窗口大小变化

<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>

③ 利用Console.log

<script>//控制台打开的时候回调方法functionconsoleOpenCallback(){
        window.close();
        window.location ="about:blank";return"";}//立即运行函数，用来检测控制台是否打开!function(){// 创建一个对象let foo =/./;// 将其打印到控制台上，实际上是一个指针
        console.log(foo);// 要在第一次打印完之后再重写toString方法
        foo.toString = consoleOpenCallback;}()</script>

无限debugger反调试

<script>functionconsoleOpenCallback(){
        window.close();
        window.location ="about:blank";}setInterval(function(){const before =newDate();(function(){}).constructor("debugger")();// debugger;const after =newDate();const cost = after.getTime()- before.getTime();if(cost >100){consoleOpenCallback();}},1000);</script>

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