加密算法演示系统：从凯撒密码到视觉密码
纯前端实现的加密算法可视化教学系统，覆盖从古典替换密码到现代AES、RSA和视觉密码的10种算法。
本文记录了一个面向教学的加密算法 Web 演示系统。系统用纯前端技术实现了 10 种加密算法，通过分步骤的过程可视化和交互式操作面板，把原本抽象的密码学原理变得直观可感。
系统概述
这是《信息安全技术》选修课的大作业。核心思路是：每个算法都不只是”输入明文 → 输出密文”，而是让用户看到每一轮的状态变化——无论是 Feistel 网络的 L/R 寄存器、AES 的 S 盒替换，还是视觉密码的像素扩展。
在线演示地址：yauanyyy.github.io/Encryption-Algorithm-Demonstration-System
算法一览
古典密码
凯撒密码与一次性密码本展示了替换密码的两个极端：前者的安全性仅依赖于密钥空间大小（26），而后者在密钥真随机且不重用的前提下达到了信息论安全。
Playfair 密码基于 5×5 矩阵进行双字母替换，系统动态展示了矩阵生成和行列置换规则的执行过程。
流密码
基于 RC4 变体的流密码模块展示了 PRNG 密钥流生成（KSA + PRGA），并醒目提示了”禁止密钥重用”的安全原则——这是流密码在实际使用中最容易踩的坑。
分组密码：DES 与 AES
DES 严格遵循 FIPS 46-3，完整展示 16 轮 Feistel 迭代，每轮 L/R 寄存器状态可观察。AES-256 则展示 SPN 结构的四个核心操作：SubBytes、ShiftRows、MixColumns、AddRoundKey，其中 MixColumns 涉及 GF(2^8) 有限域上的多项式乘法。
两者放在一起对比，能清晰看到 Feistel 和 SPN 两种主流分组密码结构的差异。
视觉密码
这是系统最有特色的模块。基于 (2, 2) 门限方案，利用 HTML5 Canvas 进行像素级操作：
- 预处理：上传图片 → 灰度化 → 二值化
- 分发：根据概率矩阵将每个像素扩展为 2×2 的子像素块，生成两张看似噪点的分存图
- 恢复：通过
ImageData模拟两张胶片的物理叠加，逻辑 OR 对应光线遮挡
扩展视觉密码 (EVCS) 更进一步，允许分存图本身也是一张有意义的图像，而非完全随机的噪点。
RSA 与 MD5
RSA 以教学流程演示密钥生成（选 p、q → 算 N、φ(N) → 选 e → 求 d）和模幂加解密。MD5 展示任意长度消息压缩为 128 位摘要的过程，同时科普了碰撞风险和弃用原因。
技术架构
纯静态前端，无需 Node.js 或数据库：
- JavaScript (ES6+) 原生实现全部算法逻辑
- Canvas API 处理视觉密码的像素操作
- LocalStorage 模拟用户数据和权限管理
- SHA-256 加盐哈希 处理登录注册
- CSS Variables 实现亮/暗主题切换