首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

前端RSA密钥生成和加解密——window.crypto使用相关

编程知识
2024年08月03日 13:20

转自简书,原文地址,本文介绍window.crypto关于RSA方面的API。


crypto API支持常用的rsa、aes加解密,这边介绍rsa的应用。

浏览器兼容性

window.crypto需要chrome 37版本,ie 11,safari 11才支持全部API而基本的加解密在safari 7就可以。

生成公私钥

crypto.subtle.generateKey(algorithm, extractable, keyUsages),其中:
1.algorithm参数根据不同算法填入对应的参数对,rsa需要填入RsaHashedKeyGenParams对象包含有:

  • name,可选RSASSA-PKCS1-v1_5, RSA-PSS, or RSA-OAEP,这边如果用于加解密是不支持旧的RSAES-PKCS1-v1_5的(jsencrypt.js支持),RSASSA-PKCS1-v1_5用于签名

  • modulusLength,为rsa位数,推荐至少2048位(相当于112位的aes)才能较为安全,此参数最为影响性能,比如1024比2048快非常多,NIST建议目前的RSA秘钥安全强度是2048位,如果需要工作到2030年之后,就使用3072位的秘钥

  • publicExponent,一般直接为[0x01, 0x00, 0x01]

  • hash,摘要方式,可选SHA-256SHA-384SHA-512,这边也允许SHA-1,但是因为其安全性所以基本不建议

2.extractable一般是true,表示是否允许以文本的方式导出key

3.keyUsages是一个数组,里面可选encryptdecryptsign

window.crypto.subtle.generateKey(
    {
        name: "RSA-OAEP",
        modulusLength: 2048,
        publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
        hash: {
            name: "SHA-512" // 这边如果后端使用公钥加密,要注意与前端一致
        },
    },
    true,
    ["encrypt", "decrypt"] // must be ["encrypt", "decrypt"] or ["wrapKey", "unwrapKey"]
)

函数结果返回一个promise对象,如果是对称加密会得到一个密钥CryptoKey类型,这边rsa会得到一个密钥对CryptoKeyPair,它有2个CryptoKey成员,privateKeypublicKey,我们导出密钥为文本或者加解密都将通过这2个成员对象。

导出公私钥

window.crypto.subtle.exportKey(format, key),其中:
1.format可选rawpkcs8spkijwk,我们这边在导出公钥时选spki,私钥选pkcs8

2.key就是上面CryptoKeyPairprivateKey或者publicKey
函数返回一个promise对象,结果是一个ArrayBuffer,这边转成pem风格。

// 导出私钥
 window.crypto.subtle.exportKey(
    "pkcs8", // 公钥的话这边填spki
    key.privateKey // 公钥这边是publicKey
).then(function(keydata2) {
    let privateKey = RSA2text(keydata1, 1) // 私钥pem
}).catch(function(err) {
    console.error(err)
})
// pem格式文本
function RSA2text(buffer, isPrivate = 0) {
    let binary = ''
    const bytes = new Uint8Array(buffer)
    const len = bytes.byteLength
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
    }
    const base64 = window.btoa(binary)
    let text = "-----BEGIN " + (isPrivate ? "PRIVATE" : "PUBLIC") + " KEY-----\n" // 这里-----BEGIN和-----是固定的
    text += base64.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{64}\x01?/g, "$&\n") // 中间base64编码
    text += "\n-----END " + (isPrivate ? "PRIVATE" : "PUBLIC") + " KEY-----" // 这里-----END和-----是固定的
    return text
}

导入公私钥

window.crypto.subtle.importKey(
format,
keyData,
algorithm,
extractable,
keyUsages
)
,其中:
1.format可选rawpkcs8spkijwk,对应之前生成时的选择,我们这边在导入公钥时选spki,私钥选pkcs8

2.keyData,即window.crypto.subtle.exportKey获得的ArrayBuffer,由于在这里时我们一般只有pem文本的,所以还需要做转换成ArrayBuffer。

3.algorithm这边我们是rsa,需要填入一个RsaHashedImportParams对象,这边对应crypto.subtle.generateKey所需的RsaHashedKeyGenParams对象,含有:

  • name,都保持与之前一致
  • hash

4.extractablecrypto.subtle.generateKey

5.keyUsagescrypto.subtle.generateKey
函数返回一个promise对象,结果是一个CryptoKey

// 导入公钥
const pub = "-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAo5NwYVVSg6rmAIKoxvCI
4Rn7FYh0mOFrnr0q2+r99/ZGuYCj5b6FQ8BwaaU8XpRn/y3W7W2bCggNRwllWQ2r
dHIM+6vN2Yi/QYntKqbcRNlK1s02G2lw9pERaWi15+5P8+AFR8IHANm/Dd/19OlM
5FZ9hh+qG7FXFhV2i4r62pUZxhk6ykItOT16IH5poK9eEDhqsXZ+3UW6cGlxANgO
jHJEnZpNCI5tS/4kFhLogHvEd88MoapljL6cZXk3ZafvxgUwxI6BZIhlw0adh2sj
bByIHitjRxqKMDH7uSdV9zf8t5Wa0bZFcUpcb5Jx2QBWIlO1qP+Q4LLMbNvEHeBC
4wIDAQAB
-----END PUBLIC KEY-----"

const pemHeader = "-----BEGIN PUBLIC KEY-----" // 之前RSA2text函数里面的头尾标识,这个是公钥的
const pemFooter = "-----END PUBLIC KEY-----"
const pemContents = pub.substring(pemHeader.length, pub.length - pemFooter.length) // 去除pem头尾
// base64解码
const binaryDer = window.atob(pemContents)
// 转为ArrayBuffer二进制字符串
const binary = str2ab(binaryDer)
window.crypto.subtle.importKey(
    "spki", // 这边如果私钥则是pkcs8
    binary , 
    {
        name: "RSA-OAEP",
        hash: "SHA-512" // 保持一致
    },
    true, 
    ["encrypt"] // 用于加密所以是公钥,私钥就是decrypt
)

function str2ab(str) {
    const buf = new ArrayBuffer(str.length)
    const bufView = new Uint8Array(buf)
    for (let i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i)
    }
    return buf
}

加密解密

加密crypto.subtle.encrypt(algorithm, key, data),其中:
1.algorithm,加解密只支持RSA-OAEP不支持RSAES-PKCS1-v1_5

2.key即公钥的CryptoKey对象

3.data是一个BufferSource对象,不能直接是要加密的字符串。
结果是一个ArrayBuffer,可以使用window.btoa(String.fromCharCode(...new Uint8Array(e)))输出为base64字符串

const enc = new TextEncoder()
const data = enc.encode("sucks") // 这边将要加密的字符串转为utf-8的Uint8Array
window.crypto.subtle.encrypt(
    {
        name: "RSA-OAEP"
    },
    publicKey, // 生成或者导入的CryptoKey对象
    data
)

解密crypto.subtle.decrypt(algorithm, key, data),基本同加密,这边data对应为加密返回的ArrayBuffer,如果是base64字符串比如从后端加密过来的,就需要转为Uint8Array。

function base64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')

    const rawData = window.atob(base64)
    const outputArray = new Uint8Array(rawData.length)

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i)
    }
    return outputArray
}

返回值同加密

From:https://www.cnblogs.com/charleschwang/p/18331401
本文地址: http://www.shuzixingkong.net/article/744
0评论
提交 加载更多评论
其他文章 参加阿里云X优酷AI江湖创作大赛,赠送博客园T恤
8月刚开始就接到一个阿里云的广告单子,也是 CPA(Cost Per Action) 方式,按有效参赛人数付费,KPI是完成500人参赛。参赛方式是基于阿里云函数计算服务部署的AI绘画平台创作图片作品,参赛者基于网剧《少年白马醉春风》的故事内容、人物角色、场景或以“少年江湖”为精神内核进行自由创作
参加阿里云X优酷AI江湖创作大赛,赠送博客园T恤 参加阿里云X优酷AI江湖创作大赛,赠送博客园T恤 参加阿里云X优酷AI江湖创作大赛,赠送博客园T恤
ComfyUI插件:ComfyUI layer style 节点(三)
前言: 学习ComfyUI是一场持久战,而ComfyUI layer style 是一组专为图片设计制作且集成了Photoshop功能的强大节点。该节点几乎将PhotoShop的全部功能迁移到ComfyUI,诸如提供仿照Adobe Photoshop的图层样式、提供调整颜色功能(亮度、饱和度、对比度
ComfyUI插件:ComfyUI layer style 节点(三) ComfyUI插件:ComfyUI layer style 节点(三) ComfyUI插件:ComfyUI layer style 节点(三)
前端性能优化---防抖与节流--02
防抖(Debounce)和节流(Throttle)是两种常用的优化技术,主要用于控制高频率的事件触发,如滚动、输入、窗口调整大小等。本文将深入探讨防抖与节流的原理、实现方法及其应用场景。 简单场景就是:输入框防抖,滚动节流 1. 防抖(Debounce) 防抖是一种在事件频繁触发时,通过延迟执行来减
LogCat连接安卓手机拉取日志到本地(Unity开发版)
unity开发游戏的时候经常会碰到安卓手机真机报错/崩溃,定位问题需要拉取安卓手机上的日志到电脑上来查看。 1. unity安装的时候,勾选安卓模块(sdk这些记得勾选安装) 2. 打开对应安卓模块个目录下的adb目录, 当前我的安装目录为C:\Program Files\Unity\Hub\Edi
LogCat连接安卓手机拉取日志到本地(Unity开发版) LogCat连接安卓手机拉取日志到本地(Unity开发版) LogCat连接安卓手机拉取日志到本地(Unity开发版)
SourceGenerator 生成db to class代码优化结果记录 二
优化 在上一篇留下的 Dapper AOT 还有什么特别优化点的问题 在仔细阅读生成代码和源码之后,终于得到了答案 个人之前一直以为 Dapper AOT 只用了迭代器去实现,所以理应差不多实现代码却又极大差距,思维陷入了僵局,一度以为有什么黑魔法 结果 Dapper AOT 没有用迭代器去实现!!
使用 Alba 对 AspnetCore项目进行测试
前言 在AspnetCore生态系统中,我们测试项目一般使用Microsoft.AspNetCore.TestHost的TestServer 到.NET6后提供的Microsoft.AspNetCore.Mvc.Testing的WebApplicationFactory,后者是前者的封装,专门用于测
使用 Alba 对 AspnetCore项目进行测试
常回家看看之fastbin_attack
常回家看看之fastbin_attack 原理分析 fastbin属于小堆块的管理,这里说的fastbin_attack大多指glibc2.26之前的手法,因为自glibc2.26以后,glibc迎来了一位新成员tcachebin,它减少了堆的开销,使堆管理变得迅速而高效,而且申请的小堆块会优先进入
常回家看看之fastbin_attack 常回家看看之fastbin_attack 常回家看看之fastbin_attack
识货小程序逆向
​ 声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!wx a15018601872,x30184483xx 本文章未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术