使用SMTPJS与Elastic Email制作联系表单提交时报FROM邮箱不允许错误

使用Elastic Email搭配SMTPJS开发网站「联系我们」表单功能，相关代码及报错如下：

HTML表单代码 #

<div class="s-4 w-full p-5" id="contact">
    <div class="contact mt-16 max-w-md rounded-md flex flex-col justify-center items-left px-5 py-2 mx-auto text-black">
        <h1 class="section-title-h text-center text-4xl text-white mb-10" data-aos="fade-up">Contact Us</h1>
        <form onsubmit="SubmitForm(); reset(); return false">
            <label class="block mb-4" data-aos="fade-up">
                <input type="text" placeholder="Your Name Here" id="name" class=" py-8 px-2 border-solid border-b-2 border-gray-600 w-full h-10 outline-0 bg-black focus:border-gray-100 ease-in-out duration-500 text-white"/>
            </label>
            <label class="block mb-4" data-aos="fade-up">
                <input type="email" placeholder="Enter a valid E-mail" name="email" id="email" class=" py-8 px-2 border-solid border-b-2 border-gray-600 w-full h-10 outline-0 bg-black focus:border-gray-100 ease-in-out duration-500 text-white">
            </label>
            <label class="block mb-4" data-aos="fade-up">
                <textarea rows="4"  placeholder="Your message here" id="message" class=" py-8 px-2 border-solid border-b-2 border-gray-600 w-full h-10 outline-0 bg-black focus:border-gray-100 ease-in-out duration-500 text-white"></textarea>
            </label>
            <label class="block w-full h-auto flex justify-center items-center ">
                <input type="submit" placeholder="send" class="w-32 px-2 py-2 rounded-3xl bg-black  border border-3 border-gray-600 text-gray-400 hover:bg-gray-600 text-xl"/>
            </label>
        </form>
    </div>
</div>

JavaScript提交逻辑代码 #

function SubmitForm() {
    try{
        Email.send({ 
            Host : "smtp.gmail.com", 
            Username : "pnishant2323@gmail.com", 
            Password : "PASSWORD", 
            To : 'pnishant2323@gmail.com', 
            From : document.getElementById("email").value, 
            Subject : "New Query from Client", 
            Body : "Name: " + document.getElementById("name").value 
                    + "<br>" +
                    "E-mail: " + document.getElementById("email").value
                    + "<br>" +
                    "Message: " + document.getElementById("message").value`enter code here`
        })
        .then(res=>{console.log(res)});
    } catch(err) {
        console.log(err)
    }
}

报错信息 #

提交表单后收到报错：
Mailbox name not allowed. The server response was: Envelope FROM 'johndoe@gmail.com' email address not allowed.

• 代码中配置的SMTP服务器为Gmail的smtp.gmail.com，并未实际接入Elastic Email服务。所有正规SMTP服务均强制校验发件人身份：仅允许使用当前登录SMTP账号绑定、已完成所有权验证的邮箱作为信封发件地址，严禁冒用第三方地址发信。代码直接将访客提交的外部邮箱填入From发件人字段，触发服务器拦截规则，直接返回报错。
• 代码将SMTP账号密码明文写在前端公开代码中，属于严重安全漏洞，任意访客打开网页源码即可获取凭证，盗用邮箱发送垃圾邮件、诈骗邮件。

• 调整发件人字段逻辑：禁止将用户提交的邮箱填入From字段，将该字段固定为你自身在SMTP服务商处完成验证的自有邮箱；访客提交的姓名、联系邮箱、留言内容全部放在邮件正文中即可，收信后直接回复访客预留的邮箱即可正常沟通。
• 匹配SMTP服务参数：如果确定使用Elastic Email，将Host替换为Elastic Email官方SMTP地址，账号、密码填写Elastic Email后台生成的SMTP凭证；如果继续使用Gmail SMTP，注意需要填写Gmail生成的应用专用密码，普通登录密码无法通过SMTP鉴权。
• 替换明文密码：使用SMTPJS提供的凭证加密功能生成加密令牌，前端仅调用公开令牌完成发信，避免SMTP凭证泄露。
• 清理冗余代码：删除JS中多余的`enter code here`无效字符，避免触发语法异常。

修复后参考代码 #

function SubmitForm() {
    try{
        Email.send({ 
            Host : "smtp.elasticemail.com", // 若使用Gmail则替换为smtp.gmail.com
            Username : "你的已验证发件邮箱", // 对应SMTP服务的登录账号
            Password : "你的SMTP加密令牌/授权码", // 不要使用明文登录密码
            To : 'pnishant2323@gmail.com', 
            From : "你的已验证发件邮箱", // 固定为自有已验证邮箱，禁止填写用户提交的地址
            Subject : "New Query from Client", 
            Body : "Name: " + document.getElementById("name").value 
                    + "<br>" +
                    "E-mail: " + document.getElementById("email").value
                    + "<br>" +
                    "Message: " + document.getElementById("message").value
        })
        .then(res=>{console.log(res)});
    } catch(err) {
        console.log(err)
    }
}

内容的提问来源于stack exchange，提问作者Nishant Patil