前端安全相干

• 请求后端接口必须带上sign
  

以上主要是解决：除了数据泄漏外，一些重要功能的接口如果没有做好保护步调也会被恶意调用造成DDoS、条件竞争等攻击结果
一些营销运动类的Web页面，领红包、领券、投票、抽奖等运动方式很常见。此类运动对于普通用户来说应该是“拼手气”，而对于非正常用户来说，可以通过直接刷运动API接口的这种“作弊”方式来提拔“手气”。如许对普通用户来说就很不公平

• 登录密码使用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的一些主要特点和用法：

• 多种算法支持： Crypto-JS支持多种对称和哈希算法，使其成为一个全面的密码学工具库。
  
• 简朴易用： 它提供了简朴易用的API，使得在JavaScript中使用密码学算法变得相对容易。这对于在浏览器中举行客户端加密或在Node.js环境中举行服务器端加密都很有用。
  
• 模块化： Crypto-JS采用模块化设计，你可以选择性地只引入必要的模块，减小库的体积。
  
• 与尺度兼容： 它的API设计与Web Crypto API尺度相似，这使得在各种环境下举行加密操作更加同等。
  
• 容易集成： 由于是纯JavaScript实现，可以轻松地在浏览器中嵌入，也可以在Node.js环境中使用。
  

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

1. // 引入 CryptoJS 库
2. var CryptoJS = require("crypto-js");
4. // 定义密钥和明文
5. var key = CryptoJS.enc.Utf8.parse("1234567890123456");
6. var plaintext = CryptoJS.enc.Utf8.parse("Hello, Crypto-JS!");
8. // 进行 AES 加密
9. var ciphertext = CryptoJS.AES.encrypt(plaintext, key, {
10.     mode: CryptoJS.mode.ECB,
11.     padding: CryptoJS.pad.Pkcs7
12. });
14. // 输出加密后的结果
15. console.log("Ciphertext: " + ciphertext.toString());

复制代码

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

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

复制代码

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

• 禁用开发者工具
  

监听是否打开开发者工具，若打开，则直接调用JavaScript的window.close( )方法关闭网页
① 监听F12按键、监听Ctrl+Shift+I（Windows体系）组合键、监听右键菜单，监听Ctrl+s禁止生存至本地，避免被Overrides。

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

复制代码

② 监听窗口巨细变化

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

复制代码

③ 利用Console.log

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

复制代码

无限debugger反调试

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

复制代码

好了，本日就分享到这了，以为博主写的有资助的麻烦点个赞！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。