HOW TO HIDE SENSITIVE DATA IN A VANILLA JAVASCRIPT, CSS, HTML PROJECT-CodePudding

Iam building a simple project to use pure vanilla js. I have a contact form on the page which would send a gmail to my personal email address when submit button is click.

Here are my html(form) codes:

 <div >Mesagge Me</div>
                        <form onsubmit="sendEmail(); reset(); return false">
                            <div >
                                <div >
                                    <input type="text" id="name" placeholder="Name" required>
                                </div>
                                <div >
                                    <input type="email" id="email" placeholder="Email" required>
                                </div>
                            </div>
                            <div >
                            <input type="text" id="phone" placeholder="Phone Number" required>
                                </div>
                    <div >
                        <input type="text" id="subject" placeholder="Subject" required>
                    </div>

                    <div >
                    <textarea name="" id="message" cols="15" rows="30" placeholder="Give me tips of what you want us to talk about......" required></textarea>
                    </div>

                    <div >
                        <button type="submit">Send Message</button>
                    </div>
                
                        </form>
                </div>

Javascript codes:

const getSendersEmail = document.getElementById("email").value;
const getSendersName = document.getElementById("name").value;
const getSendersPhone = document.getElementById("phone").value;
const getSendersSubject = document.getElementById("subject").value;
const getSendersMessage = document.getElementById("message").value;

function sendEmail() {
  Email.send({
    Host: "######",
    Username: "#######,
    Password: "#########",
    To: "[email protected]",
    From: getSendersEmail,
    Subject: "New Contact",
    Body:
      "name: "  
      getSendersName  
      "<br> Email: "  
      getSendersEmail  
      "<br> Phnone Number: "  
      getSendersPhone  
      "<br> Subject: "  
      getSendersSubject  
      "<br> Message: "  
      getSendersMessage,
  }).then(() => alert("Thank you, Message send succefully!"));
}

I have tried using SecureToken: "f3a4fc5-##############################"using elasticemail as the smtp server in order to hide my sensitive data, when submit button is click it display, my password, username is hardcoded it worked perfectly, but when i refectore to use elasticemail in order to hide my sensitive data i got "message send successfully" but receive no mail in my gmail(note i have activate 2-factor auth already on my gmail, elasticemail account necessary setting has been followed through this tutorials https://www.youtube.com/watch?v=Cb4F5TgiQsE. iam using free netlify domain to run the project.

My Challenge is to see how to hide my sensitive data(gmail and password),

CodePudding user response：

There's really no way to do this securely through entirely front-end code. Whatever you write in JS will be visible to the client. The only practically securely way to do what you want is to send the email via a server (which could be a nodejs sever, if you want to continue using JS only.

CodePudding user response：

Create a .env file in the root of your project:

S3_BUCKET="YOURS3BUCKET"
SECRET_KEY="YOURSECRETKEYGOESHERE"

As early as possible in your application, import and configure dotenv:

require('dotenv').config()

now to access the secret key you need to import the dotenv file and then use the command

const password = process.env.SECRET_KEY;

you can go thorugh this website to learn more about dotenv file and how to use it