Form password field is plain text after using jQuery serialize() - javascript

I have a login form includes password field. I show this login form in modal way and I would like to handle the form submit response is a special way(actually update the login bar to a account menu), so i prevent the default form submit by
$("#myformid").submit(function(event){
var form = $(this);
console.log(form.serialize());
event.preventDefault();
jQuery.ajax({
url: "http://localhost:5782/login",
success: function (data) {
login_form_modal.style.display = 'none';
},
data: {
form: form.serialize(),
},
type:"POST",
async: false,
});
})
I noticed that in the browser debug console, the password is plain text. My question is, is it safe to submit a serialized form using ajax?
'csrf_token=IjI4ODJZjJmMWI5MGU1ZMjM1Y2Y0M2QxNzY3ZGUwZmI5MDki.YcCuVA.3D_79wx6Lp2-hbZWRT04z_eGhbc&username=myusername&password=MyPlainTextPassword'
Thanks,

You have to send the password from the client to the server.
Both the client and the server need to know what it is — the client because it produces it and the server because it has to pass it through the right hash algorithm and compare it to whatever is in the database.
What you don't want is for the password to be intercepted in transit. The way to do that is to use HTTPS and not plain HTTP. (This obviously doesn't matter when you are working with localhost URLs and the data is development data and not production data, but needs to be dealt with for your production deployment).

Related

how to render html page after ajax success from django backend

I want to render html page after ajax success. but i am not getting the proper path for the file. I am using django backend. I am not using django inbuilt function to authenticate. this is my python code.
this is the error
this is my project structure
//this is my javascript code
function admin_login(){
username = document.getElementById("username").value;
password = document.getElementById("password").value;
console.log(username+password);
data={
"username":username,
"password":password
}
$.ajax({
type: 'POST',
url: "http://127.0.0.1:8000/admin_login/",
data:JSON.stringify(data),
success: function(data) {
console.log('sucessfully loggedin')
window.location.href = "/chat/templates/user.html";
}
});
}
You're trying to redirect to a template. Django doesn't work like that.
With or without a redirect, a request from the browser always needs to go to a URL that is handled by a view. Your redirect should be to an actual URL listed in your urls.py.
Alternatively, given that this is a completely standard form that has no need for Ajax, you could remove the script completely. Just let the form submit in the normal way and redirect as the Django code determines.

form that sends an http request

I have a bootstrap form that takes user input, I want it to send data as json to an arbitrary HTTP endpoint. Can it be achieved without reloading of the page? So the form just floats away and nothing else happens? I'm no sure what to google for.
I'm using ASP.NET MVC 5.2.3.0 WebApp on Azure.
Using Jquery
$.ajax({
url: "Your End Point",
context: document.body,
success: function(){
'Whatever you need it to do'
}
});
Or make a HTTPRequest in JavaScript

Unsuccessfully fetch data from PHP file

I'm trying to fetch data from a website; however, it return a PHP file as text without the result that I look for (the result after enter all required input) after sending out all the information by using 'POST' method to the server
Down here is my code that I used to fetch info:
var form = {
'cp': poke_cp,
'p_id': poke_id,
'hp': poke_hp,
'dust': poke_dust,
'up': "1"
};
$.ajax({
type: 'POST',
url: "https://pokefind.co/ivcalc.php",
dataType: "text",
data: form,
success: function (data) {
console.log(data);
}
});
As said in comments by #icecub, if the remote server does not allow cross origin requests you will not be able to fetch datas from the website.
The page you are trying to POST seems be the page that handle a form. So you have two problems :
CSRF, during the form handle there is a verification to be sure that you come from the form page
Cross Origin possibly not allowed.
If the website has a WebService you should use it.

Is it possible/how can I enter data into and submit a form on a remote server using jQuery/Ajax

I have a form on a remote server, consisting of just a text box and a submit button. Once this form is submitted (PHP) XML is returned. How can I go about using ajax/jQuery to fill out this form, submit it, and receive the XML to process?
Untested, I think you should be heading somewhere in the direction of the following JS. Ofcourse, this is light thinking, there could be all kind of implications with the following (eg. XSS protection etc..). But if we're talking a simple, plain form, I think this could work.
Also, expanding the following with some failure fallbacks etc would be good practice. For documentation on the Ajax function, check the API docs.
// This should be the URL where your <form> action's value is pointing at
var url = 'http://remote/form/action';
// The textfield's data you want to submit
var textFieldValue = 'foobar';
$.ajax(
url,
{
'type': 'POST', // Could also be GET, depending on your form
'data': {
'textFieldName': textFieldValue,
},
'success': function (data) {
console.log(data); // Your raw XML in a string
}
}
);
Edit: As Kevin B mentioned, you'll be heading into cross-domain policy problems with the above, making this situation that more complex. Therefor you should need to make sure you have CORS arranged on the targeted domain. See Wikipedia CORS for more info.

Sending variables from Wordpress Contact Form 7 submission to success page

I am using Contact Form 7 with Wordpress 3.5.
Currently, when a user submits the message, they are redirected to a success page by using the following in the "Additional Settings" field:
on_sent_ok: 'location.replace("http://www.example.org/success-page");'
I want to be able to customise the output of the success-page by using the input from a field, for example:
on_sent_ok: 'location.replace("http://www.example.org/success-page?name=yourname");'
I hoped that by dropping the usual Contact Form 7 shortcodes into the Additional settings, it may have sent the field value with it, but that's not the case.
Can anyone suggest how I can get the field values from contact form 7 into the url, or alternatively send as a $_POST parameter? It may require some javascript to do this, I guess.
This is possible but you need the save the posted data from the contact form to the session and show it there.
Add this to your functions.php
add_action('wpcf7_mail_sent', 'save_cf7_data');
function save_cf7_data($cf)
{
if(session_id() == '') {
session_start();
}
$current_submission = WPCF7_Submission::get_instance();
$_SESSION['cf7_submission'] = $current_submission->get_posted_data();
}
And your success page you just need to print the session var, like:
echo $_SESSION['cf7_submission']['name'];
That's all.
Another option is to use jQuery or Javascript and catch the form on submit.
After the form is caught you can serialize the params and pass them to a custom page to catch them and do things with them.
Example for jQuery:
jQuery(document).ready(function($) {
$('.wpcf7-form').each(function () {
$(this).on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST', // Can also choose GET instead
url: 'forms/getParams',
data: $(this).serialize(),
dataType: "json",
success: function (data) {
$(this)[0].reset(); // Optional in case you want to clear the form on success
},
error: function (data, errorThrown) {
console.log(errorThrown);
}
});
});
});
});
the 'additional settings' code is javascript and thus is running in the context of the browser. this means you can easily access the form data using normal javascript code
e.g. on_sent_ok: 'location.replace("http://www.example.org/success-page?name=" + jQuery("input[name=name]").val());'
i think you should use $_REQUEST['name']; for fetching your post variable on success page.

Categories