<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EDS加密和解密傳輸</title>
<style type="text/css">
.pass{
outline: none;
border: 0;
}
</style>
</head>
<body>
<div>
<label>賬號 : </label> <input type="text" name="userName" placeholder="請輸入賬號">
<label>密碼 : </label><input type="password" name="passWord" placeholder="請輸入密碼" />
<button class="submit">提交</button>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
<script type="text/javascript">
$('.submit').click(function() {
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
'u', 'v', 'w', 'x', 'y', 'z',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
'L', 'M', 'N', 'O', 'P',
'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];
var str = '',str1 = '';
while (str.length < 16) {
var iNum = parseInt(Math.random() * 100)
while (iNum > 60) {
iNum = parseInt(Math.random() * 100)
}
str += arr[iNum];
}
while (str1.length < 16) {
var iNum = parseInt(Math.random() * 100)
while (iNum > 60) {
iNum = parseInt(Math.random() * 100)
}
str1 += arr[iNum];
}
const key = CryptoJS.enc.Utf8.parse(str); //十六位十六進(jìn)制數(shù)作為密鑰
const iv = CryptoJS.enc.Utf8.parse(str1); //十六位十六進(jìn)制數(shù)作為密鑰偏移量
var PassWord = $('input[name="passWord"]').val();
var userName = $('input[name="userName"]').val();
alert(userName)
//加密方法
function Encrypt(word) {
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
return encrypted.ciphertext.toString().toUpperCase();
}
//解密方法
function Decrypt(word) {
let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
//使用說明
var newPass = Encrypt(PassWord);//加密后的密碼
var pass = Decrypt(newPass); //加密前密碼
console.log('加密后密碼:'+newPass);
console.log('原始密碼:'+pass)
var newUser = Encrypt(userName);//加密后的密碼
var user = Decrypt(newUser); //加密前密碼
console.log('加密后用戶名:'+newUser);
console.log('原始用戶名:'+user)
})
</script>
</body>
</html>
前端登錄EDS加密和解密傳輸數(shù)據(jù)案例
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門勒庄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來串前，“玉大人，你說我怎么就攤上這事实蔽〉茨耄” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵局装，是天一觀的道長坛吁。 經(jīng)常有香客問我，道長铐尚，這世上最難降的妖魔是什么拨脉？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮宣增，結(jié)果婚禮上玫膀，老公的妹妹穿的比我還像新娘。我一直安慰自己爹脾，他們只是感情好帖旨，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著灵妨，像睡著了一般解阅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泌霍，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼凉蜂！你這毒婦竟也來了琼梆？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對情侶失蹤窿吩，失蹤者是張志新（化名）和其女友劉穎茎杂，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體纫雁，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡煌往，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了轧邪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片刽脖。...
- 正文 年R本政府宣布院水，位于F島的核電站，受9級特大地震影響简十，放射性物質(zhì)發(fā)生泄漏檬某。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一螟蝙、第九天 我趴在偏房一處隱蔽的房頂上張望恢恼。 院中可真熱鬧，春花似錦胶逢、人聲如沸厅瞎。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽和簸。三九已至，卻和暖如春碟刺，著一層夾襖步出監(jiān)牢的瞬間锁保，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長得像浩村，于是被迫代替她去往敵國和親做葵。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 所以一個(gè)完整的爬蟲一般會(huì)包含如下三個(gè)模塊： 網(wǎng)絡(luò)請求模塊 爬取流程控制模塊 內(nèi)容分析提取模塊 網(wǎng)絡(luò)請求 我們常說爬...
- (數(shù)據(jù)庫續(xù)) 數(shù)據(jù)庫操作實(shí)例(注冊和登錄功能) 數(shù)據(jù)庫結(jié)構(gòu) 接口注冊：/reg?user=xxx&pass=xxx...
- 每日一詩復(fù)習(xí)計(jì)劃 青玉案 元夕 辛棄疾 東風(fēng)夜放花千樹怎燥，更吹落瘫筐，星如雨。寶馬雕車香滿路铐姚。鳳簫聲動(dòng)策肝，玉壺光轉(zhuǎn)，一夜魚...
