概要

このテーマでは、パスワードのハッシュ化にbcryptjsを、対称コンテンツ暗号化にcrypto-jsを使用しています。

ワークフロー

この段階は、訪問者が暗号化されたページにアクセスしたときに、訪問者のブラウザで発生します。

1. ユーザーインタラクション

訪問者はまず、記事の内容の代わりにパスワード入力インターフェースを見ます。

2. クライアントサイドの検証と復号化

訪問者がパスワードを入力して「ロック解除」をクリックすると、ページに埋め込まれたJavaScriptが次の操作を実行します。

パスワード検証

スクリプトはまず、bcryptjsを使用して訪問者の入力パスワードを同じ方法でハッシュ化し、ページに事前に保存されているハッシュ値と比較します。一致すれば、パスワードは正しいです。これは、パスワードを迅速に検証し、誤ったパスワードで復号化を試みて計算リソースを浪費するのを避けるためです。

コンテンツ復号化

パスワード検証が成功した後、スクリプトは訪問者が入力したばかりのプレーンテキストパスワード（ブラウザのメモリにのみ存在し、どこにも送信されません）をキーとして使用し、crypto-jsを呼び出してページに保存されている暗号化された記事コンテンツを復号化します。

動的レンダリング

暗号文が正常に復号化されると、スクリプトは復元されたHTMLコンテンツ（完全なフォーマットを含む）を、ページの対応するコンテナに動的に挿入します。

3. 表示完了

これにより、訪問者は記事の真の内容を見ることができます。このようにして、バックエンドなしで安全な「検証-復号化-レンダリング」プロセスを正常にシミュレートし、静的コンテンツの効果的な保護を実現しました。

使用方法

記事のフロントマターに次の設定を追加します。

---
title: 'これは暗号化された記事です'
encrypted: true
password: 'your-secret-password'
---

この定義により、記事の不可逆的な暗号化が可能になり、正しいパスワードを入力することによってのみ記事の内容を閲覧できます。

ベストプラクティス

• 強力なパスワード: 記事を保護するために強力で一意のパスワードを使用します。
• パスワードの管理: パスワードを安全に管理し、必要な人にのみ共有します。
• コンテンツの重要度: 機密性の高いコンテンツやプライベートなコンテンツにのみ暗号化を使用します。

よくある質問

• Q: 記事がロック解除されない。
  • A: 入力したパスワードが正しいか、記事のフロントマターにencrypted: trueとpasswordが正しく設定されているか確認してください。
• Q: パスワードを忘れてしまった。
  • A: パスワードは不可逆的にハッシュ化されているため、忘れてしまった場合は復元できません。記事のフロントマターを直接編集してパスワードをリセットする必要があります。
• Q: 暗号化された記事のパフォーマンスが遅い。
  • A: クライアントサイドでの復号化は、記事のサイズやブラウザの性能によって時間がかかる場合があります。大きな記事の場合は、パフォーマンスに影響が出る可能性があります。