How To Blog 02: Astro❤️Password | Yesterday17's Blog

前言

大家好，好久（一会）不见，我是某昨。

最近把博客进行迁移的过程中，个人体感最明显的缺失功能就是密码。对于时不时会逆向一些专有软件的我而言，有些东西是不大适合公开可访问的。Wordpress 的密码功能很好地解决了这个问题，但在静态博客生成工具中我一直没有找到很好的解决方案。

理论上，实现某篇博客文章的密码保护可以有以下两种方式：

一种是在运行时有一个简单的后端服务，负责校验密码、返回文章内容
一种是在构建时对文章进行对称/非对称加密，然后在前端解密

我选择了第二种，因为第二种的部署方式能够 100% 静态化，架构上也相比前者简单不少。

定义一个密码

首先，我们需要定义一个密码。我选择在 frontmatter 区域增加一个 password 字段：

import { SITE } from "@config";
import { defineCollection, z } from "astro:content";
const blog = defineCollection({
  type: "content",
  schema: ({ image }) =>
    z.object({
14 collapsed lines
      author: z.string().default(SITE.author),
      published_at: z.date(),
      modified_at: z.date().optional().nullable(),
      title: z.string(),
      featured: z.boolean().optional(),
      draft: z.boolean().optional(),
      tags: z.array(z.string()).default(["others"]),
      ogImage: image()
        .refine(img => img.width >= 1200 && img.height >= 630, {
          message: "OpenGraph image must be at least 1200 X 630 pixels!",
        })
        .or(z.string())
        .optional(),
      description: z.string(),
      canonicalURL: z.string().optional(),
      password: z.string().optional(),
    }),
});
export const collections = { blog };

这样就可以在 Markdown 的首部定义密码了，就像这样：

---
author: Yesterday17
published_at: 2024-03-31T16:58:25.000+08:00
#modified_at:
title: Sample Password-protected page (pass=test)
slug: blog-02-password-example
featured: false
draft: false
tags:
  - blog
description: It's just an example.
password: test
---
## ToC

加密与解密

要回答加密和解密的问题，我们首先需要理清楚需要解决的问题：

如何获取待加密的文本？
如何加密？
用户如何输入密码？
如何解密？
解密后如何展示？

一项项看，首先是加密的文本。在咕老师的帮助下，我们在 Stackoverflow 上发现可以通过 slot.render() 的方式拿到 HTML 文本：

---
const html = await Astro.slots.render("default");
import { Code } from "astro/components";
---
<Fragment set:html={html} />
<Code code={html} lang="html" />

使用的时候只要把希望加密的组件放到这个 Wrapper 的里面就可以了：

---
import Card from "../components/Card.astro";
import StringWrapper from "../components/StringWrapper.astro";
---
<StringWrapper>
  <Card title="Test" />
</StringWrapper>

拿到待加密的文本之后，第二个问题是如何加密。我们选择通过 AES-256-CBC 简单加密一下：

export async function encrypt(data: string, key: string): Promise<string> {
  key = key.padEnd(16, "0");
  const dataBuffer = Buffer.from(data);
  const keyBuffer = Buffer.from(key);
  const cryptoKey = await crypto.subtle.importKey(
    "raw",
    keyBuffer,
    { name: "AES-CBC", length: 256 },
    false,
    ["encrypt"]
  );
  const iv = crypto.getRandomValues(new Uint8Array(16));
  const encryptedData = await crypto.subtle.encrypt(
    { name: "AES-CBC", iv },
    cryptoKey,
    dataBuffer
  );
  const combinedData = new Uint8Array(iv.length + encryptedData.byteLength);
  combinedData.set(iv);
  combinedData.set(new Uint8Array(encryptedData), iv.length);
  return Buffer.from(combinedData).toString("base64");
}

这里基本都是用了 WebCrypto，只在 Buffer 的部分偷了一下懒x

加密完成之后就是用户界面了，在副驾驶的帮助下搓了个姑且能看的：

13 collapsed lines
---
import { encrypt } from "@utils/encrypt";
export interface Props {
  password: string;
}
const html = await Astro.slots.render("default");
const encryptedHtml = await encrypt(html, Astro.props.password);
---
<meta name="encrypted" content={encryptedHtml} />
<div>
  <input
    id="password"
    class="w-auto rounded border border-skin-fill
border-opacity-40 bg-skin-fill p-2 text-skin-base
placeholder:italic placeholder:text-opacity-75
focus:border-skin-accent focus:outline-none"
    placeholder="Enter password"
    type="text"
    autocomplete="off"
    autofocus
  />
  <button
    id="password-btn"
    class="bg-skin-full rounded-md
    border border-skin-fill border-opacity-50 p-2
    text-skin-base
    hover:border-skin-accent"
  >
    Submit
  </button>
</div>

再搓一个配套的解密，但这里就不能用 Buffer 了，需要纯浏览器端可用，最后把代码串起来：

36 collapsed lines
---
import { encrypt } from "@utils/encrypt";
export interface Props {
  password: string;
}
const html = await Astro.slots.render("default");
const encryptedHtml = await encrypt(html, Astro.props.password);
---
<meta name="encrypted" content={encryptedHtml} />
<div>
  <input
    id="password"
    class="w-auto rounded border border-skin-fill
border-opacity-40 bg-skin-fill p-2 text-skin-base
placeholder:italic placeholder:text-opacity-75
focus:border-skin-accent focus:outline-none"
    placeholder="Enter password"
    type="text"
    autocomplete="off"
    autofocus
  />
  <button
    id="password-btn"
    class="bg-skin-full rounded-md
    border border-skin-fill border-opacity-50 p-2
    text-skin-base
    hover:border-skin-accent"
  >
    Submit
  </button>
</div>
<script is:inline data-astro-rerun>
  async function decrypt(data, key) {
    key = key.padEnd(16, "0");
    const decoder = new TextDecoder();
    const dataBuffer = new Uint8Array(
      atob(data)
        .split("")
        .map(c => c.charCodeAt(0))
    );
    const keyBuffer = new TextEncoder().encode(key);
    const cryptoKey = await crypto.subtle.importKey(
      "raw",
      keyBuffer,
      { name: "AES-CBC", length: 256 },
      false,
      ["decrypt"]
    );
    const iv = dataBuffer.slice(0, 16);
    const encryptedData = dataBuffer.slice(16);
    const decryptedData = await crypto.subtle.decrypt(
      { name: "AES-CBC", iv },
      cryptoKey,
      encryptedData
    );
    return decoder.decode(decryptedData);
  }
  function prepare() {
    const encrypted = document
      .querySelector("meta[name=encrypted]")
      ?.getAttribute("content");
    const input = document.getElementById("password");
    const btn = document.getElementById("password-btn");
    const article = document.querySelector("#article");
    btn?.addEventListener("click", async () => {
      const password = input.value;
      try {
        const html = await decrypt(encrypted, password);
        article.innerHTML = html;
      } catch (e) {
        alert("Incorrect password");
      }
    });
  }
  prepare();
  document.addEventListener("astro:after-swap", prepare);
</script>

这里值得注意的是 [1] 和 [2] 的部分。由于 Astro 的 View Transition 机制，不能保证脚本的执行。因此需要通过 event 的方式手动在页面变换的时候加上 Listener。

套壳，启动！

完成了加密组件，接下来就要给我们有密码的文章套上这个加密的壳了。我们先弄个简单的 Wrapper，方便我们套：

---
import Encrypt from "./Encrypt.astro";
export interface Props {
  password?: string;
}
const password = Astro.props.password;
---
{
  !password ? (
    <slot />
  ) : (
    <Encrypt password={password}>
      <slot />
    </Encrypt>
  )
}

然后在合适的地方把 PasswordWrapper 塞进去：

<article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
  <PasswordWrapper password={post.data.password}>
    <Content />
  </PasswordWrapper>
</article>

就大功告成啦！

体验一下？

最终的成品在这里。你可以尝试输入密码（test），解密后的内容渲染应该是可以正常工作的。

关于未来

最主要的有/无问题已经解决，接下来就是体验优化的部分了。简单列了一下可以优化的点：

目前的密码没有任何缓存，因此每次刷新都需要重新输入一遍。~~这里可能需要 localStorage 帮一下忙，存一下密码（~~最后用了 query
~~此外，密码加密的文章在文章列表里也应该有一个专门的图标用来标识（比如🔒）~~ 加了把可爱的锁x
以及，解密成功能不能有个动画（？
最后，有没有可能支持一下文章内的局部加密呢，不过这可能就是很远之后的事情了（笑）

嘛，就是这样x