HTMLでパスワード保護を簡単実装！5選の実例で初心者向けに解説

📋 対応バージョン

HTML HTML5

JavaScript ES5+

PHP 5.5.0+

MySQL 4.1+

Apache 2.0+

Internet Explorer 9+ ⓘ

Safari 6+ ⓘ

完全対応一部機能制限 ⓘ

はじめに
●HTMLでのパスワード保護とは
- ○パスワード保護の基本的な仕組み
●パスワード保護の方法10選
まとめ

はじめに

この記事を読めば、HTMLでのパスワード保護の実装が簡単にできるようになります。

●HTMLでのパスワード保護とは

HTMLで作成されたウェブページにアクセス制限をかけることで、特定のユーザーだけが閲覧できるようにすることを指します。

これにより、機密性の高い情報や限定コンテンツを安全に管理することが可能です。

○パスワード保護の基本的な仕組み

パスワード保護は、ユーザーがウェブページにアクセスしようとする際に、正しいパスワードを入力しなければ閲覧できないようにする仕組みです。

通常、パスワードを入力するためのフォームが表示され、正しいパスワードが入力された場合にのみ、閲覧制限されたコンテンツにアクセスが許可されます。

パスワード保護には様々な方法があり、下記で10の代表的な方法を詳しく解説していきます。

●パスワード保護の方法10選

ここからは、HTMLでパスワード保護を実装する方法を初心者向けに詳しく解説します。

○方法1：JavaScriptを使ったパスワード保護

JavaScriptを使ってパスワード保護を実装する方法は、簡単で初心者にもおすすめです。

ただし、JavaScriptが無効なブラウザでは動作しないため、セキュリティ面では完璧ではありません。

<!DOCTYPE html>
<html>
<head>
<script>
function checkPassword() {
  var password = document.getElementById("password").value;
  if (password == "mypassword") {
    location.href = "protected_page.html";
  } else {
    alert("Incorrect password!");
  }
}
</script>
</head>
<body>
  <input type="password" id="password">
  <button onclick="checkPassword()">Submit</button>
</body>
</html>

このコードでは、パスワード入力欄と送信ボタンが表示されます。正しいパスワードが入力されると、保護されたページにリダイレクトされる仕組みです。

ただし、この方法ではJavaScriptが無効な場合や、ソースコードを見ることでパスワードが漏洩する可能性があります。

○方法2：HTML5のrequired属性とJavaScriptを組み合わせた保護

HTML5のrequired属性とJavaScriptを組み合わせることで、より適切なパスワード保護を実装できます。

<!DOCTYPE html>
<html>
<head>
<script>
function validatePassword() {
  var password = document.getElementById("password").value;
  if (password === "mypassword") {
    return true;
  } else {
    alert("パスワードが正しくありません");
    return false;
  }
}
</script>
</head>
<body>
  <form onsubmit="return validatePassword()">
    <input type="password" id="password" required>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

この方法では、フォームの送信時にパスワードがチェックされ、正しい場合のみ処理が続行されます。しかし、クライアントサイドでの検証のため、完全なセキュリティ対策ではありません。

○方法3：サーバーサイド言語を使用したパスワード保護

サーバーサイド言語（例: PHP, Ruby, Python）を使用することで、より安全性の高いパスワード保護を実装することができます。

この方法では、パスワードのチェックはサーバー上で行われるため、クライアントサイドでの漏洩のリスクが低くなります。

PHPを使用した例

<!-- login.php -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form action="check_password.php" method="post">
    <input type="password" name="password" required>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

<!-- check_password.php -->
<?php
$password = $_POST['password'];
$correct_password = "mypassword";

if ($password == $correct_password) {
  header("Location: protected_page.html");
} else {
  echo "Incorrect password!";
}
?>

この例では、パスワードがサーバーサイドでチェックされ、正しい場合にのみ保護されたページにアクセスできます。ただし、この方法を使用するにはサーバーサイド言語に対応した環境が必要です。

○方法4：.htaccessを使用したパスワード保護

Apacheサーバーを使用している場合、.htaccessファイルを使って簡単にパスワード保護を実装できます。これにより、特定のディレクトリにアクセス制限をかけることが可能です。

手順

保護したいディレクトリに.htaccessファイルを作成し、下記のように記述します。

AuthType Basic
AuthName "Protected Area"
AuthUserFile /path/to/.htpasswd
Require valid-user

.htpasswdファイルを作成し、ユーザー名とパスワードを記述します。パスワードはハッシュ化された形で記述する必要があります。

下記のようなオンラインツールを使用してハッシュ化できます： https://www.htaccesstools.com/htpasswd-generator/

この方法では、指定したディレクトリにアクセスしようとすると、ブラウザがユーザー名とパスワードの入力を求めます。正しい認証情報が入力されると、アクセスが許可される仕組みです。

ただし、この方法はApacheサーバーでのみ機能し、またサーバー管理者によっては.htaccessの使用が制限されている場合があります。

○方法5：データベースを使用したパスワード保護

データベース（例: MySQL, PostgreSQL）を使用することで、ユーザー名とパスワードを管理し、複数のユーザーに対応したパスワード保護を実装することができます。これには、サーバーサイド言語（例: PHP, Ruby, Python）との連携が必要です。

PHPとMySQLを使用した例

<!-- login.php -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form action="check_password.php" method="post">
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

<!-- check_password.php -->
<?php
$username = $_POST['username'];
$password = $_POST['password'];

// データベース接続
$conn = new mysqli("localhost", "db_user", "db_password", "db_name");

// エラーチェック
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// プリペアードステートメントを使用してSQLインジェクションを防ぐ
$stmt = $conn->prepare("SELECT password FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  if (password_verify($password, $row['password'])) {
    header("Location: protected_page.html");
  } else {
    echo "Incorrect password!";
  }
} else {
  echo "User not found!";
}

$stmt->close();
$conn->close();
?>

この例では、データベースに登録されたユーザー名とパスワードが照合され、正しい場合にのみ保護されたページにアクセスできます。プリペアードステートメントを使用することで、SQLインジェクション攻撃を防いでいます。

○方法6：セッションを使用したパスワード保護

セッション機能を使用することで、一度ログインしたユーザーが再度パスワードを入力する必要がないシステムを構築できます。

<?php
session_start();

// ログイン処理
if ($_POST['password'] === 'mypassword') {
    $_SESSION['logged_in'] = true;
    header("Location: protected_page.php");
} else {
    echo "パスワードが間違っています";
}
?>

<!-- protected_page.php -->
<?php
session_start();

if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header("Location: login.php");
    exit();
}
?>
<!DOCTYPE html>
<html>
<body>
    <h1>保護されたページ</h1>
    <p>ログインに成功しました。</p>
</body>
</html>

セッションを使用することで、ユーザーの利便性を向上させながらセキュリティを維持できます。

○方法7：Basic認証を使用したパスワード保護

サーバーレベルでのBasic認証を実装することで、強固なパスワード保護を実現できます。

<?php
if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="Protected Area"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'ログインが必要です';
    exit;
} else {
    if ($_SERVER['PHP_AUTH_USER'] !== 'admin' || $_SERVER['PHP_AUTH_PW'] !== 'password') {
        header('WWW-Authenticate: Basic realm="Protected Area"');
        header('HTTP/1.0 401 Unauthorized');
        echo 'ユーザー名またはパスワードが正しくありません';
        exit;
    }
}
?>
<!DOCTYPE html>
<html>
<body>
    <h1>保護されたコンテンツ</h1>
</body>
</html>

Basic認証では、ブラウザが標準的なログインダイアログを表示し、ユーザーが認証情報を入力します。

○方法8：トークンベースの認証システム

より高度なセキュリティを実現するため、トークンベースの認証システムを実装できます。

<?php
function generateToken() {
    return bin2hex(random_bytes(32));
}

function validateToken($token) {
    // データベースまたはファイルに保存されたトークンと照合
    $validTokens = ['abc123def456', 'xyz789uvw012']; // 例
    return in_array($token, $validTokens);
}

if (isset($_GET['token']) && validateToken($_GET['token'])) {
    // アクセス許可
    echo "認証されました";
} else {
    echo "無効なトークンです";
}
?>

トークンベースの認証では、一意のトークンを生成してユーザーに配布し、そのトークンを使用してアクセス制御を行います。

○方法9：IPアドレス制限と組み合わせたパスワード保護

特定のIPアドレスからのアクセスのみを許可することで、追加のセキュリティ層を提供できます。

<?php
function getAllowedIPs() {
    return ['192.168.1.100', '203.0.113.10']; // 許可するIPアドレス
}

function checkIP() {
    $userIP = $_SERVER['REMOTE_ADDR'];
    $allowedIPs = getAllowedIPs();
    return in_array($userIP, $allowedIPs);
}

if (!checkIP()) {
    http_response_code(403);
    echo "このIPアドレスからのアクセスは許可されていません";
    exit;
}

// パスワード確認処理
if ($_POST['password'] === 'securepassword') {
    echo "アクセス許可";
} else {
    echo "パスワードが間違っています";
}
?>

IPアドレス制限とパスワード保護を組み合わせることで、二重のセキュリティを実現できます。

○方法10：OAuth認証を使用したパスワード保護

外部サービス（Google、Facebook、Twitterなど）のOAuth認証を利用することで、ユーザーが既存のアカウントでログインできるシステムを構築できます。

<?php
// Google OAuth 2.0の例（簡略化）
require_once 'vendor/autoload.php';

$client = new Google_Client();
$client->setClientId('your-client-id');
$client->setClientSecret('your-client-secret');
$client->setRedirectUri('http://yoursite.com/callback.php');
$client->addScope('email');

if (!isset($_GET['code'])) {
    $authUrl = $client->createAuthUrl();
    header('Location: ' . filter_var($authUrl, FILTER_SANITIZE_URL));
    exit;
} else {
    $client->authenticate($_GET['code']);
    $token = $client->getAccessToken();
    
    // ユーザー情報を取得
    $oauth2 = new Google_Service_Oauth2($client);
    $userInfo = $oauth2->userinfo->get();
    
    // 認証成功
    session_start();
    $_SESSION['user_email'] = $userInfo->email;
    header('Location: protected_page.php');
}
?>

OAuth認証を使用することで、ユーザーは信頼できる外部サービスのアカウントを使用してログインでき、パスワード管理の負担を軽減できます。