[python]WEB加密聊天
app.py
from flask import Flask, render_template, request
from cryptography.fernet import Fernet
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/generate_key', methods=['POST'])
def generate_key():
key = Fernet.generate_key().decode()
return render_template('index.html', key=key)
@app.route('/encrypt', methods=['POST'])
def encrypt():
key = request.form['key']
message = request.form['message']
try:
fernet = Fernet(key.encode())
encrypted_message = fernet.encrypt(message.encode()).decode()
return render_template('index.html', key=key, encrypted_message=encrypted_message, show_key=True)
except Exception as e:
return render_template('index.html', key=key, error=f"加密失败: {str(e)}")
@app.route('/decrypt', methods=['POST'])
def decrypt():
key = request.form['key']
encrypted_message = request.form['encrypted_message']
try:
fernet = Fernet(key.encode())
decrypted_message = fernet.decrypt(encrypted_message.encode()).decode()
return render_template('index.html', key=key, encrypted_message=encrypted_message, decrypted_message=decrypted_message, show_key=True)
except Exception as e:
return render_template('index.html', key=key, encrypted_message=encrypted_message, error=f"解密失败: {str(e)}")
if __name__ == '__main__':
app.run(debug=True)templates\index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加密聊天</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #a2c2e0, #f0f4f8);
color: #333;
}
.chat-container {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 900px;
height: 90vh;
display: flex;
flex-direction: column;
}
.header {
background: #1e3a8a;
color: white;
padding: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
h1 {
margin: 0;
font-size: 2em;
}
.header form {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.header button {
padding: 10px 20px;
border: none;
border-radius: 8px;
background: linear-gradient(to right, #007bff, #0056b3);
color: white;
cursor: pointer;
font-size: 1em;
transition: background 0.3s;
}
.header button:hover {
background: linear-gradient(to right, #0056b3, #007bff);
}
.message-area {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.message {
padding: 12px;
border-radius: 12px;
word-wrap: break-word;
max-width: 70%;
margin: 5px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.message.user-a {
background: #e3f2fd;
align-self: flex-start;
}
.message.user-b {
background: #cfd8dc;
align-self: flex-end;
}
.info {
text-align: center;
margin: 10px 0;
}
.info p {
margin: 0;
font-size: 1.1em;
color: #1e3a8a;
}
.error {
color: #d32f2f;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
.input-area {
background: #f7f9fc;
padding: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
.input-area form {
display: flex;
flex-direction: column;
gap: 10px;
}
input[type="text"] {
padding: 12px;
border: 1px solid #1e3a8a;
border-radius: 8px;
outline: none;
font-size: 1em;
box-sizing: border-box;
transition: border-color 0.3s;
}
input[type="text"]:focus {
border-color: #0d2d6f;
}
button {
padding: 12px;
border: none;
border-radius: 8px;
background: linear-gradient(to right, #1e3a8a, #0d2d6f);
color: white;
cursor: pointer;
font-size: 1em;
transition: background 0.3s;
width: 100%;
}
button:hover {
background: linear-gradient(to right, #0d2d6f, #1e3a8a);
}
</style>
</head>
<body>
<div class="chat-container">
<div class="header">
<h1>加密聊天 v1.0</h1>
<!-- 生成密钥按钮 -->
<form action="/generate_key" method="post">
<button type="submit">生成密钥</button>
</form>
</div>
<div class="message-area">
<!-- 显示生成的密钥 -->
{% if key %}
<div class="info">
<h3>生成的密钥：</h3>
<p>{{ key }}</p>
</div>
{% endif %}
<!-- 显示加密后的消息 -->
{% if encrypted_message %}
<div class="message user-a">
<strong>A (加密消息):</strong>
<p>{{ encrypted_message }}</p>
</div>
{% endif %}
<!-- 显示解密后的消息 -->
{% if decrypted_message %}
<div class="message user-b">
<strong>B (解密消息):</strong>
<p>{{ decrypted_message }}</p>
</div>
{% endif %}
<!-- 错误信息 -->
{% if error %}
<div class="error">{{ error }}</div>
{% endif %}
</div>
<div class="input-area">
<!-- 加密消息 -->
{% if key %}
<form action="/encrypt" method="post">
<input type="hidden" name="key" value="{{ key }}">
<input type="text" name="message" placeholder="输入要加密的消息" required>
<button type="submit">发送加密消息</button>
</form>
{% endif %}
<!-- 解密密文 -->
<form action="/decrypt" method="post">
<input type="text" name="key" placeholder="输入密钥" required {% if key %}value="{{ key }}"{% endif %}>
<input type="text" name="encrypted_message" placeholder="输入要解密的密文" required>
<button type="submit">发送解密请求</button>
</form>
</div>
</div>
</body>
</html>