分享 7 個和安全相關(guān)的 JS 庫，讓你的應(yīng)用更安全
在JavaScript開發(fā)的世界中，安全性是保護(hù)應(yīng)用程序免受潛在威脅和漏洞的至關(guān)重要。幸運(yùn)的是，開源社區(qū)貢獻(xiàn)了各種強(qiáng)大的安全庫，可以加強(qiáng)JavaScript項目的安全性。在本文中，我們將探討7個必要的JavaScript安全庫，這些庫都可以在GitHub上找到。
1. DOMPurify
這是GitHub上星標(biāo)最多的庫之一，擁有超過11k顆星星。這是一個強(qiáng)大的庫，提供安全可靠的HTML過濾。它通過過濾不可信HTML和保護(hù)應(yīng)用程序免受惡意用戶輸入來幫助防止跨站腳本攻擊（XSS攻擊）。
使用DOMPurify非常簡單，可以通過以下步驟來實現(xiàn)：
1. 安裝DOMPurify庫
可以通過npm來安裝DOMPurify庫，命令如下：
npm install dompurify2. 導(dǎo)入DOMPurify庫
在需要使用DOMPurify的文件中，導(dǎo)入DOMPurify庫，代碼如下：
import DOMPurify from 'dompurify';3. 使用DOMPurify過濾HTML
使用DOMPurify庫過濾HTML非常簡單，可以直接調(diào)用DOMPurify.sanitize()方法，將需要過濾的HTML字符串作為參數(shù)傳入即可。代碼示例如下：
const dirtyHtml = '<script>alert("XSS Attack!");</script>';
const cleanHtml = DOMPurify.sanitize(dirtyHtml);
console.log(cleanHtml); // 輸出：<span>alert("XSS Attack!");</span>以上代碼會將`dirtyHtml`中的XSS攻擊代碼過濾掉，只保留安全的HTML標(biāo)簽和內(nèi)容。
除此之外，DOMPurify還提供了一些高級用法，比如配置選項、自定義策略等。具體可以參考DOMPurify的官方文檔。
https://github.com/cure53/DOMPurify
2. Helmet
helmet 是一個用于保護(hù) Express.js 應(yīng)用程序的庫，它幫助您通過設(shè)置 HTTP 頭部來增加應(yīng)用程序的安全性。它可以防止一些常見的 Web 安全漏洞，如跨站腳本攻擊（XSS）、點擊劫持、內(nèi)容嗅探等。以下是 helmet 庫的用法和代碼示例：
1、首先，您需要在您的 Express.js 項目中安裝 helmet 庫，可以使用以下命令：
npm install helmet2、在您的 Express.js 應(yīng)用程序中，導(dǎo)入 helmet 并將其應(yīng)用于您的應(yīng)用程序：
const express = require('express');
const helmet = require('helmet');
const app = express();
// 使用 helmet 中間件來增加安全性的 HTTP 頭部
app.use(helmet());
// ...其他中間件和路由的設(shè)置...
// 啟動服務(wù)器
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
通過在應(yīng)用程序中使用 helmet，它會自動設(shè)置一系列的 HTTP 頭部，從而增強(qiáng)您的應(yīng)用程序的安全性。以下是一些示例的設(shè)置：
防止跨站腳本攻擊（XSS）：
helmet 會設(shè)置 X-XSS-Protection 頭部，幫助防止瀏覽器執(zhí)行惡意注入的腳本。
禁止嗅探 MIME 類型：
helmet 會設(shè)置 X-Content-Type-Options 頭部，防止瀏覽器嗅探 MIME 類型。
禁止點擊劫持：
helmet 會設(shè)置 X-Frame-Options 頭部，防止頁面被嵌套在 iframe 中，從而減少點擊劫持風(fēng)險。
設(shè)置安全的傳輸策略：
helmet 會設(shè)置 Strict-Transport-Security 頭部，強(qiáng)制使用 HTTPS 來保護(hù)敏感數(shù)據(jù)的傳輸。
這些只是 helmet 可以為您自動設(shè)置的一些安全性增強(qiáng)措施。通過使用 helmet，您可以輕松地提高您的 Express.js 應(yīng)用程序的安全性，而無需手動編寫大量的安全性相關(guān)代碼。
https://github.com/helmetjs/helmet
3. Bcrypt
這是一個用于在 Node.js 應(yīng)用程序中進(jìn)行安全密碼哈希的庫。它使用了bcrypt算法，該算法旨在保護(hù)用戶密碼免受未經(jīng)授權(quán)的訪問。它在 GitHub 上有超過7千顆星。
以下是 bcrypt 庫的用法和相關(guān)的代碼示例：
1、首先，您需要在您的 Node.js 項目中安裝 bcrypt 庫，可以使用以下命令：
npm install bcrypt2、在您的 Node.js 應(yīng)用程序中，導(dǎo)入 bcrypt 并使用它來進(jìn)行密碼哈希：
const bcrypt = require('bcrypt');
const saltRounds = 10; // 這是生成 salt 的輪數(shù)，可以根據(jù)需求進(jìn)行調(diào)整
// 要哈希的原始密碼
const plainPassword = 'mySecurePassword';
// 生成 salt，并使用 salt 對密碼進(jìn)行哈希
bcrypt.genSalt(saltRounds, (err, salt) => {
if (err) throw err;
bcrypt.hash(plainPassword, salt, (err, hash) => {
if (err) throw err;
// 此處的 hash 就是哈希后的密碼，可以保存到數(shù)據(jù)庫中
console.log('Hashed Password:', hash);
// 可以在這里進(jìn)行密碼校驗
bcrypt.compare(plainPassword, hash, (err, result) => {
if (err) throw err;
if (result) {
console.log('Password is correct.');
} else {
console.log('Password is incorrect.');
}
});
});
});
在這個示例中，首先我們使用 bcrypt.genSalt() 函數(shù)生成一個 salt，然后使用 bcrypt.hash() 函數(shù)將原始密碼和 salt 進(jìn)行哈希，生成最終的哈希密碼。您可以將這個哈希密碼保存到數(shù)據(jù)庫中。
當(dāng)用戶登錄時，您可以使用 bcrypt.compare() 函數(shù)來比較用戶輸入的密碼和數(shù)據(jù)庫中的哈希密碼，以進(jìn)行密碼驗證。
https://github.com/kelektiv/node.bcrypt.js
4、jsrsSsign
這個庫實現(xiàn)了多種密碼學(xué)標(biāo)準(zhǔn)和算法，如RSA、HMAC和X.509證書。它在處理數(shù)字簽名和與證書相關(guān)的任務(wù)時非常有用，特別適用于Web應(yīng)用程序。在GitHub上獲得了超過3千顆星。
在當(dāng)今數(shù)字時代，數(shù)據(jù)安全性至關(guān)重要。為了確保用戶數(shù)據(jù)的保密性、完整性和可靠性，開發(fā)人員需要采取各種措施來應(yīng)對安全挑戰(zhàn)。在這個背景下，jsrsasign（RSA-Sign JavaScript Library）應(yīng)運(yùn)而生，作為一款強(qiáng)大的 TypeScript/JavaScript 庫，支持 RSA/RSAPSS/ECDSA/DSA 簽名/驗證、ASN.1、PKCS#1/5/8 私鑰/公鑰、X.509 證書、CRL、OCSP、CMS SignedData、TimeStamp、CAdES JSON Web Signature/Token/Key 等一系列密碼學(xué)功能，全面助力開發(fā)人員保護(hù)應(yīng)用免受各種潛在的安全威脅。
您可以通過 Node NPM 或 Bower 進(jìn)行安裝，或者從多個 CDN 站點加載庫。以下是一個簡單的入門示例，展示了如何加載加密的 PKCS#5 私鑰并進(jìn)行簽名操作：
// 導(dǎo)入 jsrsasign
var jsrsasign = require('jsrsasign');
var jsrsasignUtil = require('jsrsasign-util');
// 讀取加密的私鑰文件
var pem = jsrsasignUtil.readFile('z1.prv.p5e.pem');
var prvKey = jsrsasign.KEYUTIL.getKey(pem, 'passwd');
// 使用私鑰對字符串 'aaa' 進(jìn)行簽名
var sig = new jsrsasign.Signature({ alg: 'SHA1withRSA' });
sig.init(prvKey);
sig.updateString('aaa');
var sigVal = sig.sign();
console.log('Signature:', sigVal);jsrsasign 提供了強(qiáng)大且靈活的密碼學(xué)功能，助力開發(fā)人員在應(yīng)用程序中實現(xiàn)數(shù)據(jù)的安全性和認(rèn)證。其多功能性、易用性以及長期維護(hù)的特點，使其成為保護(hù)敏感信息和預(yù)防安全威脅的強(qiáng)有力工具。通過了解和掌握這個庫，開發(fā)人員可以在應(yīng)對各種安全挑戰(zhàn)時信心倍增。
https://github.com/kjur/jsrsasign
5. QS
這個庫將幫助您在 JavaScript 中解析和序列化查詢字符串。它通過正確處理查詢參數(shù)并避免常見的解析漏洞，有助于防止HTTP參數(shù)污染（HPP）攻擊。在GitHub上已獲得超過7.5k顆星。以下是 qs 庫的用法和相關(guān)的代碼示例：
首先，在您的項目中安裝 qs 庫，可以使用以下命令：
npm install qs在您的 JavaScript 代碼中，您可以導(dǎo)入 qs 并開始使用它來解析和序列化查詢字符串：
const qs = require('qs');
// 解析查詢字符串
const queryString = 'name=John&age=30&city=New%20York';
const parsed = qs.parse(queryString);
console.log('Parsed Query:', parsed);
// 將對象序列化為查詢字符串
const obj = {
name: 'Alice',
age: 25,
city: 'Los Angeles'
};
const serialized = qs.stringify(obj);
console.log('Serialized Query:', serialized);
在這個示例中，我們首先使用 qs.parse() 來解析查詢字符串，將其轉(zhuǎn)換為對象。然后，我們使用 qs.stringify() 將一個對象序列化為查詢字符串。
qs 還提供了其他一些選項和功能，例如嵌套對象的處理、數(shù)組的處理、日期格式化等。您可以查閱 qs 庫的文檔以獲取更多詳細(xì)信息和用法示例：
https://github.com/ljharb/qs
6. Express rate limit
這是 Express.js 應(yīng)用程序中的一個重要中間件。它通過在 API 端點上設(shè)置請求速率限制，有助于減輕拒絕服務(wù)（DoS）和暴力破解攻擊。在 GitHub 上已獲得超過 2.5k 顆星。以下是
node-rate-limiter-flexible 庫的用法和相關(guān)的代碼示例：
首先，在您的項目中安裝 node-rate-limiter-flexible 庫，可以使用以下命令：
npm i --save rate-limiter-flexible在您的 Node.js 應(yīng)用程序中，導(dǎo)入 node-rate-limiter-flexible 并使用它來設(shè)置請求速率限制：
const { RateLimiterMemory } = require('rate-limiter-flexible');
// 創(chuàng)建一個請求速率限制器
const rateLimiter = new RateLimiterMemory({
points: 5, // 每秒允許的請求次數(shù)
duration: 1 // 以秒為單位的時間窗口
});
// 在 Express.js 應(yīng)用程序中使用請求速率限制器中間件
app.use((req, res, next) => {
rateLimiter.consume(req.ip) // 使用客戶端 IP 地址進(jìn)行限制
.then(() => {
next();
})
.catch((err) => {
res.status(429).send('Too Many Requests');
});
});
// ...其他中間件和路由的設(shè)置...
// 啟動服務(wù)器
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
在這個示例中，我們使用 RateLimiterMemory 創(chuàng)建了一個請求速率限制器。通過設(shè)置 points 和 duration 參數(shù)，我們可以定義每秒允許的請求次數(shù)和時間窗口。然后，我們在 Express.js 應(yīng)用程序中使用中間件來應(yīng)用請求速率限制器，使用客戶端的 IP 地址來進(jìn)行限制。如果客戶端超過限制，它將收到一個 429 Too Many Requests 響應(yīng)。
node-rate-limiter-flexible 還提供了其他的限制策略、存儲適配器和配置選項，您可以根據(jù)需求進(jìn)行調(diào)整。詳細(xì)的文檔可以在庫的 GitHub 頁面中找到：https://github.com/animir/node-rate-limiter-flexible
https://github.com/animir/node-rate-limiter-flexible
7. jsSHA
這是一個功能強(qiáng)大的 TypeScript/JavaScript 庫，用于使用多種密碼學(xué)算法對數(shù)據(jù)進(jìn)行哈希處理。它允許您為敏感數(shù)據(jù)生成安全的哈希，確保數(shù)據(jù)的完整性和真實性。在 GitHub 上獲得了超過2k顆星。以下是 jsSHA 庫的用法和相關(guān)的代碼示例：
首先，在您的項目中安裝 jsSHA 庫，可以使用以下命令：
npm install jssha在您的 JavaScript 代碼中，您可以導(dǎo)入 jsSHA 并使用它來進(jìn)行數(shù)據(jù)哈希：
javascriptCopy codeconst jsSHA = require('jssha');
// 創(chuàng)建一個 SHA-256 哈希對象
const shaObj = new jsSHA('SHA-256', 'TEXT');
// 要哈希的數(shù)據(jù)
const data = 'Hello, world!';
// 更新哈希對象的輸入
shaObj.update(data);
// 獲取最終的哈希值（十六進(jìn)制表示）
const hash = shaObj.getHash('HEX');
console.log('Hash:', hash);
在這個示例中，我們首先創(chuàng)建了一個 SHA-256 哈希對象，然后使用 update() 方法更新輸入數(shù)據(jù)，最后使用 getHash() 方法獲取最終的哈希值。
jsSHA 支持多種加密算法，您可以在創(chuàng)建哈希對象時指定所需的算法，例如 'SHA-1'、'SHA-256'、'SHA-512' 等。
請注意，jsSHA 還提供了許多其他選項和功能，如 HMAC 計算、處理二進(jìn)制數(shù)據(jù)等。您可以查閱 jsSHA 庫的文檔以獲取更多詳細(xì)信息和用法示例：https://caligatio.github.io/jsSHA/
總的來說，jsSHA 是一個方便的庫，可用于在瀏覽器和 Node.js 中生成安全的數(shù)據(jù)哈希，以確保數(shù)據(jù)的完整性和認(rèn)證。
https://github.com/Caligatio/jsSHA
結(jié)束
當(dāng)今數(shù)字時代，安全性在應(yīng)用程序開發(fā)中變得愈發(fā)重要。為了確保用戶數(shù)據(jù)的保密性、完整性和可靠性，開發(fā)人員需要采取各種措施來應(yīng)對安全挑戰(zhàn)。在本文中，我們介紹了七個與安全相關(guān)的 JavaScript 庫，它們?yōu)殚_發(fā)人員提供了強(qiáng)大的工具來保護(hù)應(yīng)用程序免受各種潛在的安全威脅。
在您的開發(fā)旅程中，這些庫將充當(dāng)強(qiáng)大的盾牌，保護(hù)您的應(yīng)用免受惡意行為的侵害。同時，隨著技術(shù)的不斷進(jìn)步，我們也鼓勵您保持警惕，時刻關(guān)注最新的安全標(biāo)準(zhǔn)和最佳實踐，以確保您的應(yīng)用程序始終處于安全的狀態(tài)。如果您還有其他優(yōu)秀的 JavaScript 庫推薦，歡迎在評論中與我們分享。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。