A user input form on my site sends values to a script located on a different server:
<form action="https://mycompany.formprocessor.com/script/" method="post" name="MyForm" onsubmit="return myFunction();"> etc.
I am recreating that form with a modified functionality. Instead of sending the form values directly, I save them in a cookie, and only then, when a certain event happens, I want to send input values from that cookie to the script located at the url provided as the value for action attribute.
Something like this:
on event {
// send cookie value to https://mycompany.formprocessor.com/script/ using "post" method;
}
How can this be done?
First of all, you will need to use some cookie functions to store the values in cookie(s) and then access the input values you have saved in those cookie(s). Some cookie functions with explanation how to use them are here: http://www.codelib.net/javascript/cookies.html
Then you will need to have a way of sending the data across domains. To do that I suggest that you use a form containing a hidden field and then submit that form to the other server.
Like this:
<form method="post" action="https://mycompany.formprocessor.com/script/">
<input type="hidden" id="hiddendata" name="data" />
</form>
<script>
function onEvent() { /* call this function when your desired event happens */
var cookiedata = readCookie('cookiename');
var datafield = document.getElementById('hiddendata');
datafield.value = cookiedata;
datafield.form.submit();
}
</script>
Note that I suggest you have the program at formprocessor return 204 No Content as its HTTP status code so that the document itself is not reset. Otherwise the browser will replace the current page with the contents of https://mycompany.formprocessor.com/script/ after the data is submitted. This is the a way of doing AJAX that does not block cross-domain requests.
The following method will only work if you are content with using GET requests to send the data to the server.
You can set the src attribute of included elements on the page, like an img element, to a URL like this (initial image is from http://commons.wikimedia.org/wiki/File:1x1.png)
<img id="hiddenimage" width="1" height="1" src="1x1.png" />
<script>
function onEvent() { /* call this function when your desired event happens */
var cookiedata = readCookie('cookiename');
var dataimage = document.getElementById('hiddenimage');
dataimage.src = 'https://mycompany.formprocessor.com/script/?data=' + encodeURIComponent(cookiedata);
}
</script>
First of all, you will need to use some cookie functions to store the values in cookie(s) and then access the input values you have saved in those cookie(s). Some cookie functions with explanation how to use them are here: http://www.codelib.net/javascript/cookies.html
Then you will need to have a way of sending the data across domains. To do that I suggest that you use a form containing a hidden field and then submit that form to the other server.
Like this:
<script>
function onEvent() { /* call this function when your desired event happens */
var cookiedata = readCookie('cookiename');
var datafield = document.getElementById('hiddendata');
datafield.value = cookiedata;
datafield.form.submit();
}
</script>
Note that I suggest you have the program return 204 No Content as its HTTP status code so that the document itself is not reset. Otherwise the browser will replace the current page with the contents of https://mycompany.formprocessor.com/script/ after the data is submitted. This is the a way of doing AJAX that does not block cross-domain requests.
I am about to describe another way of sending cross-domain requests without submitting a form... please wait.
The following method will only work if you are content with using GET requests to send the data to the server.
You can set the src attribute of included elements on the page, like an img element, to a URL like this (initial image is from http://commons.wikimedia.org/wiki/File:1x1.png)
<img id="hiddenimage" width="1" height="1" src="1x1.png" />
<script>
function onEvent() { /* call this function when your desired event happens */
var cookiedata = readCookie('cookiename');
var dataimage = document.getElementById('hiddenimage');
dataimage.src = 'https://mycompany.formprocessor.com/script/?data=' + encodeURIComponent(cookiedata);
}
</script>
You can get the values set in the cookie by using "document.cookie".
Update:
var cookievalue= document.cookie;
var xmlhttp= new XMLHttpRequest();
var url="https://example.com/path?value="+cookievalue;
xmlhttp.open("POST",url,false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send();
The answer kind of depends on how the script that's accepting the values is set up. For storing and retrieving the values, balaji's suggestion is good enough. The plugin located here makes storing and retrieving values to/from cookies very easy.
So, for e.g. if the function you are sending the values to is something like this:
public void myFunction(firstValue, secondValue){
// logic here
}
then the way you'd send the values is something like this:
https://mycompany.formprocessor.com/script/firstValue="value_from_cookie"?secondValue="value_from_cookie"
Related
here my simple form:
<form id="myform">
Name:<input type="text" name="name"><br>
Email:<input type="text" name="email">
<a class="btn btn-primary" id="click_btn">Submit</a>
</form>
I want to submit the form with Ajax, that bit is okay so far, and submitting.
Here is my jquery code:
$(document).ready(function() {
$('#click_btn').on('click', function() {
$.ajax({
url: $('myform').attr('action'),
data: $('myform').serialize(),
method: 'post',
success: function(data) {
//success meseg then redirct
alert('success');
var data = $('#myform').serializeArray();
var dataObj = {};
$(data).each(function(i, field) {
dataObj[field.name] = field.value;
window.location.href = 'next_page.php';
});
}
})
});
})
next_page.php is where I want to access, example:
<?php echo document.write(dataObj["email"]); ?>
I want to access these form values that I have submitted on next page after the form is submitted. I have created a data object with all the values using jQuery after submit, but still, I cannot access on the next page. Is there any concept related to the session in jquery for storing that array.
I think you're getting a couple of concepts confused here; I don't mean that in a condescending way, just trying to be helpful.
jQuery, and all JavaScript, exists only on the client-side (for practical purposes - there are exceptions where some client-side code might be rendered or compiled on the server-side for whatever reason but that's another matter). PHP, like any other server-side language, exists on the server-side. These two can't directly access each other's scope - which is why AJAX is useful to transfer data between the front and back ends.
Basically what you appear to be doing here is loading the data in the client-side, but not submitting anything to the server-side. You aren't actually doing any AJAX queries. When you redirect the user via window.location.href =..., no data is actually being transmitted - it simply instructs the browser to issue a new GET request to next_page.php (or wherever you instruct it to go).
There are a couple of options to do what you're trying to achieve:
Actually submit an AJAX query, using the methods outlined here http://api.jquery.com/jquery.ajax/. You can then use next_page.php to grab the data and store it in a session and recall it when the user arrives on the page.
Store the data in a client-side cookie.
Use the standard HTML <form method="next_page.php"...><input type="submit"> to cause the browser to forward the form data to the next_page.php script.
A number of other options but I think those are the simplest.
You can totally use sessionStorage ! (Here is documentation)
If user direct to next page in same tab, sessionStorage can easily save you data and reuse in next page.
// set in page A
window.sessionStorage.setItem('youdata', 'youdata');
// or window.sessionStorage['youdata'] = 'youdata';
// get in page B
var youdata = window.sessionStorage.getItem('youdata');
// or var youdata = window.sessionStorage['youdata'];
That's it! very simple!
If you'll open a new tab, you can use localStorage. (Here is documentation)
The usage of localStorage is like the way of sessionStorage.
While do saving information for other pages, these two method only need browsers' support.
<?php echo document.write(dataObj["email"]); ?>
This is unreasoned! echo is a PHP command, but document.write is a JavaScript command.
If the secound page is PHP, why not send data with a simple POST submit from HTML Form?
You can also use localStorage:
var data = '123';
localStorage['stuff'] = data;
Use localStorage.clear(); to remove all data if you want to write it again or for specific item use localStorage.removeItem('stuff');
List of some possible solutions are as follows:
1. Post the data using AJAX request and the get it in next page by doing DB call (Advisable)
2. Using Local storage you can store the data in the browser to push it to next_page.php https://www.w3schools.com/Html/html5_webstorage.asp
2a. In the first page
<script>
localStorage.setItem("name", "John");
localStorage.setItem("email", "John#test.com");
</script>
2b. In second Page
<script>
var name = localStorage.getItem("name");
var emaeil = localStorage.getItem("email");
</script>
3. Using browser session storage https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
3a. In the first page
<script>
sessionStorage.setItem("name", "John");
sessionStorage.setItem("email", "John#test.com");
</script>
3b. In second Page
<script>
var name = sessionStorage.getItem("name");
var emaeil = sessionStorage.getItem("email");
</script>
I have the code below:
<form action="/files/" method="get">
<h3>GET /files/{fileId}</h3>
<label>File ID: </label><input type="text" name="fileID" />
<input type="submit">
<br><br>
</form>
this responds with a URL: /files/?fileID=88
However, I want the URL to look like: /files/88
Does anyone know if this is possible and if so could you point me in the right direction to do so?
It can be done from the browser, although it's not clean as you would have to use Javascript to change the form's action attribute.
// get hold of the form element (it needs an id)
var form = document.getElementById('form-id'),
// get hold of the input tag (it also needs an id)
fileIdInput = document.getElementById('file-id'),
// get the action attribute, e.g. '/files/'
baseAction = form.getAttribute('action');
// add an even listener to listen for the form being submitted
form.addEventListener('submit', function() {
// get the value from the file id input
var fileId = fileIdInput.value;
// when it submits, change the action e.g. '/files/' + 88
form.setAttribute('action', baseAction + fileId);
// return true so that the form submits
return true;
});
It's not really maintainable code and server side solutions to this sort of problem have been around for a while.
If you're using Express and you already have a handler for the /files/:id endpoint, then I would suggest using AJAX to make the request instead of a standard GET form.
For example using the fetch api. Fetch is a new interface for doing AJAX requests, however it's not yet implemented in all browsers. So you might want to include a polyfill script.
// the first argument for fetch is the URL
fetch('/files/' + id)
// fetch returns a promise that we can call `.then()` on.
// our function will be called when the ajax request is done
.then(function(data) {
console.log(data);
})
I have a page with an select box, which fires an onChange event. In this Java-Script snippet, I would like to reload the current page, including the GET and POST parameters that where sent during request. AFAIK, this can be achieved by using window.location.reload(), or window.location.href = window.location.href when sending POST data is not required.
However, I need to append an additional value (actually, the value of the select element), additionally to the previously sent element. I do not care whether the data is sent using POST or GET. Is there a way to achieve the desired behavior?
To accomplish this you are going to have to rebuild a request from scratch. In the case of get requests, the arguments are easily accessible in the query string but post requests are a little trickier. You will need to stash all that data in hidden input elements or something so that you can access it.
Then you can try something like this:
var queryString = windlow.location.search; //args from a previous get
var postArgs = $("#myPostArgsForm").serialize(); //args from a previous post... these need to be saved and added to the html by the server
//your additional data... this part you probably need to adapt
//to fit your specific needs. this is an example
var myNewArgName = encodeURIComponent("newArg");
var myNewArgVal = encodeURIComponent("Hello!");
var myNewArgString = myNewArgName + "=" + myNewArgVal;
//if there is no queryString, begin with ?
if(!queryString) {
queryString = "?"
}
//if there is, then we need an & before the next args
else {
myNewArgString = "&" + myNewArgString;
}
//add your new data
queryString += myNewArgString;
//add anything from a previous post
if(postArgs) {
queryString += "&" + postArgs;
}
window.location.href = window.location.hostname + window.location.pathname + querystring
<form id="myPostArgsForm">
<input type="hidden" name="prevQuery" value="whats up?" />
</form>
Pretty simple really; have onChange fire a function that uses getElementById to figure out the selector value and then just use window.location to send the browser to the literal: http://yourdomain.com/yourpage.html?selectval=123
then, in the body onload() method, fire another JS function that checks the "get var" like:
function (GetSelector) {
var TheSelectorWas = getUrlVars()["selectval"];
alert(TheSelectorWas);
}
and do whatever you need to do in that function (document.writes, etc). BTW, posting the actual code you're using is always a good idea.
-Arne
I have two subsequent forms on my website with POST method.
The first page of my website first.php contains this code:
<form action="a.php" method="POST" target="_blank">
<input name="value" type="hidden" value="foo"/>
<div class="button"><label><span class="icon"></span>
<input type="submit" class="button-graphic ajax" value="Click Here"></label></div></form>
a.php can be accessed only via this POST request (otherwise user will get method not allowed 405 error)
Once submitted, this form opens a.php with an AJAX modal window.
a.php contains another form:
<form action="b.php" method="POST" target="_blank">
<input name="bar" type="hidden" value="none"/>
<div class="border"><label><input type="submit" class="button-graphic2 tracking" value="Continue"></label></div></form>
When a user clicks Submit in the second form, it will open b.php,
which can also be accessed only via POST request (otherwise - 405 error).
The only difference I can think about between these forms is that the second one contains a tracking js class (opening an iframe). this is the js code:
$(document).ready(function() {
$(".tracking").click(function(){
var iframe = document.createElement('iframe');
iframe.style.width = '0px';
iframe.style.height = '0px';
iframe.style.display = 'block';
document.body.appendChild(iframe);
iframe.src = '/track.htm';
});
This is done in order to track a conversion using a third party script which is being execuated from track.htm
I noticed that I am having a problem with about 5% of my iPad visitors.
they open a.php properly with a POST request, but when they go ahead to continue and open b.php as well, about 5% sends out a GET request instead of the desired POST request, causing them to get an 405 error and leave the website.
I know that these are real human users as I can see some of them trying several times to open b.php and keep getting these 405 errors.
Could this be caused because simultaneously their device is using a GET request to obtain track.htm? and this is some glitch?
How can this be solved?
EDIT 4.4.2015:
Since there's a chance that firing the tracking script is causing this, I would like to know if there's another fire to fire it (or track that adwords conversion), without causing these iPad user to use "GET" requests for the form as well.
EDIT 10.4.2015:
This is the jquery code of the ajax class, that effects both first.php and perhaps a.php, as first.php is the parent frame:
$(document).ready(function() {
$(".ajax").click(function(t) {
t.preventDefault();
var e = $(this).closest("form");
return $.colorbox({
href: e.attr("action"),
transition: "elastic",
overlayClose: !1,
maxWidth: $("html").hasClass("ie7") ? "45%" : "false",
opacity: .7,
data: {
value: e.find('input[name="value"]').val(),
}
}), !1
})
}),
Technically, it shouldn't happen. The iframe created by your tracking script pointed to /track.htm, so there shouldn't be any GET request to your b.php page.
On the other hand, just thinking out loud here, there're a few scenario that could happen because of "real world" user.
The users happen to have bookmark the b.php page, thus causing them to open it using GET when they try to re-open the page using their bookmark.
The users tried to refresh the page b.php, then get warned about "Form re-submission". Being clueless as most real user are, they canceled the form re-submission, then click on the address bar and click GO on their browser with the sole intention of reloading the page. This could also cause the GET request to send to the b.php page.
Considering the best practice when designing the page flow for form submission, it might be better for you to only "process" your form data in b.php and then return a 302 Redirect to another page that show the result using a GET request. This will allow users to "refresh" the page without double submitting the form, and also allow user to bookmark the result page too.
This doesn't answer your question but as it entails to the GET glitch but as things stand, ~5% of your iPad visitors can't sign up because the code only accepts POST and so far no one can figure this out. So I propose a change of strategy, at least in the mean time.
Preventing CSRF by only accepting POST requests is already known to not work. Your choice of accepting only this request method as a means of security is what ultimately results in the 405. There are better ways.
One example of is using a CSRF token, specifically the Synchronizer Token Pattern.
The idea behind a CSRF token is that when you generate the form, you also generate a "key" which you tie to the form. When that form is submitted, if it doesn't have the key or the key isn't the right one, you don't bother processing the form. The Syncronizer Token Pattern gets fancy in that it changes the expect key each time (in the form field implementation, giving the <input type="hidden"> field a new name attribute each time) in addition to the value.
Have your code in a.php generate a random token and
store it as a session variable on the server. Output the token in the form as a hidden field.
Before processing the request in b.php, ensure the token value is in the request data and ensure it has the expected value.
You can first check for $_POST data and if it is missing, check for $_GET data. Regardless of which array contains the data, if the data does not have a valid CSRF token, respond with a 4xx error.
If the token is good, consume the token and process the request.
If the token is missing or is invalid, return a 4xx response code.
Another way would be to set your field names to random values each time the form is generated. So instead of <input name="value" type="hidden" value="foo"/> or <input name="bar" type="hidden" value="none"/>.
// ... in an importable file somewhere ...
// Generate our tokens
function token($len = 13) {
$chrs = 'abcdefghijklmnopqrstuvwxyz0123456789_';
$str = '';
$upper_lim = strlen($chrs) - 1;
for ($i = 0; $i < $len; $i++) {
$idx = rand(0, $upper_lim);
$str .= rand(0, 1) ? strtoupper($chrs[$idx]) : $chrs[$idx];
}
return $str;
}
function magic_set_function($key, $value) {
$_SESSION[$key] = $value;
}
function magic_get_function($key) {
return (array_key_exists($key, $_SESSION) ? $_SESSION[$key] : NULL)
}
function validate_request() {
$data = !empty($_POST) ? $_POST : $_GET;
if ( empty($data) ) { return false; }
// Ensure the tokens exist (hopefully not too costly)
$field_tokens = magic_get_function('field_tokens');
if ( $field_tokens) === NULL ) { return false; }
$csrf_token_name = $field_tokens['token'];
$given_csrf_token = $data[$csrf_token_name];
// Get our CSRF token
$expected_csrf_token = magic_get_function('csrf_token');
// ensure we're expecting a request / that we have generated a CSRF
if ( $expected_csrf_token === NULL ||
$expected_csrf_token !== $given_csrf_token) {
return FALSE;
}
// After whatever other checks you want...
return TRUE;
}
function fetch_data() {
$data = empty($_POST) == FALSE ? $_POST : $_GET;
if (empty($data ) { throw new DataLoadException(); }
// Ensure the tokens exist (hopefully not too costly)
$field_tokens = magic_get_function('field_tokens');
if ( $field_tokens) === NULL ) { throw new TokenLoadException(); }
foreach ($field_tokens as $field_name => $token_name) {
if ( isset($data[$token_name]) ) {
$data[$field_name] = $data[$token_name];
unset($data[$token_name]);
}
}
return $data;
}
// first.php/a.php/b.php (wherever necessary)
// ...
$tokens = array();
// our csrf token
$csrf_token = token();
$field_names = array('value', 'bar', 'token');
$field_values = array('value'=>'foo', 'bar' => 'none', 'token' => $csrf_token);
// Tokenize errthing...
foreach ($field_names as $k => $field_name) {
// and generate random strings
$tokens[$field_name] = token();
}
// You NEED TO STORE THESE TOKENS otherwise submissions lose context
magic_set_function('field_tokens', $tokens);
magic_set_function('csrf_token', $csrf_token); // dup, but j.i.c.
// first.php
printf('<input type="hidden" name="%s" value="%s"/>', $tokens['value'], $field_values['value']);
// ...
// a.php
// Get the data... (POST/GET)
if (ensure_valid_request() !== TRUE) { handle_invalid_request(); }
$data = fetch_data();
// ...
// Tokenize errthing, generate a csrf, store the values, etc.
// ...
printf('<input type="hidden" name="%s" value="%s"/>', $tokens['bar'], $field_values['bar']);
// ...
// b.php
// ... You get the idea ...
It doesn't answer your question of why 5% are sending GET Requests but it does solve your overall problem on both a security and user level.
EDIT:
To specifically answer OPs questions in comments:
"(1) does this require using cookies? (a session means cookies right?)"
Read up on PHP Sessions and look for a session library. Plenty out there, one heavyweight being Zend(http://framework.zend.com/manual/1.12/en/zend.session.html). You can save to a database instead for protected server-side sessions. I made one similar to Kohana's.
(2) I didn't understand the "another way" part - how does it differ from the method you described at first?
First method is to just add a token to your form and look for the token to have the expected value upon submission. If the form doesn't have it, you throw an error complaining.
Second method dynamically sets the field names upon form generation AND adds a token field. Submitting the proper form data from a program, bot, or outside source now first requires fetching the form since they wont know what field names to use (instead of just posting data with set field names).
"(3) most important, I am less worried about CSRF attacks, I just don't want bots/crawler to crawl into my forms, would this method prevent it from them, as opposed to humans? why? and is there an easier method to achieve that?"
If you mean bots like Google/SEO/respectful web-crawlers, robots.txt exists
for this purpose. robots.txt is a very simple text file that is placed in your site's root directory. You'll see requests in your webserver's access logs for a /robots.txt. This file tells search engine and other robots which areas of your site they are allowed to visit and index. You can read more on the (Robot Exclusion Standard)4 on many (websites)5.
As the second link notes, don't use robots.txt to hide information. It is a public file and visible to anyone. Also, malicious bots wont respect the file.
I'm not sure if when you say bots you mean just crawlers or spambots (bots trying to submit data) and such. If it's crawlers, robots.txt takes care of them. If it's spambots, you can add a hidden field (hidden with CSS not html) with a common name that when filled out you know is invalid, you can add a captcha, etc, etc, etc.
Try doing the tracking on the callback of the original request to ensure its loaded?
Also you could look into something like ajaxFormPlugin by malsup
i would like to suggest to check the permission of your "b.php" page. Please make sure the page has "w" permission for all users. this is a chance for not making a "POST" request.
I know it's a workaround but if, as I suppose, you have a bunch of checks for the $_POST variables, if you receive a GET request you could try replace the POST with the GET:
if (empty($_POST) && !empty($_GET)) $_POST = $_GET;
//here the check of $_POST
//...
since we don't know why this ipads (...apple -.-) have the issue, and between GET and POST there isn't so much difference - at least if you don't need to upload files...
The only way a post form can be sent as get is using script (changing the method attribute directly, or replacing the form behavior for example with an ajax request, binding to the event "submit" another function), so I suggest you to check every script that run in the parent and the children pages.
your ajax call doesn't contain method: "POST". This can be the cause.
How can I pass the value of textarea to a new page according to the groupwall method?
Here I just redirect the page. I want to make status update according to their semester.
Here is my code. Give me some code sample or suggest if this is not the right way to do that.
<form action="" method="get">
<textarea name="status" id="wall" cols="50" rows="2">
</textarea>
<input name="submit" type="submit" value="share" onclick="groupwall();"/>
</form>
<script type="text/javascript">
function groupwall(){
var semster=document.getElementById('txtsamp').value;
if(semster == "4-1"){
window.location ='4-1hpage.php';
//header("location: member-index.php");
}
else if(semster =="3-1"){
window.location ='3-1hpage.php';
}
else if(semster == "2-1"){
window.location ='2-1hpage.php';
}
else {
window.location ='1-1hpage.php';
}
}
</script>
you might be better off posting the textarea content to your server and storing it somewhere, even in the session. the reason I say this is that while you could pass it in window.location as a GET parameter, the textarea content can be arbitrarily long and might be too long to be passed as a GET parameter. you might consider an AJAX request to post the textarea to the content, perhaps performing validation, before redirecting to the next page of your application.
Just give your form an id -
<form id="share-form" ...
Set the action of the form instead of redirecting
var share_form = document.getElementById('share-form');
share_form.action = '....';
Submit the form
share_form.submit();
1) do a form post to another PHP page and
a) Store it in a database (If you will really use this in future also)
OR
b) Store it in Session Variable
OR
2) do an ajax post to a server page and
OR
a) Store it in a database
OR
b) Store it in Session Variable
Then from any PHP pages you can access these values.
Send as a parameter through the query string yoururl.com?variable=value
Through $_SESSION environment variable
Using a cookie (if turned on)
AJAX - store in database or text file before leaving page, and retrieve when entering new page
The simplest way to pass some sort of variable to a new page if the data isn't large is to put it in a query string in the URL and then have the new page parse it out of there and act on it. A query string is the part of the URL that follows a question mark like this:
4-1hpage.php?data=whatever
The query string values don't affect which page is called on your server, but can be used by either server or client to trigger different behavior in that page.
In the specifics of your particular question, it doesn't seem like you need to pass any data to the next page because you're already called a different page based on the results of the textarea, but you could pass the value like this if you needed to:
function groupwall() {
var semster=document.getElementById('txtsamp').value;
var url;
if(semster == "4-1") {
url ='4-1hpage.php';
} else if(semster =="3-1") {
url ='3-1hpage.php';
} else if(semster == "2-1") {
url ='2-1hpage.php';
} else {
url ='1-1hpage.php';
}
// encode the data for URL safety and make sure it isn't too long
window.location = url + "?semster=" + encodeURIComponent(semster.slice(0, 128));
}
If the textarea can be arbitrarily long and it needs to be capable of accepting very long values, then you will want to post it to your server and let the server decide where to redirect the user after the form post. When generating a new page, the server can then populate that page with whatever content is needed based on the values in the form post.
Other places that data can be stored temporarily so a future page can access it are cookies and HTML5 local storage. Cookies are somewhat restricted in size and it isn't efficient to put large data into cookies. HTML5 local storage isn't supported in all browsers so you generally need an alternate strategy as a fallback.