Skip to content

Commit 6976e0d

Browse files
CC11001100CC11001100
authoredJan 9, 2025
Merge pull request #38 from JSREI/dev
feat: 完善靶场
·
v0.3
2 parents 01fa04a + d5ea5cb commit 6976e0d

File tree

20 files changed

+2970
-127
lines changed

20 files changed

+2970
-127
lines changed
 

Diff for: ‎goat/jsonp-request-encrypt-and-response-encrypt/README.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# JSONP 双向加密示例
2+
3+
这是一个演示 JSONP 请求和响应双向加密的示例项目。前端和后端通过加密算法对传输的数据进行加密和解密，确保数据在传输过程中的安全性。前端使用 RC4 加密请求数据，Rabbit 解密响应数据；后端使用 RC4 解密请求数据，Rabbit 加密响应数据。
4+
5+
## 项目结构
6+
7+
- `client.html`: 前端页面，包含 JSONP 请求的逻辑以及加密和解密功能。
8+
- `server.js`: 后端服务器，处理 JSONP 请求并返回加密的响应。
9+
- `package.json`: 项目依赖和脚本配置。
10+
11+
## 运行步骤
12+
13+
### 1. 克隆项目
14+
15+
首先，将项目克隆到本地：
16+
17+
```bash
18+
git clone <repository-url>
19+
cd <repository-directory>
20+
```
21+
22+
### 2. 安装依赖
23+
24+
在项目根目录下运行以下命令来安装所需的依赖：
25+
26+
```bash
27+
npm install
28+
```
29+
30+
### 3. 启动服务器
31+
32+
安装完依赖后，启动服务器：
33+
34+
```bash
35+
npm start
36+
```
37+
38+
服务器将会在 `http://localhost:3000` 上运行。
39+
40+
### 4. 打开前端页面
41+
42+
在浏览器中打开 `client.html` 文件。你可以使用任何本地服务器来提供这个文件，或者直接双击打开（注意：直接打开可能会导致跨域问题，建议使用本地服务器）。
43+
44+
### 5. 发送请求
45+
46+
在页面中点击“发送请求”按钮，前端会发送一个 JSONP 请求到后端。后端会解密请求数据，处理后再加密响应数据并返回。前端解密响应数据后，将结果显示在页面上。
47+
48+
## 加密逻辑
49+
50+
### 前端
51+
- **加密（RC4）**：对请求数据进行加密。
52+
- **解密（Rabbit）**：对后端返回的响应数据进行解密。
53+
54+
### 后端
55+
- **解密（RC4）**：对前端发送的请求数据进行解密。
56+
- **加密（Rabbit）**：对返回给前端的响应数据进行加密。
57+
58+
## 依赖
59+
60+
- `express`: 用于创建后端服务器。
61+
- `crypto-js`: 用于加密和解密数据。
62+
- `body-parser`: 用于解析请求体。
63+
64+
## 注意事项
65+
66+
- **跨域问题**: JSONP 通常用于解决跨域问题，但请注意浏览器的安全策略。
67+
- **加密算法**: 项目中使用了 RC4 和 Rabbit 加密算法，实际生产环境中应根据需求选择合适的加密算法。
68+
69+
## 许可证
70+
71+
本项目基于 MIT 许可证开源。

Diff for: ‎goat/jsonp-request-encrypt-and-response-encrypt/client.html

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JSONP Example</title>
7+
<!-- 引入 CryptoJS 库 -->
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
9+
<style>
10+
/* 全局样式 */
11+
body {
12+
margin: 0;
13+
height: 100vh;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18+
background: linear-gradient(135deg, #e6f4ff, #b3d9ff); /* 浅蓝色渐变背景 */
19+
color: #333; /* 深色文字 */
20+
overflow: hidden;
21+
}
22+
23+
/* 卡片式容器 */
24+
.card {
25+
background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
26+
backdrop-filter: blur(10px); /* 毛玻璃效果 */
27+
border-radius: 15px;
28+
padding: 2rem;
29+
width: 100%;
30+
max-width: 400px;
31+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
32+
border: 1px solid rgba(255, 255, 255, 0.2);
33+
text-align: center;
34+
transition: transform 0.3s ease, box-shadow 0.3s ease;
35+
}
36+
37+
.card:hover {
38+
transform: translateY(-5px); /* 悬停时上移 */
39+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
40+
}
41+
42+
/* 标题 */
43+
h1 {
44+
margin: 0 0 1.5rem;
45+
font-size: 1.8rem;
46+
font-weight: 600;
47+
color: #0077b6; /* 冷色系蓝色 */
48+
}
49+
50+
/* 按钮 */
51+
button {
52+
padding: 0.75rem 1.5rem;
53+
font-size: 1rem;
54+
border: none;
55+
border-radius: 8px;
56+
background: #0077b6; /* 冷色系蓝色 */
57+
color: #fff; /* 白色文字 */
58+
cursor: pointer;
59+
transition: background 0.3s ease;
60+
}
61+
62+
button:hover {
63+
background: #005f8a; /* 悬停时稍暗的蓝色 */
64+
}
65+
66+
/* 结果展示 */
67+
#result {
68+
margin-top: 1.5rem;
69+
padding: 1rem;
70+
background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
71+
border-radius: 8px;
72+
font-size: 1rem;
73+
color: #333; /* 深色文字 */
74+
word-wrap: break-word;
75+
overflow-y: auto;
76+
max-height: 200px;
77+
border: 1px solid rgba(255, 255, 255, 0.2);
78+
}
79+
80+
/* 加载动画 */
81+
.loader {
82+
display: none; /* 默认隐藏 */
83+
border: 4px solid rgba(0, 119, 182, 0.3); /* 冷色系蓝色 */
84+
border-top: 4px solid #0077b6; /* 冷色系蓝色 */
85+
border-radius: 50%;
86+
width: 30px;
87+
height: 30px;
88+
animation: spin 1s linear infinite;
89+
margin: 1rem auto;
90+
}
91+
92+
@keyframes spin {
93+
0% { transform: rotate(0deg); }
94+
100% { transform: rotate(360deg); }
95+
}
96+
</style>
97+
</head>
98+
<body>
99+
<div class="card">
100+
<h1>JSONP Example</h1>
101+
<button id="fetchButton">发送请求</button>
102+
<div id="result">点击按钮发送请求...</div>
103+
<div class="loader" id="loader"></div>
104+
</div>
105+
106+
<script>
107+
// 加密密钥（与后端一致）
108+
const SECRET_KEY = 'CC11001100';
109+
110+
// 加密函数（使用 RC4）
111+
function encryptData(data) {
112+
return CryptoJS.RC4.encrypt(JSON.stringify(data), SECRET_KEY).toString();
113+
}
114+
115+
// 解密函数（使用 Rabbit）
116+
function decryptData(encryptedData) {
117+
try {
118+
const bytes = CryptoJS.Rabbit.decrypt(encryptedData, SECRET_KEY);
119+
const decryptedText = bytes.toString(CryptoJS.enc.Utf8);
120+
121+
if (!decryptedText) {
122+
throw new Error('解密失败：无效的密钥或数据');
123+
}
124+
125+
return decryptedText;
126+
} catch (error) {
127+
console.error('解密失败：', error.message);
128+
return null;
129+
}
130+
}
131+
132+
// JSONP 请求
133+
function fetchData() {
134+
const data = { name: 'CC11001100' };
135+
const encryptedData = encryptData(data);
136+
137+
// 显示加载动画
138+
const loader = document.getElementById('loader');
139+
const resultDiv = document.getElementById('result');
140+
loader.style.display = 'block';
141+
resultDiv.innerText = '加载中...';
142+
143+
const script = document.createElement('script');
144+
script.src = `http://localhost:3000/api/data?encryptedData=${encodeURIComponent(encryptedData)}&callback=handleResponse`;
145+
document.body.appendChild(script);
146+
}
147+
148+
// 处理 JSONP 响应
149+
function handleResponse(encryptedResponse) {
150+
const decryptedResponse = decryptData(encryptedResponse);
151+
152+
// 隐藏加载动画
153+
const loader = document.getElementById('loader');
154+
const resultDiv = document.getElementById('result');
155+
loader.style.display = 'none';
156+
157+
if (!decryptedResponse) {
158+
resultDiv.innerText = '解密失败：无效的密钥或数据';
159+
return;
160+
}
161+
162+
const responseData = JSON.parse(decryptedResponse);
163+
resultDiv.innerText = responseData.message;
164+
}
165+
166+
// 绑定按钮点击事件
167+
document.getElementById('fetchButton').addEventListener('click', function () {
168+
fetchData();
169+
});
170+
</script>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.