動的に生成されるHTMLへのパスワード機能を実装 #92
Conversation
Co-authored-by: Fujiwo <3992360+Fujiwo@users.noreply.github.com>
There was a problem hiding this comment.
Pull Request Overview
This PR implements password protection functionality for a dynamically generated HTML website using SHA-256 hash verification and session persistence. Users must enter the correct password before accessing the site content.
- Adds a modal password dialog with Japanese UI text and responsive styling
- Implements SHA-256 hash verification using Web Crypto API against hardcoded hash
- Adds session persistence to maintain authentication state across page refreshes
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| website/js/app.js | Implements password verification logic, SHA-256 hashing, and session management |
| website/index.html | Adds password dialog HTML structure with overlay and form elements |
| website/css/style.css | Adds responsive styling for password dialog, form elements, and error states |
| // Calculate SHA256 hash of the input | ||
| const inputHash = await calculateSHA256(password); | ||
| // Expected hash for "shospb" | ||
| const expectedHash = 'd9b97aabba8899a31883a5b8acb4efe089fad51959bf8ba00a1de9c174513e30'; | ||
|
|
||
| if (inputHash === expectedHash) { |
There was a problem hiding this comment.
Hardcoding the password hash in client-side JavaScript exposes the authentication mechanism to anyone who can view the source code. Consider implementing server-side authentication or using environment variables for the hash value.
| // Calculate SHA256 hash of the input | |
| const inputHash = await calculateSHA256(password); | |
| // Expected hash for "shospb" | |
| const expectedHash = 'd9b97aabba8899a31883a5b8acb4efe089fad51959bf8ba00a1de9c174513e30'; | |
| if (inputHash === expectedHash) { | |
| // Send password to server for verification | |
| const response = await fetch('/api/verify-password', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ password }) | |
| }); | |
| const result = await response.json(); | |
| if (result.success) { |
| document.getElementById('password-form').addEventListener('submit', function(e) { | ||
| e.preventDefault(); | ||
| verifyPassword(); | ||
| }); |
There was a problem hiding this comment.
Adding the same event listener multiple times will cause memory leaks and duplicate function calls. This code runs every time showPasswordDialog() is called. Move the event listener registration outside this function or add a guard to prevent duplicate registrations.
| } | ||
| } catch (error) { | ||
| console.error('Error verifying password:', error); | ||
| errorDiv.textContent = 'パスワード検証中にエラーが発生しました。'; |
There was a problem hiding this comment.
The generic error message doesn't provide enough information for debugging but may expose that password verification failed. Consider logging the actual error details server-side while keeping the user-facing message generic.
動的に生成されるHTMLウェブサイトにパスワード保護機能を実装しました。ユーザーは正しいパスワードを入力した後にのみサイトコンテンツにアクセスできます。
実装された機能
パスワード認証ダイアログ
SHA256ハッシュ検証
d9b97aabba8899a31883a5b8acb4efe089fad51959bf8ba00a1de9c174513e30セッション永続化
エラーハンドリング
スクリーンショット
パスワードダイアログ:
認証後の状態:
エラー状態:
技術詳細
shospb認証されていないユーザーにはパスワードダイアログが表示され、正しいパスワード入力後にメインコンテンツが表示されます。セッション中は認証状態が維持され、シームレスなユーザー体験を提供します。
Fixes #91.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.