Merge pull request #38 from JSREI/dev

feat: 完善靶场
JSREI · Jan 9, 2025 · 6976e0d · 6976e0d
2 parents 01fa04a + d5ea5cb
commit 6976e0d
Show file tree

Hide file tree

Showing 20 changed files with 2,970 additions and 127 deletions.
diff --git a/goat/jsonp-request-encrypt-and-response-encrypt/README.md b/goat/jsonp-request-encrypt-and-response-encrypt/README.md
@@ -0,0 +1,71 @@
+# JSONP 双向加密示例
+
+这是一个演示 JSONP 请求和响应双向加密的示例项目。前端和后端通过加密算法对传输的数据进行加密和解密，确保数据在传输过程中的安全性。前端使用 RC4 加密请求数据，Rabbit 解密响应数据；后端使用 RC4 解密请求数据，Rabbit 加密响应数据。
+
+## 项目结构
+
+- `client.html`: 前端页面，包含 JSONP 请求的逻辑以及加密和解密功能。
+- `server.js`: 后端服务器，处理 JSONP 请求并返回加密的响应。
+- `package.json`: 项目依赖和脚本配置。
+
+## 运行步骤
+
+### 1. 克隆项目
+
+首先，将项目克隆到本地：
+
+```bash
+git clone <repository-url>
+cd <repository-directory>
+```
+
+### 2. 安装依赖
+
+在项目根目录下运行以下命令来安装所需的依赖：
+
+```bash
+npm install
+```
+
+### 3. 启动服务器
+
+安装完依赖后，启动服务器：
+
+```bash
+npm start
+```
+
+服务器将会在 `http://localhost:3000` 上运行。
+
+### 4. 打开前端页面
+
+在浏览器中打开 `client.html` 文件。你可以使用任何本地服务器来提供这个文件，或者直接双击打开（注意：直接打开可能会导致跨域问题，建议使用本地服务器）。
+
+### 5. 发送请求
+
+在页面中点击“发送请求”按钮，前端会发送一个 JSONP 请求到后端。后端会解密请求数据，处理后再加密响应数据并返回。前端解密响应数据后，将结果显示在页面上。
+
+## 加密逻辑
+
+### 前端
+- **加密（RC4）**：对请求数据进行加密。
+- **解密（Rabbit）**：对后端返回的响应数据进行解密。
+
+### 后端
+- **解密（RC4）**：对前端发送的请求数据进行解密。
+- **加密（Rabbit）**：对返回给前端的响应数据进行加密。
+
+## 依赖
+
+- `express`: 用于创建后端服务器。
+- `crypto-js`: 用于加密和解密数据。
+- `body-parser`: 用于解析请求体。
+
+## 注意事项
+
+- **跨域问题**: JSONP 通常用于解决跨域问题，但请注意浏览器的安全策略。
+- **加密算法**: 项目中使用了 RC4 和 Rabbit 加密算法，实际生产环境中应根据需求选择合适的加密算法。
+
+## 许可证
+
+本项目基于 MIT 许可证开源。
diff --git a/goat/jsonp-request-encrypt-and-response-encrypt/client.html b/goat/jsonp-request-encrypt-and-response-encrypt/client.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSONP Example</title>
+    <!-- 引入 CryptoJS 库 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+    <style>
+        /* 全局样式 */
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #e6f4ff, #b3d9ff); /* 浅蓝色渐变背景 */
+            color: #333; /* 深色文字 */
+            overflow: hidden;
+        }
+
+        /* 卡片式容器 */
+        .card {
+            background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
+            backdrop-filter: blur(10px); /* 毛玻璃效果 */
+            border-radius: 15px;
+            padding: 2rem;
+            width: 100%;
+            max-width: 400px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            text-align: center;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px); /* 悬停时上移 */
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
+        }
+
+        /* 标题 */
+        h1 {
+            margin: 0 0 1.5rem;
+            font-size: 1.8rem;
+            font-weight: 600;
+            color: #0077b6; /* 冷色系蓝色 */
+        }
+
+        /* 按钮 */
+        button {
+            padding: 0.75rem 1.5rem;
+            font-size: 1rem;
+            border: none;
+            border-radius: 8px;
+            background: #0077b6; /* 冷色系蓝色 */
+            color: #fff; /* 白色文字 */
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+
+        button:hover {
+            background: #005f8a; /* 悬停时稍暗的蓝色 */
+        }
+
+        /* 结果展示 */
+        #result {
+            margin-top: 1.5rem;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
+            border-radius: 8px;
+            font-size: 1rem;
+            color: #333; /* 深色文字 */
+            word-wrap: break-word;
+            overflow-y: auto;
+            max-height: 200px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        /* 加载动画 */
+        .loader {
+            display: none; /* 默认隐藏 */
+            border: 4px solid rgba(0, 119, 182, 0.3); /* 冷色系蓝色 */
+            border-top: 4px solid #0077b6; /* 冷色系蓝色 */
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 1rem auto;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+<div class="card">
+    <h1>JSONP Example</h1>
+    <button id="fetchButton">发送请求</button>
+    <div id="result">点击按钮发送请求...</div>
+    <div class="loader" id="loader"></div>
+</div>
+
+<script>
+    // 加密密钥（与后端一致）
+    const SECRET_KEY = 'CC11001100';
+
+    // 加密函数（使用 RC4）
+    function encryptData(data) {
+        return CryptoJS.RC4.encrypt(JSON.stringify(data), SECRET_KEY).toString();
+    }
+
+    // 解密函数（使用 Rabbit）
+    function decryptData(encryptedData) {
+        try {
+            const bytes = CryptoJS.Rabbit.decrypt(encryptedData, SECRET_KEY);
+            const decryptedText = bytes.toString(CryptoJS.enc.Utf8);
+
+            if (!decryptedText) {
+                throw new Error('解密失败：无效的密钥或数据');
+            }
+
+            return decryptedText;
+        } catch (error) {
+            console.error('解密失败：', error.message);
+            return null;
+        }
+    }
+
+    // JSONP 请求
+    function fetchData() {
+        const data = { name: 'CC11001100' };
+        const encryptedData = encryptData(data);
+
+        // 显示加载动画
+        const loader = document.getElementById('loader');
+        const resultDiv = document.getElementById('result');
+        loader.style.display = 'block';
+        resultDiv.innerText = '加载中...';
+
+        const script = document.createElement('script');
+        script.src = `http://localhost:3000/api/data?encryptedData=${encodeURIComponent(encryptedData)}&callback=handleResponse`;
+        document.body.appendChild(script);
+    }
+
+    // 处理 JSONP 响应
+    function handleResponse(encryptedResponse) {
+        const decryptedResponse = decryptData(encryptedResponse);
+
+        // 隐藏加载动画
+        const loader = document.getElementById('loader');
+        const resultDiv = document.getElementById('result');
+        loader.style.display = 'none';
+
+        if (!decryptedResponse) {
+            resultDiv.innerText = '解密失败：无效的密钥或数据';
+            return;
+        }
+
+        const responseData = JSON.parse(decryptedResponse);
+        resultDiv.innerText = responseData.message;
+    }
+
+    // 绑定按钮点击事件
+    document.getElementById('fetchButton').addEventListener('click', function () {
+        fetchData();
+    });
+</script>
+</body>
+</html>