自制加密弹窗

hexo的加密弹窗有点问题，所以自己写了一个简单的加密弹窗，因为不涉及服务器 实现在本地，加密效果不是很好 但巧妙的利用一点编码技巧 使别人即使F12也不知道密码是啥还得去找解码工具 还实现了 别人调试就会跳转到指定网站 即使有些机灵鬼提前打开调试 或者查看源码 亦或者通过浏览器设置打开调试 都会跳转到百度 但终究是前端 无法真正实现绝对的加密 下面是实现代码

禁止F12

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
(function securePage() {
     const redirectURL = 'https://www.pornhub.com/'; // 填写您的博客地址
     
     const warningMessage = `
       <div style="
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(255, 255, 255, 0.8);
         background: url('https://t.alcy.cc/ycy') no-repeat center center; 
         background-size: cover; 
         color: pink;
         font-size: 40px;
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 9999;
         font-family: Arial, sans-serif;
       ">
         <div>
           <h1>检测到非法调试！即将跳转首页</h1>
         </div>
       </div>
     `;
   
     function showWarning() {
       document.body.innerHTML = warningMessage; 
     }
   
     document.addEventListener('contextmenu', function(e) {
       e.preventDefault();
       showWarning();
       setTimeout(() => window.location.href = redirectURL, 5000); 
     });
   
     document.addEventListener('keydown', function(e) {
       const forbiddenKeys = [
         { ctrl: true, shift: true, key: 'I' },
         { ctrl: true, shift: true, key: 'J' },
         { ctrl: true, shift: true, key: 'C' },
         { ctrl: true, key: 'U' },
         { key: 'F12' }
       ];
       forbiddenKeys.forEach(combo => {
         if (
           (combo.ctrl ? e.ctrlKey : true) &&
           (combo.shift ? e.shiftKey : true) &&
           (combo.key ? e.key.toUpperCase() === combo.key : true)
         ) {
           e.preventDefault();
           showWarning(); 
           setTimeout(() => window.location.href = redirectURL, 5000); 
         }
       });
     });
   
     function detectDebugger() {
       let isDebuggerOpen = false;
       const threshold = 100; 
   
       setInterval(() => {
         const start = Date.now();
         debugger; 
         const duration = Date.now() - start;
         if (duration > threshold) {
           if (!isDebuggerOpen) {
             isDebuggerOpen = true;
             showWarning(); 
             setTimeout(() => window.location.href = redirectURL, 5000); 
           }
         } else {
           isDebuggerOpen = false;
         }
       }, 1000);
     }
   
     window.addEventListener('error', function(event) {
       if (event.message === 'Script error.' && !event.filename) {
         showWarning(); 
         setTimeout(() => window.location.href = redirectURL, 5000); 
       }
     });
     detectDebugger();
   })();</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
<script>
 const encodedPassword = "这里填写你的密码的base64编码"; //找个base64编码工具编码一下你想要的密码后 
  // 有点长，上面注释我换到这行来写：将base64编码后的字符串填入encodedPassword = "这里填写你的密码的base64编码"的引号中即可
  const decodedPassword = atob(encodedPassword);

  function checkPassword() {
    const enteredPassword = document.getElementById("passwordInput").value;
    if (enteredPassword === decodedPassword) {
      document.getElementById('popupOverlay').style.display = 'none';
    } else {
      alert("密码错误，请重新输入！");
    }
  }

  document.getElementById("passwordInput").addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
      checkPassword();
    }
  });

  window.onload = function() {
    document.getElementById('popupOverlay').style.display = 'flex';
  };
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

 <style>
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }

  .popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
  }

  .popup-content h2 {
    color: #333;
    margin-bottom: 10px;
  }

  .popup-content p {
    color: #555;
    margin-bottom: 20px;
  }

  input[type="password"] {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 80%;
    margin-bottom: 20px;
  }

  button {
    padding: 10px 20px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  button:hover {
    background-color: #0056b3;
  }
</style>

弹窗内容

1
2
3
4
5
6
7
8
9

<div class="popup-overlay" id="popupOverlay">
  <div class="popup-content">
    <h2> 这里是弹窗标题</h2>
    <p>这里是弹窗说明</p>
    <input type="password" id="passwordInput" placeholder="联系博主获取密码">
    <button onclick="checkPassword()">查看</button>
  </div>
</div>

若有疑问 请评论或者联系博主 也可在移动端点击右下角的在线聊天 与我联系