前我使用的方案是，将网页的主要内容 post 的display设为none，只有通过鉴定权限才能显示。

访问每一个页面时，都会鉴定权限，首先会话缓存中如果 auth_token 为 true，那么可以直接显示，否则需要跳转到登陆页面，并返回某个重定向网页，此时将 auth_token 设为 true。

这种基于浏览器的方法自然有非常多的漏洞，目前的破解方式包括：

  1. 在跳转到登陆页面之前，点击浏览器中的暂停按钮，然后手动在控制台中添加会话缓存 sessionStorage.setItem(‘auth_token’, 'true'); 刷新页面即可绕过登陆
  2. 直接使用curl，读取整个页面的内容

对于我目前的方案，一个改进的思路是不用会话缓存，使用登陆后重定向来访问某个页面。但问题是在处理重定向回调时，如果已经成功登陆，只能重定向到 callback url 列表中允许的网页，而不能直接跳转到我博客某个文章的网页，并且 auth0 不支持callback url 中使用通配符，否则可以用别的方式进行攻击。

ChatGPT建议的各种方法，包括利用AJX，或者react的路由等，实际上需要重新设计整个网站，并不适合非常简单的使用静态路由的 hexo。更重要的是，就算我重新搭建网站，也改变不了使用 curl 可以轻易读取全部内容的缺陷，除非我使用服务器加密。

在「静态站点生成器与具有优质内容的网站的专用后端」这篇回答中，直接否定了使用静态网页生成器和auth0加密网站的可能性，必须要带有专用的后端。但这篇文章给了一个比较简单的实现方案：

  1. Generate static pages with Hugo;
  2. Use those pages as templates for serving it up with FastAPI and Jinja2;
  3. Use Auth0 for authO/authZ (they have a blog about combining it with FastAPI)

更加复杂的加密方法可以查看 如何构建一个受保护的网站 | 夜天之书。

使用 Auth0 的加密方法

要将 Auth0 集成到 Hexo 生成的博客中，可以按照以下步骤操作：

1. 创建 Auth0 账户和应用

  • 注册 Auth0：访问 Auth0 网站 并注册一个账户，可以用Google登陆。
  • 创建应用：在 Auth0 Dashboard 中，选择“Applications”，然后点击“Create Application”。
  • 应用类型：选择“Single Page Web Applications”。
  • 配置应用：在应用设置中，配置“Allowed Callback URLs”、“Allowed Logout URLs”和“Allowed Web Origins”，在其中添加上博客的域名，包括本地调试的域名，例如 localhost 等，否则会报 Callback URL mismatch.的错误

2. 安装 Auth0 SDK

在你的 Hexo 项目中，需要使用 Auth0 的 JavaScript SDK。你可以通过以下步骤添加：

  1. 安装 npm 包：

    1
    npm install @auth0/auth0-spa-js

  2. 在 Hexo 中引用 SDK：

    在 Hexo 的主题或布局文件中（如 layout/_partial/head.ejs），添加 SDK 的引用：

    1
    <script src="https://cdn.auth0.com/js/auth0-spa-js/1.19/auth0-spa-js.production.js"></script>

    如果使用的是 pug，可添加

    1
    script(src='https://cdn.auth0.com/js/auth0-spa-js/1.19/auth0-spa-js.production.js')

3. 实现身份验证

在 Hexo 的主题或布局文件中（如 layout/_partial/head.ejs 或 layout/_partial/footer.ejs），添加以下 JavaScript 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
  document.addEventListener('DOMContentLoaded', async () => {
    const auth0 = await createAuth0Client({
      domain: 'YOUR_DOMAIN',
      client_id: 'YOUR_CLIENT_ID'
    });

    const isAuthenticated = await auth0.isAuthenticated();

    if (isAuthenticated) {
        // 用户已登录
        const user = await auth0.getUser();
        console.log(user);
    } else {
        // 用户未登录，触发登录
        if (!sessionStorage.getItem('authRedirect')) {
            sessionStorage.setItem('authRedirect', 'true');
            await auth0.loginWithRedirect({
                redirect_uri: window.location.origin + '/blog/index.html'
            });
        }
    }
  });
</script>

4. 保护页面

在需要保护的页面中，检查用户的身份验证状态。如果未登录，可以重定向到登录页面或者显示登录按钮。

5. 部署和测试

  • 本地测试：在本地启动 Hexo，确保身份验证流程正常工作。
  • 部署到生产环境：将更新后的博客部署到你的托管平台上，确保所有配置的 URL 都是正确的。

注意事项

  • HTTPS：确保你的博客使用 HTTPS，以保证通信安全。
  • 配置文件：妥善管理 Client Secret 等敏感信息，不要将其暴露在前端代码中。
  • 用户体验：可以自定义登录页面和流程以适应你的博客风格。
  • 删除rss 记得删除所有的rss以及search等会暴露内容的插件

通过这些步骤，你可以为 Hexo 博客添加 Auth0 的身份验证功能，提升安全性。

可以通过设置网站元素的display属性来设置未登录时是否可以看到内容。

故障排除

在 auth0 中需要设置 callback url list 为

1
http://localhost:4000/blog/callback.html, https://www.drwang.fun/blog/callback.html, https://localhost:3000, http://localhost:4000/blog, http://localhost:4000, https://www.drwang.fun/blog, https://www.drwang.fun