前端RSA加解密(支持超长分段)

过程不复杂, 只是网上结合后端的RSA加解密资料参差不齐, 比较零散, 而且大多博文都是基于最原始的RSA加解密, 当加解密参数过长的时候, 会报Message too long for RSA

解决方案, 找了一圈, 都不大完整, 完整的又很复杂, 加了一堆方法, 看着都头疼! 其实加解密的本质都一样的, 无非就是加解的过程问题, 我们知道加密过程, 那解密就是反推的事儿.

在此记录下, 方便自己和有需要的小伙伴能够快速找到! 什么原理什么逻辑就不废话了, 直接上代码!

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>aes demo</title>
    <meta http-equiv="Content-Type" content="text/html" charset="gbk"/>
    <style>
        *{margin:0;padding:0}
        .demo-wrap{width: 600px;height: 50px;margin: 50px auto auto auto}
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>
</head>
<body>
<div class="demo-wrap">

    <div  style="padding: 1rem 0">
        <button type="button" onclick="rsa_encrypt()">RSA加密</button>
        <br/>
        加密后的数据:<label id="rsa_encrypted"></label>
    </div>
    <div>
        <button type="button" onclick="rsa_decrypt()">RSA解密</button>
        <br/>
        解密后的数据:<label id="rsa_decrypted"></label>
    </div>
</div>
    <script type="text/javascript">

        function rsa_encrypt() {
            var data = "张三, 你好啊!";
            var publicKey = "-----BEGIN PUBLIC KEY-----自己的公钥-----END PUBLIC KEY-----";
            var en = new JSEncrypt();
            en.setPublicKey(publicKey);
            let num = Math.ceil(data.length/117)
            let dataArr = [];
            for(let i=0;i<num;i++){
                if (parseInt(117*(i+1))<=data.length) {
                    dataArr[i] = data.substring(117*i,117*(i+1));
                } else {
                    dataArr[i] = data.substring(117*i,data.length);
                }
                dataArr[i] = CryptoJS.enc.Base64.parse(en.encrypt(dataArr[i]));
            }
            document.getElementById("rsa_encrypted").innerHTML = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(dataArr.join('')));
        }

        function rsa_decrypt() {
            var data = "NdaCEc2HCEgTk1OQoWbfvj0KZwaKTDfn9CSpskkuHYZe2hEW0t72WwmXQOGHoLz9rqSm4uqbYT4uBrCky8WQFZHEdEsIwqk1YK2vatgaRgqb7cW7UxGrxsR8fqtYICTZlfju9TvNWGoTsJVJR+etMiVpEF4kshuKx1V2I9QM8ps=";

            data = CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(data));

            var privateKey = "-----BEGIN RSA PRIVATE KEY-----自己的私钥-----END RSA PRIVATE KEY-----";
            
            var en = new JSEncrypt();
            en.setPrivateKey(privateKey);
            let num = Math.ceil(data.length/256);
            let dataArr = [];
            for(let i=0;i<num;i++){
                if (parseInt(256*(i+1))<=data.length) {
                    dataArr[i] = data.substring(256*i,256*(i+1));
                } else {
                    dataArr[i] = data.substring(256*i,data.length);
                }
                dataArr[i] = en.decrypt(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(dataArr[i])));
            }
            document.getElementById("rsa_decrypted").innerHTML = dataArr.join('');
        }
    </script>
</body>
</html>
相关推荐
moshuying17 分钟前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一24 分钟前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js25 分钟前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化
愚坤1 小时前
前端真有意思,JS还能独立做项目?
前端·javascript·github
SGAMERrain1 小时前
# Nuxt 4 + MediaPipe:如何在浏览器中实现本地 AI 人脸分析?
前端
github_is_geeksKai2 小时前
浏览器端文件处理的边界:PDF 面单、GPX 隐私与 EPUB 修复
前端
deli0073 小时前
从一句反馈到一次升级:Mystudy 的自进化实践
前端
FungLeo3 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
FungLeo5 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo5 小时前
成为全栈·Vue 管理后台篇·分页只显示第一页:从接口total 定位到前端修复
前端·vue.js·状态模式·分页·naive ui·服务端分页·前端问题排查