利用Base64.js在前端實現數據加密與解密

一、Base64.js簡介

Base64.js是一種JavaScript庫，用於在前端中對數據進行加密和解密操作。Base64編碼是一種廣泛使用的加密方式，它將二進制數據轉換為只包含ASCII字符的文本格式。

在前端開發中，使用Base64編碼可以有效地保護數據的安全性。Base64.js能夠實現無縫對接，方便快捷地進行加密和解密操作。

二、Base64.js的引用與安裝

要使用Base64.js，在HTML文件中需要引用一個或多個JavaScript文件。可以使用CDN引用，也可以下載到本地並引用。

使用CDN的方式如下：

<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js-core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js-core.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/core.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/core.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/md5.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/md5.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha1.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha256.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha256.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha512.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/hmac-sha512.min.js.map"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/enc-base64.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/enc-utf8.min.js"></script>

也可以下載Base64.js並引用，下載地址為：https://github.com/beatgammit/base64-js/releases。

三、Base64.js的使用

1、Base64加密

使用Base64.js對數據進行加密很簡單，只需調用其提供的方法即可。

示例代碼如下：

// 將字符串"data"進行Base64加密
var base64Str = Base64.encode("data");

console.log(base64Str); // 輸出："ZGF0YQ=="

使用Base64.js加密數據時，可以將任何類型的數據進行Base64編碼。這包括字符串、二進制數據、以及其他類型的數據。在執行加密操作之前，必須將待加密的數據轉換成字節數組。

2、Base64解密

使用Base64.js對數據進行解密同樣很簡單，只需調用其提供的方法即可。

示例代碼如下：

// 將字符串"ZGF0YQ=="進行Base64解密
var str = Base64.decode("ZGF0YQ==");

console.log(str); // 輸出："data"

使用Base64.js解密數據時，需要使用Base64加密後的編碼字符串作為參數。在執行解密操作後，得到的結果為字節數組，需要將其轉換為對應的數據類型。

3、Base64.js實現加密與解密

通過對Base64.js的加密和解密入門，我們通過一個例子來看看Base64.js實現加密與解密的過程。

代碼演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Base64加密解密</title>
</head>
<body>
    <h2>Base64加密解密</h2>
    <p>請在文本框中輸入要加密的字符串：</p>
    <textarea id="plaintext" rows="5" cols="50"></textarea>
    <p>加密後字符串為：</p>
    <textarea id="ciphertext" rows="5" cols="50" readonly></textarea>
    <p>解密後字符串為：</p>
    <textarea id="deciphertext" rows="5" cols="50" readonly></textarea>
    <br><br>
    <button onclick="encrypt()">加密</button>
    <button onclick="decrypt()">解密</button>
    <script src="./base64.js"></script>
    <script>
        function encrypt() {
            var plaintext = document.getElementById("plaintext").value;
            var ciphertext = Base64.encode(plaintext);
            document.getElementById("ciphertext").value = ciphertext;
        }
        function decrypt() {
            var ciphertext = document.getElementById("ciphertext").value;
            var deciphertext = Base64.decode(ciphertext);
            document.getElementById("deciphertext").value = deciphertext;
        }
    </script>
</body>
</html>

上面的代碼演示了如何使用Base64.js實現加密與解密。它會生成一個簡單的HTML頁面，包括兩個文本框和兩個按鈕。用戶可以在文本框中輸入要加密的字符串，並使用“加密”按鈕將其轉換為Base64編碼。同樣，用戶也可以將Base64字符串輸入到程序中，並使用“解密”按鈕解密它。

四、小結

通過對Base64.js在前端實現數據加密與解密的介紹與實驗，我們了解了Base64.js的基本概念、引用與安裝、加密與解密方法。同時，我們也了解了如何在前端實現加密和解密的功能。這對於前端開發人員來說，是一個非常有用的技巧。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/233881.html