前端密碼加密
⑴ 前端加密與後端解密
請看demo， 用前請npm install crypto-js
創建一個js文件
import CryptoJS from 'crypto-js';
const encryptByDES = (message, key)=>{
let keyHex = CryptoJS.enc.Utf8.parse(key);
let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.ZeroPadding
});
return encrypted.ciphertext.toString();
}
/**
* 對userId加密
* @param {String} userId
*/
export const encryption = (userId) => {
let _userId = userId.toString() || ''
let encryptedResult = encryptByDES(_userId, '')
return encryptedResult
}
html部分
import React, {Component} from 'react';
import CryptoJS from 'crypto-js';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.state={
userId: 123,
encryptedResult: ''
}
}
_handleChange = (event) => {
this.setState(() => ({
userId: event.target.value
}))
}
des = () => {
let data = this.encryptByDES('111', '')
this.setState(() => ({
encryptedResult: data
}))
}
encryptByDES = (message, key) => {
console.log(CryptoJS.pad)
let keyHex = CryptoJS.enc.Utf8.parse(key);
let encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.ZeroPadding
});
return encrypted.ciphertext.toString();
}
render() {
return (
<div className="App">
<input type="text" value={this.state.userId} onChange={this._handleChange}/>
<button type="button" onClick={this.des}>加密</button><br/>
<span>結果：{this.state.encryptedResult}</span>
</div>
);
}
}
export default App;
⑵ Web前端密碼加密是否有意義
密碼在前端加密完全沒有意義，對密碼系統的安全性不會有任何提高，反而會引發不必要的麻煩。首先，做前端開發的人需要知道，前端系統的控制權是完全在用戶手裡的，也就是說，前端做什麼事情，用戶有完全的控制權。假設如同 @陳軒所說，前端做過了md5，後台就不用做了，這個做法會有什麼後果？如果某一天，這個系統的資料庫泄露了，黑客就直接拿到了每個用戶的密碼md5值，但此時，由於黑客知道密碼是在前端進行哈希的，所以他不需要爆破出該md5對應的原文是什麼，而是直接修改客戶端向伺服器發出的請求，把密碼欄位換成資料庫中MD5就可以了，由於與資料庫中記錄一致，直接就會登錄成功。這跟直接存儲明文密碼沒有任何區別！！！所以不管前端是不是加密了密碼，後台使用安全的哈希演算法對內容再次轉換是非常有必要的。（MD5可不行，要用bcrypt，我之前回答過一個類似的：隨著顯卡性能的高速發展，目前的快速Hash演算法是否已經變得不夠安全了？）這個回答還有一個人贊同，希望大家別被錯誤答案誤導了。另外一個答案 @林鴻所說，在非安全HTTP連接上，可以防止原始密碼被竊聽。但問題在於由於你的登錄系統接受的哈希過的密碼，而不是原文，竊聽者根本不需要原始密碼，只要通過哈希結果就可以偽造請求登錄系統。這樣做只能防止被竊聽到原文的密碼被攻擊者用在社會學攻擊上，而不能改善該網站的安全性。所以不管前端是不是加密了密碼，使用HTTPS安全連接進行登錄都是非常有必要的。以上我說的兩點，合起來看就是：不管前端是否加密了密碼，都不能以此為假設，讓後端設計的安全等級下降，否則就會有嚴重的安全問題。實際上，前端進行密碼加密，可以看做幫助用戶多進行了一次原文的轉換，不管用了什麼加密演算法，算出來的結果都是密碼原文，你該如何保護用戶的原始密碼，就該如何保護此處的加密結果，因為對你的登錄系統來說，它們都是密碼原文。以上這些，說明了密碼加密是沒有什麼意義的，接下來，我要說明前端加密會帶來什麼問題。有些人會認為前端進行了加密，可以降低後台的安全性需求，這種錯誤的觀念會造成系統的安全漏洞。實際上，你不能對前端做任何的假設，所有跟安全相關的技術，都必須應用在後台上。前端進行加密會造成頁面需要js腳本才能運行，那麼假設你的系統需要兼容不能運行js的客戶端，就必須再設計一個使用原文的登錄介面。由於前端是不是加密，所有安全機制都必須照常應用，所以為系統增加這樣的復雜性是完全沒必要的，即使傳輸明文密碼，只要正確使用了HTTPS連接和伺服器端安全的哈希演算法，密碼系統都可以是很安全的。
⑶ 前端js幾種加密/解密方法
方法匯總：
https://www.cnblogs.com/pinkpolk/articles/13600696.html
項目中用了crypto-js DES加密解密 前端用下面方法加密 後台用java的des解密
https://blog.csdn.net/huaweichenai/article/details/103497194
crypto-js AES需要前端來處理加密解密
https://www.npmjs.com/package/crypto-js
JS 使用 SHA1 加密示例
https://blog.csdn.net/qq_40147863/article/details/88034357
⑷ 前端加密、解密數據
首先，為了更好的加密，我們不能用簡單的加密，因為很有可能會被輕松破解掉，我之前實現的加密只是簡單的把數據加密，在測試過程中（安全數伏性測試），通過一些技巧還是可以解密成功。
所以，對於一些重要的信息可能需要非對稱加密。
所謂的非對稱加密解密，在我的理解的，就是前端用一把鑰匙解密/加密，而後台用另一把鑰匙來做同樣的操作。
也就是，薯亂攜前端加密用特定的鑰匙，解密的鑰匙只在陪雀後端那裡。這樣在傳輸過程中就不會把鑰匙丟掉。
同樣，後端加密數據用一把鑰匙，解密的時候，前端自己有規定的鑰匙，這樣數據也不會在過程中解密截取。
1、我這里是用vue
所以，第一步 npm install jsencrypt
2、安裝完之後，開始定義一個專門用來加密解密的文件，我放到utils文件裡面。
引入JSEncrypt
3、重點來了加密解密
首先，我這里使用公鑰加密（由後台來給你公鑰）
全局引用，使用
這樣加密就完成了。
通常由後台加密，前端負責加密
由後台生成私鑰，然後前端用來解密。
引用和加密一樣
⑸ Web前端密碼加密是否有意義
沒有意義
密碼前端的加密根本沒有意義，密碼系統的安全性沒有提高，但會造成不必要的麻煩。
首先，前端開發人員需要知道前端系統的控制完全掌握在用戶手中，也就是說前端所做的事情和用戶擁有完全的控制。據稱，前端做了MD5，後台不必做，這種方法會有什麼後果？如果有一天，系統資料庫泄露，黑客直接獲得每個用戶的密碼的MD5值，但這一次，因為黑客知道密碼的哈希的前面，所以他不需要鼓風的MD5對應什麼是原創，而是直接修改發送到伺服器的客戶端請求的在它的資料庫密碼欄位MD5，符合資料庫中的記錄，你可以直接登錄。這與直接存儲明文密碼沒有區別！！！所以不管前端密碼是否加密，後台使用哈希演算法的安全內容轉換都是必要的。（MD5不能使用BCrypt的，我以前回答類似：用圖形表現，當前快速發展的快速哈希演算法已成為不安全嗎？）有一個人同意這個答案，我希望你不要被錯誤的答案誤導。對方的回答，Linh說，是為了防止原始密碼被利用在一個不安全的HTTP連接。但問題是，因為你的登錄系統接受密碼代替原來的，竊聽者根本不需要原始密碼，只要哈希結果可以偽造請求登錄系統。這樣做只會防止攻擊者在社交攻擊時使用原始密碼，而不會提高網站的安全性。所以不管前面密碼是不是加密的，使用HTTPS安全連接登錄都是很有必要的。
