I have a simple form I would like to submit to a Tornado POST and I am running xsrf in tornado. The following produces the known error: '_xsrf' argument missing from POST
Has anyone solved how to submit the xsrf (like {% module xsrf_form_html() %}) in a regular HTML form using javascript? Here is the code:
<form action="#" id="form_field">
{% raw xsrf_form_html() %} # DOES NOT WORK!
<p><input type="text" id="field1" value=""></p>
</form>
<button id="button">UPDATE</button>
<script>
button.onclick = function changeField() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/chatdata", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
value: document.getElementById("field1").value
}))
};
</script>
xsrf_form_html is for traditional html forms using x-www-form-urlencoded. It won't be recognized if you submit your form as JSON. To use non-form-based encodings with Tornado's XSRF protection, pass the XSRF token as a X-XSRF-Token X-XSRFToken HTTP header.
According to the documentation page you would just create a request that has a _xsrf request field, for example a x-www-urlencoded string of _xsrf=yourtoken. The way you had it you were sending just some JSON that had a value property, ie {"value":"token"}.
Now you can get the token in a couple ways from what I have seen, either through a set cookie or from the field that is generated from the xsrf_form_html() call.
From cookie
//helper function to read cookie, from http://www.tornadoweb.org/en/stable/guide/security.html sample
function getCookie(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
var data = "_xsrf="+getCookie('_xsrf');
//note using this method you don't set the content-type,
//you want it to default to x-www-urlencoded
xhr.send(data);
Note you would have to build up the string to contain your other input form fields, either directly or through library methods like jQuery's serialize()
If want to just use the data straight from the form without the hassle of grabbing each input and generating a proper x-www-urlencoded string yourself; Then continue using xsrf_form_html() and create a FormData object from that form and send that. When you pass a form element to FormData() it will collect all the input values for you.
var data = new FormData( document.getElementById('form_field') );
//again no need to set the content-type as it will be automatically set internally
xhr.send(data);
//You could also use library methods like jQuery's serialize()
var data = jQuery('#form_field').serialize();
xhr.send(data);
Using FormData helps if you don't know how to get a reference to the generated field directly. Though it would more than likely have name="_xsrf" so a selector like input[name="_xsrf"] should find it. Though you would have to look at the generated html to find out.
var data = "_xsrf="+document.querySelector('input[name="_xsrf"]').value
Related
I am trying to read the post request parameters from my HTML. I can read the get request parameters using the following code in JavaScript.
$wnd.location.search
But it does not work for post request. Can anyone tell me how to read the post request parameter values in my HTML using JavaScript?
POST data is data that is handled server side. And Javascript is on client side. So there is no way you can read a post data using JavaScript.
A little piece of PHP to get the server to populate a JavaScript variable is quick and easy:
var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;
Then just access the JavaScript variable in the normal way.
Note there is no guarantee any given data or kind of data will be posted unless you check - all input fields are suggestions, not guarantees.
JavaScript is a client-side scripting language, which means all of the code is executed on the web user's machine. The POST variables, on the other hand, go to the server and reside there. Browsers do not provide those variables to the JavaScript environment, nor should any developer expect them to magically be there.
Since the browser disallows JavaScript from accessing POST data, it's pretty much impossible to read the POST variables without an outside actor like PHP echoing the POST values into a script variable or an extension/addon that captures the POST values in transit. The GET variables are available via a workaround because they're in the URL which can be parsed by the client machine.
Use sessionStorage!
$(function(){
$('form').submit{
document.sessionStorage["form-data"] = $('this').serialize();
document.location.href = 'another-page.html';
}
});
At another-page.html:
var formData = document.sessionStorage["form-data"];
Reference link - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
Why not use localStorage or any other way to set the value that you
would like to pass?
That way you have access to it from anywhere!
By anywhere I mean within the given domain/context
If you're working with a Java / REST API, a workaround is easy. In the JSP page you can do the following:
<%
String action = request.getParameter("action");
String postData = request.getParameter("dataInput");
%>
<script>
var doAction = "<% out.print(action); %>";
var postData = "<% out.print(postData); %>";
window.alert(doAction + " " + postData);
</script>
You can read the post request parameter with jQuery-PostCapture(#ssut/jQuery-PostCapture).
PostCapture plugin is consisted of some tricks.
When you are click the submit button, the onsubmit event will be dispatched.
At the time, PostCapture will be serialize form data and save to html5 localStorage(if available) or cookie storage.
I have a simple code to make it:
In your index.php :
<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>
In your main.js :
let my_first_post_param = $("#first_post_data").val();
So when you will include main.js in index.php (<script type="text/javascript" src="./main.js"></script>) you could get the value of your hidden input which contains your post data.
POST is what browser sends from client(your broswer) to the web server. Post data is send to server via http headers, and it is available only at the server end or in between the path (example: a proxy server) from client (your browser) to web-server. So it cannot be handled from client side scripts like JavaScript. You need to handle it via server side scripts like CGI, PHP, Java etc. If you still need to write in JavaScript you need to have a web-server which understands and executes JavaScript in your server like Node.js
<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
$val = json_encode($value); // Escape value
$vars .= "var $field = $val;\n";
}
echo "<script>\n$vars</script>\n";
}
?>
</script>
Or use it to put them in an dictionary that a function could retrieve:
<script>
<?php
if($_POST) {
$vars = array();
foreach($_POST as $field => $value) {
array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
}
echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>
Then in JavaScript:
var myText = post['text'];
// Or use a function instead if you want to do stuff to it first
function Post(variable) {
// do stuff to variable before returning...
var thisVar = post[variable];
return thisVar;
}
This is just an example and shouldn't be used for any sensitive data like a password, etc. The POST method exists for a reason; to send data securely to the backend, so that would defeat the purpose.
But if you just need a bunch of non-sensitive form data to go to your next page without /page?blah=value&bleh=value&blahbleh=value in your url, this would make for a cleaner url and your JavaScript can immediately interact with your POST data.
You can 'json_encode' to first encode your post variables via PHP.
Then create a JS object (array) from the JSON encoded post variables.
Then use a JavaScript loop to manipulate those variables... Like - in this example below - to populate an HTML form form:
<script>
<?php $post_vars_json_encode = json_encode($this->input->post()); ?>
// SET POST VALUES OBJECT/ARRAY
var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
console.log(post_value_Arr);
// POPULATE FIELDS BASED ON POST VALUES
for(var key in post_value_Arr){// Loop post variables array
if(document.getElementById(key)){// Field Exists
console.log("found post_value_Arr key form field = "+key);
document.getElementById(key).value = post_value_Arr[key];
}
}
</script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");
One option is to set a cookie in PHP.
For example: a cookie named invalid with the value of $invalid expiring in 1 day:
setcookie('invalid', $invalid, time() + 60 * 60 * 24);
Then read it back out in JS (using the JS Cookie plugin):
var invalid = Cookies.get('invalid');
if(invalid !== undefined) {
Cookies.remove('invalid');
}
You can now access the value from the invalid variable in JavaScript.
It depends of what you define as JavaScript. Nowdays we actually have JS at server side programs such as NodeJS. It is exacly the same JavaScript that you code in your browser, exept as a server language.
So you can do something like this: (Code by Casey Chu: https://stackoverflow.com/a/4310087/5698805)
var qs = require('querystring');
function (request, response) {
if (request.method == 'POST') {
var body = '';
request.on('data', function (data) {
body += data;
// Too much POST data, kill the connection!
// 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
if (body.length > 1e6)
request.connection.destroy();
});
request.on('end', function () {
var post = qs.parse(body);
// use post['blah'], etc.
});
}
}
And therefrom use post['key'] = newVal; etc...
POST variables are only available to the browser if that same browser sent them in the first place. If another website form submits via POST to another URL, the browser will not see the POST data come in.
SITE A: has a form submit to an external URL (site B) using POST
SITE B: will receive the visitor but with only GET variables
$(function(){
$('form').sumbit{
$('this').serialize();
}
});
In jQuery, the above code would give you the URL string with POST parameters in the URL.
It's not impossible to extract the POST parameters.
To use jQuery, you need to include the jQuery library. Use the following for that:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
We can collect the form params submitted using POST with using serialize concept.
Try this:
$('form').serialize();
Just enclose it alert, it displays all the parameters including hidden.
<head><script>var xxx = ${params.xxx}</script></head>
Using EL expression ${param.xxx} in <head> to get params from a post method, and make sure the js file is included after <head> so that you can handle a param like 'xxx' directly in your js file.
Is it possible to send POST with JSON content, which comes from hidden form field?
My form looks like this:
<form method="POST" name="form0" action="https://my_url/comment/id?Id=5">
<input type="hidden" name="id" id="inputField" value='{"number":5,"content":"aaaa"}'/>
</form>
And I would like to send POST with {"number":5,"content":"aaaa"} as JSON not as string.
If I use:
document.forms[i].submit();
it is send as a string.
An HTML form can only encode data as application/x-www-form-urlencoded, multipart/form-data or text/plain (the latter is not of any practical use).
Your existing code will encode the JSON within that.
If you want to send an application/json encoded form body, then you'll need to use XMLHttpRequest or fetch.
For example:
var xhr = new XMLHttpRequest();
xhr.open("POST", "/path/to/handler");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({"number":5,"content":"aaaa"}));
Yes, you can do so. But you'd need to decode this on the server side, as it will just be transported as string.
Using jQuery, this would be super easy to accomplish:
$.post('https://my_url/comment/id?Id=5', {"number":5,"content":"aaaa"});
You could even pass a callback to react to whatever is returned:
$.post('https://my_url/comment/id?Id=5', {"number":5,"content":"aaaa"}, function (response){
// Do something cool here.
});
I'm using Sinatra. I've got a button that sends a JSON-formatted string to the server by making a POST request. Only problem is, the JSON string isn't getting to the server.
Here's index.erb:
<input id="post-button" type="button" value="Send POST request">
Here's script.js:
window.onload = function(){
var btn = document.getElementById('post-button');
btn.onclick = function(){
var req = new XMLHttpRequest();
var reqObj = {
name: 'Joe',
age: '100'
};
var reqJSON = JSON.stringify(reqObj);
req.open('POST','/post_target',true);
req.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
req.send(reqJSON);
}
}
And finally, main.rb:
get '/' do
erb :index
end
post '/post_target' do
p params
end
When I click the button and check Firebug, I see that the browser sent a POST request. But when I check the Ruby console, it prints {} for params. If it worked right, I guess params would show a JSON object in string form, along with whatever else it would show.
I'm running Sinatra on my machine, at address http://localhost:4567.
What am I doing wrong? If I need to do the request with jQuery, I can do that, but can it be done with "vanilla" JavaScript?
"params" is most likely looking for URL encoded query string values. You want the Body content of the post, not the params.
See How to parse JSON request body in Sinatra just once and expose it to all routes?
You need to parse the JSON body:
parsed_params = JSON.parse( request.body.read, symbolize_names:true )
Alex Hill is right. And the the post he mentioned show one way to solve it.
An other way is to use rack/contrib:
require it:
require 'rack'
require 'rack/contrib'
add the middleware
use Rack::PostBodyContentTypeParser
source: http://jaywiggins.com/2010/03/using-rack-middleware-to-parse-json/
I am using AJAX to send inputs from a webpage to a PHP file to then be entered into a database. Here is my JavaScript file:
var pageLoaded = function () {
var submitButton = document.getElementById("submit");
if (submitButton) {
submitButton.addEventListener("click", submit, true);
}
};
var submit = function () {
var xhr, changeListener;
var form = document.getElementById('item_form');
var inputs = form.getElementsByTagName('input');
// create a request object
xhr = new XMLHttpRequest();
// initialise a request, specifying the HTTP method
// to be used and the URL to be connected to.
xhr.open("POST", "../php/add_item.php", true);
console.log(inputs[0].value); // debugging
// Sends the inputs to the add_item.php file
xhr.send(inputs);
};
window.onload = pageLoaded;
Here I am trying to send inputs from a form to a PHP file called add_item.php located "../php/add_item.php" in my file system.
I am pretty sure this code works and sends the inputs to the PHP file in an array.
My question is, how do I then use $_REQUEST within that file to be able to use the inputs within the array to send to a database? Or, what is the best way of doing this?
The xhr.send() method only accepts a string. If you want to send an array you have to flatten it into a string before posting. You can do this easily using the JSON.stringify() method in javascript, then use json_decode() function in PHP on receiving it.
Also for PHP to receive the data properly in the $_POST[] variable (or $_REQUEST if you must, but not recommended) you need to set a name for the POST variable and URL-encode your JSON text like this:
var json_array = JSON.stringify(inputs);
xhr.send('myJSONData=' + encodeURIComponent(json_array));
On the PHP side you shouldn't need to use urldecode() because the server stack expects to receive POSTed name-value pairs url-encoded. But you will need to use json_decode on the posted variable to get the array back, e.g.:
php_array = json_decode($_POST["myJSONData"]);
You will see other methods to do this, including setting the xhr POST content-type header to JSON, but in my experience this is the path of least resistance.
Also note whilst it is possible to send an "array" of objects in an HTML form like this:
<input type="text" name="myArray[]" value="val1">
<input type="text" name="myArray[]" value="val2">
<input type="text" name="myArray[]" value="val3">
<input type="text" name="myArray[]" value="val4">
which will result in an array being available within PHP in the variable $_POST["myArray"], there is no easy equivalent of this using the XHR object (AJAX method). JSON.stringify() is IMO the easiest way to go.
The variables inside the $_REQUEST are stored as an array. To access them you would do something similar to this:
echo $_REQUEST['input_1'];
To view all the variables (in a nice format) sent by the JS you could use this code:
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";
You can't do it in the way you are doing it. You send "input" array which is incorrect. You should prepare array of input values. Morover, I'd recommend you to use JQuery.
$(function (){
$("#submit").click(function (){
//the way to get input values and names
var arr = [];
$("input").each(function (index,value){});
arr.push([$(value).attr('name'), $(value).val()];
});
// it can be replaced also via serialize() funciton
//ajax
$.post( "../php/add_item.php", arr)
.done(function( data ) {
//data has been send response is in data object
});
});
});
In PHP you can get these values via $_POST. $_REQUEST is not needed here because you use POST method. For example if you have input
<input name="xxx" value="test">
to print value of this input in PHP you need use this code
echo $_POST['xxx'];
If you don't want to use JQuery then you still need loop through inputs and prepare proper array to send it via XHR.
When using window.location.href, I'd like to pass POST data to the new page I'm opening. is this possible using JavaScript and jQuery?
Using window.location.href it's not possible to send a POST request.
What you have to do is to set up a form tag with data fields in it, set the action attribute of the form to the URL and the method attribute to POST, then call the submit method on the form tag.
Add a form to your HTML, something like this:
<form style="display: none" action="/the/url" method="POST" id="form">
<input type="hidden" id="var1" name="var1" value=""/>
<input type="hidden" id="var2" name="var2" value=""/>
</form>
and use JQuery to fill these values (of course you can also use javascript to do something similar)
$("#var1").val(value1);
$("#var2").val(value2);
Then finally submit the form
$("#form").submit();
on the server side you should be able to get the data you sent by checking var1 and var2, how to do this depends on what server-side language you are using.
As it was said in other answers there is no way to make a POST request using window.location.href, to do it you can create a form and submit it immediately.
You can use this function:
function postForm(path, params, method) {
method = method || 'post';
var form = document.createElement('form');
form.setAttribute('method', method);
form.setAttribute('action', path);
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', key);
hiddenField.setAttribute('value', params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});
https://stackoverflow.com/a/133997/2965158
Use this file : "jquery.redirect.js"
$("#btn_id").click(function(){
$.redirect(http://localhost/test/test1.php,
{
user_name: "khan",
city : "Meerut",
country : "country"
});
});
});
see https://github.com/mgalante/jquery.redirect
Short answer: no. window.location.href is not capable of passing POST data.
Somewhat more satisfying answer: You can use this function to clone all your form data and submit it.
var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
// so that you can differentiate between forms when
// processing the data server-side.
submitMe.importFields = function(form){
for(k in form.elements){
if(input = form.elements[k]){
if(input.type!="submit"&&
(input.nodeName=="INPUT"
||input.nodeName=="TEXTAREA"
||input.nodeName=="BUTTON"
||input.nodeName=="SELECT")
){
var output = input.cloneNode(true);
output.name = form.name + nameJoiner + input.name;
this.appendChild(output);
}
}
}
}
Do submitMe.importFields(form_element); for each of the three forms you want to submit.
This function will add each form's name to the names of its child inputs (If you have an <input name="email"> in <form name="login">, the submitted name will be login_name.
You can change the nameJoiner variable to something other than _ so it doesn't conflict with your input naming scheme.
Once you've imported all the necessary forms, do submitMe.submit();
Have you considered simply using Local/Session Storage? -or- Depending on the complexity of what you're building; you could even use indexDB.
note:
Local storage and indexDB are not secure - so you want to avoid storing any sensitive / personal data (i.e names, addresses, emails addresses, DOB etc) in either of these.
Session Storage is a more secure option for anything sensitive, it's only accessible to the origin that set the items and also clears as soon as the browser / tab is closed.
IndexDB is a little more [but not much more] complicated and is a 30MB noSQL database built into every browser (but can be basically unlimited if the user opts in) -> next time you're using Google docs, open you DevTools -> application -> IndexDB and take a peak. [spoiler alert: it's encrypted].
Focusing on Local and Session Storage; these are both dead simple to use:
// To Set
sessionStorage.setItem( 'key' , 'value' );
// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ... } );
// Get The Data
const fromData = sessionStorage.getItem( 'key' );
// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );
// Remove
sessionStorage.removeItem( 'key' );
// Remove _all_ saved data sessionStorage
sessionStorage.clear( );
If simple is not your thing -or- maybe you want to go off road and try a different approach all together -> you can probably use a shared web worker... y'know, just for kicks.
it's as simple as this
$.post({url: "som_page.php",
data: { data1: value1, data2: value2 }
).done(function( data ) {
$( "body" ).html(data);
});
});
I had to solve this to make a screen lock of my application where I had to pass sensitive data as user and the url where he was working. Then create a function that executes this code
I use a very different approach to this. I set browser cookies in the client that expire a second after I set window.location.href.
This is way more secure than embedding your parameters in the URL.
The server receives the parameters as cookies, and the browser deletes the cookies right after they are sent.
const expires = new Date(Date.now() + 1000).toUTCString()
document.cookie = `oauth-username=user123; expires=${expires}`
window.location.href = `https:foo.com/oauth/google/link`
You can use GET instead of pass, but don't use this method for important values,
function passIDto(IDval){
window.location.href = "CustomerBasket.php?oridd=" + IDval ;
}
In the CustomerBasket.php
<?php
$value = $_GET["oridd"];
echo $value;
?>