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 参数加密示例</ 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+ background : linear-gradient (135deg , # 6a11cb, # 2575fc );
18+ font-family : Arial, sans-serif;
19+ color : # fff ;
20+ }
21+
22+ /* 容器样式 */
23+ .container {
24+ text-align : center;
25+ background : rgba (255 , 255 , 255 , 0.1 );
26+ padding : 2rem ;
27+ border-radius : 10px ;
28+ box-shadow : 0 4px 15px rgba (0 , 0 , 0 , 0.2 );
29+ }
30+
31+ /* 输入框样式 */
32+ input {
33+ padding : 0.5rem ;
34+ font-size : 1rem ;
35+ border : none;
36+ border-radius : 5px ;
37+ margin-bottom : 1rem ;
38+ width : 100% ;
39+ max-width : 300px ;
40+ }
41+
42+ /* 按钮样式 */
43+ button {
44+ padding : 0.5rem 1rem ;
45+ font-size : 1rem ;
46+ border : none;
47+ border-radius : 5px ;
48+ background : # 2575fc ;
49+ color : # fff ;
50+ cursor : pointer;
51+ transition : background 0.3s ease;
52+ }
53+
54+ button : hover {
55+ background : # 1b5bbf ;
56+ }
57+
58+ /* 结果展示样式 */
59+ .result {
60+ margin-top : 1rem ;
61+ padding : 1rem ;
62+ background : rgba (255 , 255 , 255 , 0.2 );
63+ border-radius : 5px ;
64+ font-size : 1rem ;
65+ word-wrap : break-word;
66+ }
67+ </ style >
68+ </ head >
69+ < body >
70+ < div class ="container ">
71+ < h1 > JSONP 参数加密示例</ h1 >
72+ < input type ="text " id ="inputData " placeholder ="请输入数据 ">
73+ < button id ="sendRequest "> 发送 JSONP 请求</ button >
74+ < div class ="result " id ="resultContainer "> 结果将显示在这里...</ div >
75+ </ div >
76+
77+ < script >
78+ // 加密函数
79+ function encryptData ( data , secretKey ) {
80+ return CryptoJS . AES . encrypt ( JSON . stringify ( data ) , secretKey ) . toString ( ) ;
81+ }
82+
83+ // JSONP 请求函数
84+ function jsonpRequest ( url , callbackName , encryptedData ) {
85+ const script = document . createElement ( 'script' ) ;
86+ script . src = `${ url } ?callback=${ callbackName } &data=${ encodeURIComponent ( encryptedData ) } ` ;
87+ document . body . appendChild ( script ) ;
88+
89+ // 请求完成后移除 script 标签
90+ script . onload = function ( ) {
91+ document . body . removeChild ( script ) ;
92+ } ;
93+ }
94+
95+ // 回调函数,用于处理服务器返回的数据
96+ function handleResponse ( response ) {
97+ const resultContainer = document . getElementById ( 'resultContainer' ) ;
98+ resultContainer . textContent = JSON . stringify ( response , null , 2 ) ;
99+ }
100+
101+ // 初始化随机值
102+ function generateRandomValue ( ) {
103+ const randomData = {
104+ name : "User" + Math . floor ( Math . random ( ) * 1000 ) ,
105+ age : Math . floor ( Math . random ( ) * 100 )
106+ } ;
107+ return JSON . stringify ( randomData ) ;
108+ }
109+
110+ // 页面加载时初始化输入框
111+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
112+ const inputData = document . getElementById ( 'inputData' ) ;
113+ inputData . value = generateRandomValue ( ) ;
114+ } ) ;
115+
116+ // 绑定按钮点击事件
117+ document . getElementById ( 'sendRequest' ) . addEventListener ( 'click' , function ( ) {
118+ const inputData = document . getElementById ( 'inputData' ) . value ;
119+
120+ // 加密密钥(需要与服务器一致)
121+ const secretKey = "my-secret-key" ;
122+
123+ // 加密数据
124+ const encryptedData = encryptData ( inputData , secretKey ) ;
125+ console . log ( "加密后的数据:" , encryptedData ) ;
126+
127+ // 发送 JSONP 请求
128+ jsonpRequest ( "http://localhost:3000/api" , "handleResponse" , encryptedData ) ;
129+ } ) ;
130+ </ script >
131+ </ body >
132+ </ html >
0 commit comments