Develop Reference

Clients using `GET` requests for a form, even though `POST` is defined. is javascript iframe the cause?

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 to get facebook page id inside page fan tab using facebook javascript sdk

I'm tring to create a web app that create a fan tabs for facebook pages ...
my problem is ...
I tried this :-
FB.api(
"/{page-id}/feed",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);
How to get facebook page id inside page fan tab using facebook javascript sdk ?
this is image describing what I want to do :
http://www.wtttc.com/image.php?id=25
I tried everything but no use :(
thank you

In order to get the page id of fan page, you need to get the signed_request from Facebook.
https://developers.facebook.com/docs/facebook-login/using-login-with-games#checklogin
In fact, this link talk about the cavas page, but it's the same principle for the fan page.
But if you look carefully the way to get this variable, you can find that,
The signed request is sent via an HTTP POST to the URL set as your Canvas URL in the App Dashboard.
Which means, if you want to get a signed request data, you should get it through a HTTP POST.
To get the page id of fan page is not possible just using javascript. Javascript is a client side language, so you can't access the POST data.
What you need to do is just put your javascript code into a .jsp/.php/...or any other server-side language page. Through the server-side language page, you get the signed request and pass it to your javascript code.
Here is an example in JSP:
<%String signedRequest = request.getParameter("signed_request");%><script>window.signedRequest = "<%=signedRequest%>"</script>
And in your javascript, just decode the string you got and it will contain the page id.
var signedRequest = global.signedRequest;
var data1 = signedRequest.split('.')[1];
data1 = JSON.parse(base64decode(data1));
console.log(data1);
Then you can get data like this:
Object {algorithm: "HMAC-SHA256", expires: 1404925200, issued_at: 1404921078, oauth_token: "CAAUT5x1Ujq8BAPzh2ze1b4QTBkcZAtRCW6zA1xJszUasqoEPp…Fy8fAVEZAyhVaxEaq6ZBw6F4bSFI1s8xtXbBLp7oBFL4wZDZD", page: Object…}
algorithm: "HMAC-SHA256"
expires: 1404925200
issued_at: 1404921078
oauth_token: "CAAUT5x1Ujq8BAPzh2ze1b4QTBkcZAtRCW6zA1xJszUasqoEPpFRfM1ln3x9pb7mLBujyug5iHUifSnyxmPHOLe030wI3H5DYXubnxbPhww9aipSnwoEr6lwctuQaGKxYvDBdZCNuFiaYIduORTWirmZC2rKL86Fy8fAVEZAyhVaxEaq6ZBw6F4bSFI1s8xtXbBLp7oBFL4wZDZD"
page: Object
user: Object
user_id: "1519950734891144"
proto: Object
In the page object, you can find page id.
Object {id: "1522695611287219", liked: true, admin: true}
About how to decode the signed request, you can see this link
https://developers.facebook.com/docs/facebook-login/using-login-with-games#checklogin
It's the same way.
Hope this can help you.

You can use fql to get everything you want.
https://developers.facebook.com/docs/reference/fql/
I think this will work for you :
var currentPageID;
var url = window.top.location;
FB.api(
{
method: 'fql.query',
query: "SELECT id FROM object_url WHERE url = '" + url + "'"
},
function(response) {
currentPageID = response[0].id;
}
);
alert(currentPageID);

http://www.wtttc.com/image.php?id=25
window.top.location;
Dose not work inside the facebook page tab ... I traied that before and now ...
Any new Ideas :)

This is a tested solution that uses Facebook Javascript SDK and its undocumented parseSignedRequest method.
Note: you will have to use a bit of server code and this example is for PHP, but it's the easiest I've been able to find out.
Your html page (or whatever you're serving):
<head>
.....
<script type="text/javascript">
// set a variable with the signed_request sent to your app URL by Facebook via POST
var signedRequest = "<?php echo $_REQUEST["signed_request"] ?>";
FB.getLoginStatus(function (response) {
// do not use the response.authResponse.signedRequest but the one above instead
// and let the javascript SDK parse the good signed_request for you
var page = this.parseSignedRequest(signedRequest).page;
// is the current user an admin of this page? true/false
var isAdmin = page.admin;
// do you like this page? true/false
var isLiked = page.liked;
// and here is the Facebook page ID
var pageID = page.id;
if (response.status === 'connected') {
// user is connected
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
}, true);
<script>
Hope this helps. Cheers.

You have to get signed_request POSTed to your app from server side.
https://developers.facebook.com/docs/pages/tabs
Go through the link get some idea about the page tab and page id.

passing value from one page to another with javascript

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.

Verify URL with JavaScript?

I have an application where users have somewhat of a settings page, and some of those settings allow URLs to be entered into them. I want to be able to run a check using javascript to make sure the URL they entered is valid and a real URL.
When they click submit, it will either do what it's supposed to do, or if there's an error in the URL, pop up with an alert and say "Invalid URL entered!".
Is there a way to do this with JS? I also want this script to work with http:// and https:// as well as www. in the URL, and every domain extension (.com, .tv, etc.). This also needs to be done with JavaScript, not jQuery.
Can anyone show me how to do this? Thanks.

It seems you're wanting to do two things:
1) Determine that the URL is valid (i.e. correctly formatted)
For this a regular expression will work well, this approach will also allow you to retrieve various parts of the URL if that's something you'd like to do.
this has been discussed here: What is the best regular expression to check if a string is a valid URL?.
2) Determine that the URL is real (i.e. if someone where to follow it they'd find something)
This is more tricky, but you could attempt an AJAX request to the URL and if it fails or times out assume it's down. There may be some limitations to this approach due to XSS security features on sites.
If that's a problem you could create a service of your own design that runs on a server that your JavaScript makes a request to, passing it the URL, and it responds with a failure or success.
Here's an example:
verify.js
function verifyURL (url) {
// with jQuery
$.getJSON('check-url.cgi', { url : url }, function (res) {
console.log(res); // display server response
if ( res.status == 'success' ) {
// URL is real
} else {
// URL is not real
}
});
}
check-url.cgi
#!/usr/bin/env perl
use v5.10;
use strict;
use warnings;
use CGI qw(:standard);
use JSON::XS;
use LWP::UserAgent;
my $ua = LWP::UserAgent->new;
$ua->agent("URL Checker/0.1");
my $url = param('url');
my $req = HTTP::Request->new(GET => $url);
my $res = $ua->request($req);
my $status = $res->is_success ? 'success' : 'failure';
print header('applicaton/json'), encode_json { status => $status };

Parse External JSON With JQuery $.getJSON?

I want to get a quote from iheartquotes and add it to a div when the page loads. I currently have this code but do not know why it wont work
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://iheartquotes.com/api/v1/random?format=json&callback=?', function(data) {
$(".content").html(json.quote);
});
});
</script>
And the HTML in the body
<div class="content">
This will be replaced with a quote
</div>

The URL returns JSON, not JSON-P, so you can't read it cross domain with JS in a browser.
You could do this server side instead, or find a third party proxy that could convert it to JSON-P (perhaps YQL).

Yes i too agree with #Quentin. This is not possible in client-side as you are trying to access another domain due to Same origin policy.
So you can call a webservice / a static webmethod in an aspx page (using page- methods) from javascript and do this server side and get back the results client-side itself, where you can do this cross-domain.
The following code may help you to do this in server-side,
You could use WebClient for that matter:
using (var client = new WebClient())
{
// Define data to be posted
var values = new NameValueCollection
{
{ "key1", "value1" },
{ "key2", "value2" },
};
// Send the POST request
byte[] result = client.UploadValues("http://foo.com", values);
// This will contain the cookie being set
string cookie = client.ResponseHeaders[HttpResponseHeader.SetCookie];
}
Hope this helps...