概要
Webアプリケーション開発でよく使われるJavaScriptによるデータ保護手法を整理し、即座に使えるコード例を提供します。単なるエンコードから本格的な暗号化まで、目的に応じた選択が可能です。
1. 対称鍵暗号
Base64は厳密には暗号化ではなく、バイナリデータのテキスト表現です。一方、AESは強力な対称鍵暗号として広く利用されています。
<html>
<body>
<h3>Base64変換デモ</h3>
<p>入力: こんにちは、世界！</p>
<p id="base64-output"></p>
<script>
const source = "こんにちは、世界！";
const encoded = btoa(encodeURIComponent(source));
document.getElementById("base64-output").textContent = encoded;
</script>
</body>
</html><html>
<head>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
</head>
<body>
<h3>AES-256-CBC 暗号化</h3>
<p>平文: データ保護テスト</p>
<p id="aes-result"></p>
<script>
const message = "データ保護テスト";
const secretKey = CryptoJS.enc.Utf8.parse("secure_key_32bytes_long_enough_here");
const iv = CryptoJS.enc.Utf8.parse("16_byte_iv_value");
const encrypted = CryptoJS.AES.encrypt(message, secretKey, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
document.getElementById("aes-result").textContent = encrypted.toString();
</script>
</body>
</html>2. 公開鍵暗号
RSAは非対称暗号の代表格。公開鍵で暗号化し、秘密鍵で復号します。大量データには不向きですが、鍵交換や署名に適しています。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.2.1/bin/jsencrypt.min.js"></script>
</head>
<body>
<h3>RSA-2048 暗号化</h3>
<p>送信データ: 機密情報</p>
<p id="rsa-output"></p>
<script>
const rsa = new JSEncrypt();
const pubKey = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA...
-----END PUBLIC KEY-----`;
rsa.setPublicKey(pubKey);
const result = rsa.encrypt("機密情報");
document.getElementById("rsa-output").textContent = result;
</script>
</body>
</html>3. ハッシュ関数
一方向性ハッシュはパスワード保存やデータ整合性チェックに不可欠。MD5は脆弱、SHA-256以上を推奨。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
</head>
<body>
<h3>SHA-256 ハッシュ生成</h3>
<p>元データ: integrity_check</p>
<p id="hash-sha256"></p>
<script>
const input = "integrity_check";
const hash = CryptoJS.SHA256(input).toString(CryptoJS.enc.Hex);
document.getElementById("hash-sha256").textContent = hash;
</script>
</body>
</html>4. 通信層の保護
クライアント側の暗号化だけでは不十分。HTTPS（TLS）による転送中暗号化と組み合わせることで、真のセキュリティが実現します。HTML内では<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">などの設定で強制的に安全な接続を促すことが可能です。