I've got a login form with two input fields: username and password.
<form method="post" action="testPwd.html">
<p>
<input type="text" name="username" value="" placeholder="username" maxlength="30"></p>
<p>
<input type="password" name="password" value="" placeholder="password" maxlength="25"></p>
<p class="submit">
<input type="submit" name="commit" value="Enter">
</p>
</form>
Once the user submits the form, his username and password are shown in the browser's network attribute in form data section
Request URL: http://localhost:8090/test/testPwd.html
Request Method: POST
Status Code: 302 Moved Temporarily
username: admin
password: admin
I don't want his username and password to be on display.
How can I do this?
That is an expected behavior. You can always see what parameters are passed to POST method (or any method for that matter)
However, you do not want the inputs to be readable to normal human eye, you can encode the username and password before passing them to the API and decode at the server side before using them.
Below is a very simple example. It does not guarantee anything but it will make the values not readable.
var encodedUsername = window.btoa(username); // encode username
var encodedPassword= window.btoa(password); // encode a password
var decodedUsername = window.atob(encodedUsername); // decode username
var decodedPassword = window.atob(encodedPassword); // decode password
Related
I am using Emailjs to handle my email deliveribility but I have an issue when it comes to recatcha verification.
The HTML form works well without the verification but once I activate the recaptcha in emailjs, I will no more get the notification in my email when the form is filled. Emailjs doc says:
To add CAPTCHA support:
Create reCaptcha(opens new window) account or login to the existing account.
Register a new site and add your site domain to the list of domains. If you want to test the template in JSFiddle, please also add
jsfiddle.net to the list.
Follow the "client-side integration" instructions as specified in the reCaptcha dashboard. If you are using the send method, please pass
the reCaptcha token in the g-recaptcha-response property.
Open your template in the EmailJS template editor, go to Settings tab, and check Enable reCAPTCHA V2 verification checkbox.
Specify the secret key obtained from reCaptcha dashboard.
After the above steps have been completed it won’t be possible to send out an email based on this template without solving a CAPTCHA test first. No additional changes are required – we will automatically send the solved CAPTCHA result along with the send email request."
The issue is, I am just a beginner in javascript and I don't seem to understand how to pass the recaptcha token.
Here is my code:
The form
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<!--recaptcha-->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#emailjs/browser#3/dist/email.min.js">
</script>
<!--emailjs-->
<script type="text/javascript">
(function(){
emailjs.init("EMAILJS_KEY");
})();
</script>
</head>
<div class="form-container">
<h2>Contact Me</h2>
<p>Feel free to contact me and I will get back to you as soon as possible.</p>
<div class="row">
<div class="col-lg-6">
<form method="POST" id="shev-form">
<input type="text" name="name" id="name_id" placeholder="Name" required>
<input type="email" name="email" id="email_id" placeholder="Email" required>
<input type="text" name="subject" id="subject_id" placeholder="Subject" required>
<textarea name="message" cols="30" rows="5" id="message_id" placeholder="Message" required></textarea>
<div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
<input type="submit" value="Submit" id="submit_id" onclick="sendMail()">
</form>
</div>
The javascript:
function sendMail() {
var params = {
name: document.getElementById("name_id").value,
email: document.getElementById("email_id").value,
subject: document.getElementById("subject_id").value,
message: document.getElementById("message_id").value,
};
const serviceID = "service_ID";
const templateID = "template_ID";
emailjs.send(serviceID, templateID, params)
.then(res=>{
document.getElementById("name_id").value = "";
document.getElementById("email_id").value = "";
document.getElementById("subject_id").value = "";
document.getElementById("message_id").value = "";
console.log(res);
alert("Your message sent successfully!!")
})
.catch(err=>console.log(err));
}
If the recaptcha is not sending a valid response to emailjs, the email will not be submitted.
Kindly help.
Thanks.
I have a form for resetting a user email which currently consists of a password input element, and a 'Change email address' email input.
<form method="post">
<div id="form-row-password" class="form-row">
<label for="password">Enter Password</label>
<input class="input-gateway" type="password" name="password" id="password">
</div>
<div id="form-row-email" class="form-row">
<label for="email">Change Email Address</label>
<input type="email" name="email" id="email">
</div>
<div class="form-row form-row-submit">
<input type="submit" name="update-email" id="button" value="SEND ACTIVATION LINK">
</div>
</form>
With this current form you enter your password and the email address, and then you get emailed a link to confirm your new/change of email address and it all works as desired.
The current PHP process is as follows:
Santisation and validations of inputs
PDO Prepared Statments that update the mysql database
What I Wish To Achieve
What I want to do is have it so this process is split over two stages using AJAX/fetch() in javascript.
The first step would be the user entering their password, and when verified with the database this input disappears and is replaced with the 'new email address' input element.
I've set up some test javascript that fetches this second input element using a 'test' button.
What I want to do is have this fetch() javascript code trigger when then first stage is successful in the PHP code. But I cannot work out how to do this?
The PHP that processes the inputs I will included in the HTML partials that get added and removed by the fetch() javascript so I'm not concerned about that side of things.
Will I use a 'submit' event listener or an 'onchange' event listener and how will the javascript know that the password submission has been successful when this is done in PHP?
// PSEUDO JAVASCRIPT
let button = document.getElementById('button'),
formRowPassword = document.getElementById('form-row-password'),
formRowEmail = document.getElementById('form-row-email');
var filePath = "modals/email-reset-modal.php";
// what type of event listener is best to use ??
button.addEventListener('click', function(){
fetch(filePath)
.then((response) => {
return response.text();
})
.then((data)=>{
formRowPassword = '';
formRowEmail.textContent = data;
})
.catch((error => {console.log(error)}))
})
Is there a built-in PHP function that can effectively talk to javascript so it executes once the password input (1st stage) has been successful?
Any help would be amazing.
Anna
I have a file index.php with a log in form comprising a field for the email address, a field for the password, a box to check, and two submit buttons:
the first button ("log_in") is for trying to log in with the current combination email/password. This button triggers a script ("check_box()") which verifies that the box has been checked.
the second button is for generating a new password for the current email address. It also triggers a script ("confirmation()") which asks the user to confirm before executing the action.
I am trying to submit the form with javascript, and to keep track of which button has been submitted in order to execute the correct action. Please see the code below.
<form id="form" name="form" method="post" action="index.php">
<input type="text" name="email" id="email" placeholder="Email address" />
<input type="password" name="password" id="password" placeholder="Password" />
<input type="radio" id="box" name="box"><label for="box">Please check this box if you want to log in.</label>
<input type="button" id="log_in" name="log_in" value="Log in" onclick="return check_box();"/>
<input type="button" id="change_password" name="change_password" value="Password forgotten?" onclick="return confirmation();"/>
</form>
function confirmation(){
if (!confirm("A new password will be generated and sent to your email address. Please make sure that your email address is written correctly, and click on Confirm to proceed.")) {
return FALSE;
}
else{
var form = document.getElementById('form');
form.submit();
}
}
function check_box(){
var success = document.querySelector("input[name=box]:checked");
if(!success){
alert("Please check the box.");
}
else{
var form = document.getElementById('form');
form.submit();
}
}
My problem is to retrieve the values of the buttons when the form is submitted. I tried
if(isset($_POST['log_in']))
to detect whether the user has been trying to log in, and
if(isset($_POST['change_password']))
to detect whether the user wants to change password. But these tests always return FALSE. Where is the mistake?
Thank you in advance.
I am using Braintree for payment gateway and I have across an issue.
I am sending credit card information with other user details.
For security purposes Credit card information has to be encrypted and it is being done by Braintree by including following:
braintree.onSubmitEncryptForm('braintree-payment-form');
This works fine until I use pure javascript (AngularJS) in front-end and I'm seeing that data is not encrypted while sending to server,
Here is code:
<form name="paymentForm" ng-submit="submitUser(userDetails)" method="post" id="braintree-payment-form">
<p>
<label style="color:white">Name</label>
<input type="text" ng-model="userDetails.userName" name="userName" size="20" />
</p>
<p>
<label style="color:white">Email</label>
<input type="text" ng-model="userDetails.email" name="email" size="20"/>
</p>
<p>
<label style="color:white">Company</label>
<input type="text" ng-model="userDetails.company" name="company" size="20" />
</p>
<label style="color:white">Card Number</label>
<input type="text" size="20" ng-model="userDetails.number" autocomplete="off" data-encrypted-name="number" />
</p>
<p>
<label style="color:white">CVV</label>
<input type="text" size="4" ng-model="userDetails.cvv" autocomplete="off" data-encrypted-name="cvv" />
</p>
<p>
<label style="color:white">Expiration (MM/YYYY)</label>
<input type="text" size="2" ng-model="userDetails.month" data-encrypted-name="month" /> / <input type="text" size="4" ng-model="userDetails.year" data-encrypted-name="year" />
</p>
<input type="submit" id="submit" />
On form submit, I am sending data to server.
$scope.submitUser = function(userDetails){
$http({
url: '/createtransaction',
method: 'POST',
data: JSON.stringify(userDetails),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
// success
}).error(function (data, status, headers, config) {
//error
});
}
Is there anyway I can encrypt card details?
The question is "why is the AJAX request data not encrypted by Braintree JS", and the answer is nothing to do with HTTPS.
Yes, HTTPS is required to encrypt traffic in production - and in this case it will encrypt the already encrypted card data - but HTTPS is neither the question nor the answer here.
If you look at the Braintree documentation (Example here) you'll note that each input in the example form has added an attribute data-encrypted-name:
<input type="text" size="20" autocomplete="off" data-encrypted-name="number" />
The documentation then points out this code:
braintree.onSubmitEncryptForm('braintree-payment-form');
When the form is submitted, code in braintree.js is invoked, inspects the form, looks at the plain text in each marked input, encrypts it, save those encrypted values according to the data--encrypted-name attributes, and then that encrypted data is used when the form is transmitted via HTTP/HTTPS.
In the AngularJS example code above, the OP does include the data-encrypted-name attributes on some of the inputs (I don't know if it needs to be on all of them) but just labeling the input is not enough. The function to encrypt the raw input values (or in this case, the model data) still needs to be invoked, and then that encrypted model can be sent in a POST back to the server.
Said another way, the problem implementation:
Form builds a model
Model sent via HTTP to server
The corrected implementation would be:
Form builds a model
Braintree.js invoked to encrypt some parts of the model.
Encrypted model is sent via HTTP (or HTTPS in production) to server
Here's a plunkr someone else did showing one way to encrypt AngularJS model data on the fly:
http://plnkr.co/edit/2kF9Im?p=preview
If it were me, I'd just call braintree.encrypt() on each field immediately prior to submitting the form rather than on every keypress - or modify the directive to work on the form at submission time.
If your html page is accessed using HTTPS then your form submission will be (unless otherwise specified) be HTTPS. If you want to ensure that HTTPS is used, then you would need to do something on server to disallow HTTP for this particular page.
So for example I have a simple HTML form:
<h3>
Login
</h3>
<div id="tabs-login">
<form method="get" action="./dev.html">
<fieldset>
<legend>
Email:
</legend>
<input type="text" class="required email" name="login" />
</fieldset>
<fieldset>
<legend>
Password:
</legend>
<input type="password" class="required" name="pass" />
</fieldset>
<input type="submit" value="Submit" />
</form>
</div>
And I use jQuery to validte it:
<script>
$(document).ready(function() { $("form").validate(); });
</script>
I want on form submition to take user inputed password value and take SHA256 from it via this jQuery plugin and submit email=user-inputed-value and pass=sha-value. How to access validated values via jQuery and change them and send to original form destination?
First -- I want to point out that I don't think this is a good idea. It's generally a bad idea to implement password hashing on the client side. Instead, the pass should be sent in plain text (over HTTPS) to the server, where it is then hashed using your preferred algorithm before storage. This has the added benefit of not advertising to potential attackers which hashing method is used, since that code exists only on the server.
That said: you're going to want to calculate that SHA value prior to form submit.
You could bind an event handler to the password field's blur event to update a hidden field's value with the new hash. Or you could add the update logic to the validation code.
Regardless of where the extra code goes, it will be much easier for you to prepare the hash prior to the form submit than it will be to send a second submission chasing after the first.
E.g.
<!-- add this to the form -->
<input type="hidden" name="sha_pass" value="" />
// add this to the document ready handler
$('[name=pass]').blur(function() {
$('[name=sha_pass]').val($.sha256($(this).val());
});