python3 flask web前端加密

目录结构

app/
  |---test.py  
  |---loginrsa.py
  |---static/
          |-----js/
                 |----jquery.js   (官方下载的)
                 |----jsencrypt.min.js 网上下载的
  |---templates/
          |-----test.html
1) test.py
# -*- coding:utf8 -*-

from  flask import  Flask,render_template,redirect,url_for,request,session
from loginrsa import *

app = Flask(__name__)
SECRET_KEY="younamecalledzhengdan"
app.config['SECRET_KEY'] = SECRET_KEY

@app.route('/test',methods=['GET','POST'])
def test():
    if request.method =='GET':
        privkey,pubkey = create_rsa_key()
        pubkey_before =pubkey
        session['privkey']=privkey
        pubkey_split = str(pubkey[27: -25]).replace("\\n","")
        return render_template('test.html',
            pubkey_before=pubkey_before,pubkey_split=pubkey_split)
    elif request.method == 'POST':
        data = request.form['data']
        print(data)
        privkey = session.get('privkey')
        data = decrypt_data(data,privkey)
        print(data)
        return 'right'

if __name__== "__main__":
    app.run(debug=True)
2) loginrsa.py
from Cryptodome.PublicKey import RSA
from Cryptodome.Cipher import PKCS1_OAEP, PKCS1_v1_5
import base64
from urllib import parse

#加密所需要的公钥和私钥
def create_rsa_key(password="123456"):

    key = RSA.generate(1024)
    encrypted_key = key.exportKey(passphrase=password, pkcs=8,
                                  protection="scryptAndAES128-CBC")

    privkey = encrypted_key
    pubkey = key.publickey().exportKey()
    return (privkey,pubkey)

#解密
def decrypt_data(data,priv_key,code="123456"):
    data = parse.unquote(data)
    data = base64.b64decode(data)
    priv_key = RSA.import_key(priv_key,passphrase=code)
    cipher_rsa = PKCS1_v1_5.new(priv_key)
    sentinel = None
    ret = cipher_rsa.decrypt(data, sentinel)
    return ret
3) test.html
<!DOCTYPE html>
<html>
<head>
    <script src="/static/js/jsencrypt.min.js"></script>
    <script src="/static/js/jquery.js"></script>
</head>
<body>
<p>后端传过来的数据</p>
<textarea  rows="6" cols="120">{{ pubkey_before }}</textarea>
<p>截取过的数据</p>
<textarea  id="pubkey" rows="6" cols="120">{{ pubkey_split }}</textarea>
<form method="post" onsubmit="return false" accept-charset="utf-8">
加密前:<br>
<input id='beforedata' type="text" name="before"  maxlength="14">
<br>

加密后:<br>
<textarea  id="afterdata" rows="6" cols="120"></textarea>
<br><br>
<button type="button">测试</button>
</form>
</body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    let beforedata = $("#beforedata").val();

    let pubkey  =  $("#pubkey").val();

    let  encryptobj =new JSEncrypt();

    pubkey = pubkey.slice(2,-1);


    encryptobj.setPublicKey(pubkey);
    let afterdata = encryptobj.encrypt(beforedata);
    $("#afterdata").html(afterdata);

    afterdata = encodeURI(afterdata).replace(/\+/g, '%2B');

    $.post("/test",
    {
      data:afterdata
    },
    function(data,status){
      alert("数据:" + data + "\n状态:" + status);
    });
  });
});
</script>
</html>


运行flask程序,刷新浏览器
这里写图片描述
之后再加密前的那个输入框,填入英文字母,比如:woshicaiji后,点击测试按钮
这里写图片描述
加密的数据发往后台,进行解密
这里写图片描述

猜你喜欢

转载自blog.csdn.net/baidu_36831253/article/details/79686228