セキュリティ上の制限により、クライアントサイドJavaScriptから直接Webブラウザでメールを送信することは不可能です。ブラウザは、ユーザーのプライバシー保護のため、信頼されていないコードがメールサーバーなどの機密リソースにアクセスすることを防ぎます。メールを送信するには、メール送信を安全に処理するサーバーサイドコンポーネントが必要です。
目次
サーバーサイドアプローチによるメール送信
解決策は、クライアントサイドでJavaScriptを使用してサーバーにリクエストを送信することです。その後、サーバーは適切なライブラリを使用してメール送信を処理します。これにより、機密情報はクライアントから分離され、セキュリティが強化されます。
fetch APIを使用したクライアントサイドの例を以下に示します。
async function sendEmail(recipient, subject, body) {
const response = await fetch('/send', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ recipient, subject, body }),
});
if (response.ok) {
console.log('Email sent successfully!');
} else {
console.error('Email sending failed:', response.status);
}
}
sendEmail('[email protected]', 'Test Email', 'This is a test email.');
このコードは、サーバーエンドポイント（/send）にPOSTリクエストを送信します。サーバーサイドコード（例：Nodemailerを使用したNode.js）はこのリクエストを受信し、メールの詳細を処理して、SMTPサーバーを使用してメールを送信します。
サーバー資格情報の保護
SMTPサーバーの資格情報（ホスト、ユーザー名、パスワード）をクライアントサイドのJavaScriptコードに直接埋め込まないでください。これは重大なセキュリティリスクです。サーバーは、公開アクセスできない環境変数または設定ファイルを使用して、これらの資格情報を安全に管理する必要があります。
Nodemailerとdotenvを使用したサーバーサイドコードの例を以下に示します（Node.jsの場合）。
require('dotenv').config();
const nodemailer = require('nodemailer');
const transporter = nodemailer.createTransport({
service: process.env.EMAIL_SERVICE,
auth: {
user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASSWORD,
},
});
// ... (Handle POST request and use transporter.sendMail()) ...
これは.envファイルから資格情報をロードし、コードベースから分離し、バージョン管理から除外します（.envを.gitignoreに追加してください）。メールプロバイダーで、セキュリティレベルの低いアプリの使用を許可するか、アプリパスワードを使用するように設定してください。
結論
Webアプリケーションからメールを送信するには、安全なメール送信のためのサーバーサイドコンポーネントが必要です。クライアントサイドのJavaScriptは、ユーザーインタラクションとサーバーとの通信を容易にし、サーバーはプロセスの機密部分を処理します。クライアントサイドのコードから資格情報を除外することにより、セキュリティを優先することは、堅牢で安全なメール送信システムにとって非常に重要です。