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

HTMLでパスワード保護を実装する初心者向け解説 HTML
この記事は約9分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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のpattern属性を使用したパスワード保護

HTML5では、pattern属性を使って入力値のフォーマットを指定することができます。

これを利用して、パスワードの正規表現を設定することでパスワード保護を実装できます。

ただし、これも完全なセキュリティ対策ではありません。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form action="protected_page.html">
    <input type="password" pattern="mypassword" title="Enter the correct 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ファイルを使って簡単にパスワード保護を実装できます。

これにより、特定のディレクトリにアクセス制限をかけることができます。

●手順

  1. 保護したいディレクトリに.htaccessファイルを作成し、下記のように記述します。
AuthType Basic
AuthName "Protected Area"
AuthUserFile /path/to/.htpasswd
Require valid-user
  1. .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 = "SELECT * FROM users WHERE username = '$username'";
$result = $conn->query($sql);

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!";
}

$conn->close();
?>

この例では、データベースに登録されたユーザー名とパスワードが照合され、正しい場合にのみ保護されたページにアクセスできます。

ただし、この方法を使用するにはデータベースとサーバーサイド言語に対応した環境が必要です。

以上が、HTMLでパスワード保護を実装する方法の代表的な例です。

まとめ

初心者の方でも実装できるJavaScriptやHTML5の方法から、よりセキュリティ対策が強化されたサーバーサイド言語やデータベースを使用した方法まで、自分の状況に応じて適切な方法を選択してください。