<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>加密 - 标签 - 菠菜眾長</title><link>https://lruihao.cn/tags/%E5%8A%A0%E5%AF%86/</link><description>加密 - 标签 - 菠菜眾長</description><generator>Hugo -- gohugo.io</generator><language>zh-CN</language><managingEditor>1024@lruihao.cn (Lruihao)</managingEditor><webMaster>1024@lruihao.cn (Lruihao)</webMaster><lastBuildDate>Mon, 08 Aug 2022 13:49:22 +0800</lastBuildDate><atom:link href="https://lruihao.cn/tags/%E5%8A%A0%E5%AF%86/" rel="self" type="application/rss+xml"/><item><title>前端页面内容加密总结</title><link>https://lruihao.cn/posts/encryption-fe/</link><pubDate>Mon, 08 Aug 2022 13:49:22 +0800</pubDate><author>Lruihao</author><guid>https://lruihao.cn/posts/encryption-fe/</guid><description><![CDATA[<p>记录一下前端实现页面加密的思路。</p>
<h2 id="加密基础知识">加密基础知识</h2>
<h3 id="双向加密">双向加密</h3>
<p>可还原的加密算法，可以逆向解密。</p>
<ol>
<li>
<p>对称加密（单密钥加密）</p>
<p>采用单钥密码系统的加密方法，同一个密钥同时用作信息的加密和解密。</p>
<p>密钥生成算法有 DES、3DES、AES。</p>
</li>
<li>
<p>非对称加密（公开密钥系统）</p>
<p>两个密钥：公开密钥（publickey）和私有密钥（privatekey）。</p>
<p>公钥/私钥加密/签名，用私钥/公钥解密/验证签名。</p>
<p>密钥生成算法有 RSA（公钥、私钥）、DSA（公钥、私钥、数字签名）。</p>
</li>
</ol>
<h3 id="单向加密">单向加密</h3>
<p>不可还原的加密算法（暴力撞库除外），常见的算法有：MD5、SHA1、SHA256、SHA512。</p>
<h2 id="页面内容加密">页面内容加密</h2>
<p><figure><a class="lightgallery" href="/posts/encryption-fe/images/algorithm.jpg" data-thumbnail="/posts/encryption-fe/images/algorithm.jpg" data-sub-html="<h2>内容加密算法</h2><p>内容加密算法</p>"></a><figcaption class="image-caption">内容加密算法</figcaption>
  </figure></p>
<ol>
<li>通过比对密码和输入的 md5 值来判断密码是否输入正确</li>
<li>密码验证通过后，开始解密内容
<ol>
<li>拿到正确的输入值的 sha256 值的部分内容</li>
<li>然后按照加密规则解秘内容</li>
</ol>
</li>
</ol>
<p>这里利用 <code>Set</code> 进行事件管理，简单模拟了 <code>addEventListener</code> 和 <code>removeEventListener</code> 的操作。并提供了两个事件：<code>decrypted</code> 和 <code>reset</code>，详见 <a href="https://github.com/hugo-fixit/FixIt/blob/master/assets/js/fixit-decryptor.js"target="_blank" rel="external nofollow noopener noreferrer">fixit-decryptor.js<i class="fa-solid fa-external-link-alt fa-fw fa-xs ms-1 text-secondary" aria-hidden="true"></i></a>。</p>]]></description></item></channel></rss>