糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

前后端通信加密技术文档

前后端通信加密技术文档

原创 新闻资讯

于 2023-09-08 10:43:27 发布

16705 浏览

在现代Web应用程序中,保护用户数据的安全性至关重要。前后端通信加密是一种重要的安全措施,用于确保数据在传输过程中不被恶意方截获或篡改。本文将介绍前后端通信加密的底层原理、实施方式以及如何使用公钥加密传输密钥。


一. 加密底层原理

对称加密与非对称加密

前后端通信中常用的加密方式包括对称加密和非对称加密:

对称加密:在对称加密中,发送方和接收方共享相同的密钥(称为会话密钥)。发送方使用该密钥对数据进行加密,接收方使用相同的密钥对数据进行解密。常见的对称加密算法包括AES和DES。

非对称加密:在非对称加密中,有一对密钥:公钥和私钥。公钥用于加密数据,而私钥用于解密数据。只有拥有私钥的一方能够解密数据。常见的非对称加密算法包括RSA和ECC。

数字证书

为了确保通信的安全性,通常会使用数字证书来验证通信双方的身份。数字证书包含公钥以及与公钥相关的证书信息,由可信任的证书颁发机构(CA)签发。接收方可以使用发送方的证书验证其身份,并获取公钥以进行安全通信。

前后端通信加密实施

使用HTTPS

使用HTTPS(HTTP Secure)是最常见的前后端通信加密方式。HTTPS基于SSL/TLS协议,它通过在通信开始时建立安全连接,加密数据传输。实施方式包括:

配置SSL/TLS证书:需要在Web服务器上配置SSL/TLS证书以启用HTTPS。

前端和后端代码更新:前端和后端代码需要使用HTTPS协议进行通信。

对称加密

对称加密用于加密通信中的实际数据。以下是一个简单的Node.js代码示例,演示如何使用AES对称加密算法加密和解密数据:


二. 今天我们以对称加密为实例写个 前端 加密 后端解密的例子

前端我们以React框架

首先下载安装 crypto-js 库

yarn add crypto-js

前端对称加密很简单 使用第三方库完成 加密密钥 设置:MySuperSecretKey

function App() {
    //加密 post请求
    const requesPost = () => {
        // 要发送给后端的明文数据
        const dataToEncrypt = {
            username: 'exampleUser',
            password: 'secretpassword',
        };
        // 选择一个加密密钥(需要保密存储,不能明文写在代码中)
        const encryptionKey = 'MySuperSecretKey';

        // 将明文数据转换为字符串
        const dataString = JSON.stringify(dataToEncrypt);

        // 使用AES加密算法加密数据
        const encryptedData = crypto.AES.encrypt(dataString, encryptionKey).toString();


        fetch('/api/ayong/encrypt', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            credentials: 'include', // 允许携带 Cookie
            body: JSON.stringify({data: encryptedData})
        })
    }
    return (
        <>
            <img src={src}/>
            <h1>Vite + React</h1>
            <div className="card">
                <button onClick={requesPost}>
                    加密网路登陆请求
                </button>
            </div>

        </>
    )
}

后端我们以nest框架

同样安装 crypto-js 库

按照规范我们在module层讲解密密钥注入全局

@Module({
    imports: [AyongModule,
        WeekendModule,
        RestDaysModule,
        Config.forRot({name: 'ayong学前端'}),
        // DatabaseModuleModule,
    ],
    controllers: [AppController],
    providers: [
        {provide: "httpKey", useValue: {key: "MySuperSecretKey"}},
    ]
})

在 Controller 使用将解密密钥传入控制层

constructor(                @Inject('httpKey') private readonly httpKey: { key: string },) {     }

重点来了

对称加密很简单 我们只需要将密钥跟前端保持一致即可

@Post('encrypt')
    encrypt(@Body() body: { data: string }): Res {

        console.log("解密前------", body.data)
        // 解密密钥,必须与前端相同
        // 使用AES解密算法解密数据
        const bytes = crypto.AES.decrypt(body.data, this.httpKey.key);
        const decryptedDataString = bytes.toString(crypto.enc.Utf8);

        // 将解密后的数据转换为JavaScript对象
        const decryptedData = JSON.parse(decryptedDataString);
        // 假设验证通过后
        console.log("解密后+++++++", decryptedData)
        return {data: '加密成功'}
    }

我们点击发送网络请求看下控制台 参数是一个乱码.如果这个请求被抓包那么 他是无法解密里边的数据,解密前他也是一个乱码 ,只有在使用与前端保持一致的密钥才可以成功解密

一个简单的对称加密 具体代码实施就写完了 兄弟们你们可以跟着试下 后端代码已上传 GitHub地址  https://github.com/AyongNice/ayong-demo


三: 加密密钥的安全传输


在实际应用中,您需要更加安全地管理密钥,不要硬编码在代码中。

可以使用使用 公钥加密传输密钥 方式 安全保管密钥

当使用非对称加密算法如RSA来加密传输密钥时,通常有两个步骤:一方使用公钥加密密钥,另一方使用私钥解密密钥。以下是Node.js中的示例代码,演示如何执行这两个步骤。

const crypto = require('crypto');
const fs = require('fs');

// 生成RSA密钥对
const { publicKey, privateKey } = crypto.generateKeyPairSync('rsa', {
  modulusLength: 2048, // RSA密钥长度
  publicKeyEncoding: {
    type: 'spki',
    format: 'pem'
  },
  privateKeyEncoding: {
    type: 'pkcs8',
    format: 'pem'
  }
});

// 密钥需要传输的接收方
const secretKey = 'ThisIsASecretKey';

// 使用接收方的公钥加密密钥
const encryptedSecretKey = crypto.publicEncrypt(
  {
    key: publicKey,
    padding: crypto.constants.RSA_PKCS1_PADDING // 使用合适的填充方式
  },
  Buffer.from(secretKey, 'utf8')
);

// 将加密后的密钥发送给接收方,通常通过网络传输
fs.writeFileSync('encryptedSecretKey.pem', encryptedSecretKey);
console.log('加密后的密钥已发送给接收方');

后端接收方代码(使用私钥解密密钥):

const crypto = require('crypto');
const fs = require('fs');

// 从文件中读取接收方的私钥
const privateKey = fs.readFileSync('privateKey.pem', 'utf8'); // 或者使用接收方自己的私钥

// 从文件中读取接收方收到的加密后的密钥
const encryptedSecretKey = fs.readFileSync('encryptedSecretKey.pem');

// 使用接收方的私钥解密密钥
const decryptedSecretKey = crypto.privateDecrypt(
  {
    key: privateKey,
    padding: crypto.constants.RSA_PKCS1_PADDING // 使用相同的填充方式
  },
  encryptedSecretKey
);

// 现在可以使用解密后的密钥进行加密或其他操作
console.log('解密后的密钥:', decryptedSecretKey.toString('utf8'));

上述示例中,生成了一个RSA密钥对,包括公钥和私钥。在实际应用中,接收方应该拥有自己的私钥,而不是从文件中读取。密钥的安全性非常重要。私钥必须严格保密,并且只有接收方能够访问它。在实际应用中,您需要确保密钥的合适存储和管理,以防止泄漏或滥用。您还可以根据需要进行错误处理和异常处理,以确保代码的稳定性。

Web

网站开发

小程序制作

HTTPS

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情