javascript版前端页面RSA非对称加密解密

最近由于项目需要做一个url传参，并在页面显示参数内容的需求，这样就会遇到一个url地址可能会被假冒，

并传递非法内容显示在页面的尴尬情况

比如xxx.shtml?server=xxx是坏人&name=xxxoo

这个url被人篡改胡乱发出去，追究责任还是要追究到网站负责人的。

于是想起来用加密url参数的方法，最先想到的是用base64加密参数，但是这样有点钱的知识的人，在js里面看

到如何解密，就知道怎么加密了，url还是能胡乱伪造后来仔细思量加密，非对称加密，一闪而过，在网上找了

一下相关资料，发现有javascript版本的RSA非对称加密，大概看下如何使用：

服务器后端生成url的时候用公钥加密生成url，前端页面得到参数后，再去后端请求后端去解密。 （其实后端不用rsa也可以）秘钥不能放前端页面（泄露），否则还是可以用公钥、私钥加密后参数放url里面冒充

其实最终还是依赖后端开发加密解密。

顺便研究了一下RSA加密解密

使用总结：

加密明文最多117字节(中文41个以内)

私钥加密 私钥解密-可以
公钥解密-不可
公钥加密 私钥解密-可以
公钥解密-不可

 

 

 

 

 

 废话完毕，直接上代码： 

<!DOCTYPE html>
<html>

<head>
    <title>javascript非对称加密(RSA)JSEncrypt Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jsencrypt.js"></script>
    <style type="text/css">
    .container {
        width: 1000px;
        margin: 0 auto;
    }

    .tabs {
        border: solid 1px #ccc;
        border-collapse: collapse;
    }

    .tabs td {
        border: solid 1px #ccc;
        border-collapse: collapse;
        padding: 10px;
    }
    </style>
</head>

<body>
    <div class="container">
        <label for="privkey">Private Key</label><br />
        <textarea id="privkey" rows="15" cols="65">-----BEGIN RSA PRIVATE  KEY-----
MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
8XJTSdcIX4a3gy3GGCJxOzv16XHxD03GW6UNLmfPwenKu+cdrQeaqEixrCejXdAF
z/7+BSMpAkEA8EaSOeP5Xr3ZrbiKzi6TGMwHMvC7HdJxaBJbVRfApFrE0/mPwmP5
rN7QwjrMY+0+AbXcm8mRQyQ1+IGEembsdwJBAN6az8Rv7QnD/YBvi52POIlRSSIM
V7SwWvSK4WSMnGb1ZBbhgdg57DXaspcwHsFV7hByQ5BvMtIduHcT14ECfcECQATe
aTgjFnqE/lQ22Rk0eGaYO80cc643BXVGafNfd9fcvwBMnk0iGX0XRsOozVt5Azil
psLBYuApa66NcVHJpCECQQDTjI2AQhFc1yRnCU/YgDnSpJVm1nASoRUnU8Jfm3Oz
uku7JUXcVpt08DFSceCEX9unCuMcT72rAQlLpdZir876
-----END RSA PRIVATE KEY-----</textarea><br />
        <label for="pubkey">Public Key</label><br />
        <textarea id="pubkey" rows="10" cols="65">-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDlOJu6TyygqxfWT7eLtGDwajtN
FOb9I5XRb6khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76
xFxdU6jE0NQ+Z+zEdhUTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4
gwQco1KRMDSmXSMkDwIDAQAB
-----END PUBLIC KEY-----</textarea><br />
        <div class="tool">
            输入需要加密文字：<br />
            <textarea name="" id="needCrypt" cols="65" rows="10">测试XXXX</textarea>
            <br /><a href="javascript:void(0);" id="crypt-btn">私钥加密</a>
            <a href="javascript:void(0);" id="crypt-btn-pub">公钥加密</a><br />
            加密结果：<br />
            <textarea name="" id="resultCrypt" cols="65" rows="10">

  </textarea>
            <br /><a href="javascript:void(0);" id="decrypt-btn">私钥解密</a>
            <a href="javascript:void(0);" id="decrypt-btn-pub">公钥解密</a><br />
            解密结果：<br />
            <textarea name="" id="result" cols="65" rows="10">
  </textarea>
        </div>
        <div>
            <h3>使用总结：</h3>
            <p>加密明文最多117字节(中文41个以内)</p>
            <table class="tabs">
                <tr>
                    <td rowspan="2">私钥加密</td>
                    <td>私钥解密-可以</td>
                </tr>
                <tr>
                    <td>公钥解密-不可</td>
                </tr>
                <tr>
                    <td rowspan="2">公钥加密</td>
                    <td>私钥解密-可以</td>
                </tr>
                <tr>
                    <td>公钥解密-不可</td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
        //setPrivateKey 和 setPublicKey 的处理方法一样的，RSA插件不关心传入的是公钥还是私钥
        // Call this code when the page is done loading.
        $(function() {
            $("#crypt-btn").click(function() { //私钥加密
                // Encrypt with the public key...
                var encrypt = new JSEncrypt();
                encrypt.setPrivateKey($('#privkey').val());
                var encrypted = encrypt.encrypt($("#needCrypt").val());
                $("#resultCrypt").val(encrypted);
            });
            $("#crypt-btn-pub").click(function() { //公钥加密
                // Encrypt with the public key...
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey($('#pubkey').val());
                var encrypted = encrypt.encrypt($("#needCrypt").val());
                $("#resultCrypt").val(encrypted);
            });
            $("#decrypt-btn").click(function() { //私钥解密
                // Decrypt with the private key...
                var decrypt = new JSEncrypt();
                decrypt.setPrivateKey($('#privkey').val());
                var uncrypted = decrypt.decrypt($("#resultCrypt").val());
                $("#result").val(uncrypted);
            });
            $("#decrypt-btn-pub").click(function() { //公钥解密
                // Decrypt with the private key...
                var decrypt = new JSEncrypt();
                decrypt.setPublicKey($('#pubkey').val());
                var uncrypted = decrypt.decrypt($("#resultCrypt").val());
                $("#result").val(uncrypted);
            });
        });
        </script>
    </div>
</body>

</html>

 

 

 下载

示例：RSA非对称加密示例

posted on 2017-12-28 12:16  靖儿  阅读(12292)  评论(4)  编辑  收藏  举报

导航