关于Astro设置加密文章的一些思考

关于有人提需求要加密文章之后，我尝试了一些操作后的思考，记录并交流一下。

一般情况下，对于加密文章，会想到用户输入一个密码，发送给后端，后端判断密码正常正确之后，再发送文章给前端展示。

但是在Astro中作为一个没有后端的静态博客主题，密码的设置和验证都得放在前端来做，同样需要加密的文章也是在前端存储，相当于所有的内容都在前端。

这就导致了一个问题，当用户打开控制台的时候，总能查看到所有的信息（密码和需要加密的文章）。

所以我想了一个办法（目前无法实现）。

在写博客的时候需要填入key值（文章阅读密码），类似如下：

打包前：

1
title: 关于给博客添加加密文章的一些思考
2
data: 2024-10-22
3
key: hello

在项目打包的过程中，会删除key值，同时添加一条frontmatter属性，就是加密后的password，在客户端将只能看到password无法查看到key。

其中password是key通过sha256加密后的密码，key是加密前的密码，我们可以给每一篇文章设置不同的密码，而且密码可以很方便的记录在frontmatter中。

打包后：

1
title: 关于给博客添加加密文章的一些思考
2
data: 2024-10-22
3
password: 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

关于密码的设置方式还是很好理解的，麻烦的地方在于隐藏文章内容。

我们可以使用sha256不可逆的加密key，也同样可以使用对称加密的方式加密文章。

加密文章的这个操作最迟也放在部署之前，我们可以通过判断文章的frontmatter中有没有key属性来判断需不需要加密文章内容。

问题就在这里：Astro不是明文来渲染文章内容，而是使用内置Content组件来渲染内容，目前还没有好办法在其他地方拿到这个Content组件渲染的内容并加密。

1
---
2
const {Content, remarkPluginFrontmatter} = await entry.render();
3
---
4

5
<article class="markdown-body">
6
  <Content/>
7
</article>

遇到了这个问题之后，我就在Astro的discord中提问了相关问题，如何开发一个加密功能，如何提前拿到Content数据。

后来有人发了一个解决方式，是在打包完成之后，通过node的文件操作将文件中<article>标签的内容进行加密。

这是一种方式，但是无法做到给每一个文章设置一个密码，且在打包的时候需要额外再执行一条命令，也是跟astro完全无关的一种实现方式。

感觉官方后续可能会出更好的方式，所以先暂时搁置这个功能吧。

有大佬有时间可以去看一下这个Content怎么实现的，找找解决办法，共同交流一下。