I'm planning to use an AMP email with an embedded form to collect some data using an action-xhr action, I will develop a new service in my back end to collect this information, but I have a trivial question about how I can protect my service to avoid bot and more in general malicious calls.
In my original idea, I planned to use the reCAPTCHA v3 AMP component, but this is available only for the AMP websites, so I can't use it in the AMP email.
So, if I understand correctly, there isn't a way to protect my service from the bot, and the idea of exposing a service without any form of protection doesn't like me.
Another option is to avoid a multi-call from the same IP, but this is not a real solution.
Let for examle the AMP email:
<!doctype html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form method="POST" action-xhr="https://rest.service.com">
<fieldset>
<label>
<span>Phone number:</span>
<input type="text" name="phoneNumber" required>
</label>
<input type="submit" value="Subscribe">
</fieldset>
<div submit-success><template type="amp-mustache">Subscription successful!</template></div>
<div submit-error><template type="amp-mustache">Subscription failed!</template></div>
</form>
</body>
</html>
How can I protect the https://rest.service.com REST service, I don't find any specific response to this need, do you have suggestions or best practices?
Thanks
Related
I want to send Form data to the same page using classic ASP.
Code:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Form</title>
</head>
<body>
<%
'Classic ASP:
Dim test
test = request.form("CtrlTest")
response.write "result = '" & test & "'<br>"
%>
<!-- alternative: <Form name="test" method="POST" target="_self" > -->
<Form name="test" method="POST" action="" >
<a href>ClickThis</a>
<input type="hidden" name="CtrlTest" value="ATest" />
</Form>
</body>
</html>
After clicking I had expected the result to be:
"result='ATest'
ClickThis"
But it is:
"result=' '
ClickThis"
How can I read the posted data?
Tested in localhost mode:
Chrome OK,
IE11: Error 403.14.
This makes me wonder how the POSTing happens:
The POST data is sent to a server that passes the data on to the target Receiving ASP or PHP page.
When the Receiving page opens first time after the transmission the data is available for request.
If the Receiving page is the same as the Sending page (e.g. target =”_self”) the data is immediately available in the page (if it is an ASP or PHP page).
The next time the Receiving page opens the data is no longer available.
Is this correct?
And this should work OK even if I am in localhost mode, and not reaching an actual server?
If the Request lines in the Receiving page lies in a file that is #included into the Receiving file – will it still work?
Links do not submit forms. They just go to the URL in the href attribute.
To submit a form, use a submit button.
<button>Submit</button>
I'm trying to get the example shown here to work:
https://developer.paypal.com/webapps/developer/docs/classic/adaptive-payments/ht_ap-embeddedPayment-curl-etc/
However, I always get the error Payment can't be completed. This feature is currently unavailable.
This is the code, taken directly from PayPal's documentation (where {{PAY-KEY}} is a pay key you obtain from PayPal):
<html>
<head>
<script src="https://www.paypalobjects.com/js/external/apdg.js" type="text/javascript"></script>
</head>
<body>
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame" class="standard">
<label for="buy">Buy Now:</label>
<input type="image" id="submitBtn" value="Pay with PayPal" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif">
<input id="type" type="hidden" name="expType" value="mini">
<input id="paykey" type="hidden" name="paykey" value="{{PAY-KEY}}">
</form>
<script type="text/javascript" charset="utf-8">
var dgFlowMini = new PAYPAL.apps.DGFlowMini({trigger: 'submitBtn'});
</script>
</body>
</html>
The same error occurs when you try to use this for Preapproval ([...]/flow/preapproval, request variable preapprovalKey), and also with the LightBox code sample.
What am I missing here ?
Contacted PayPal support and they apparently fixed it (again...).
I've a website used by over 500,000 people, but a tiny few (about 20) are reporting that one of the forms resets when clicking "submit".
I've stripped out other code, but the HTML in the FORM tags is complete:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<body>
<form id="fProfile" action="/cv.html" method="post" enctype="multipart/form-data">
<div class="row"><label for="fName">Your Name:</label><input type="text" id="fName" name="text" /></div>
<div class="row"><label for="fEmail">Your Email:</label><input type="text" id="fEmail" name="email" /></div>
<div class="row"><label for="fCvFile">Your CV:</label><input type="file" id="fCvFile" name="cv" /><em>Please only attach a CV, up to 200kb in size.</em></div>
<input type="submit" class="submit" name="go" value="Save CV" />
</form>
</body>
</html>
There is no JavaScript involved and the form could not be simpler!
Feedback is limited, but it's being reported that this happens on MSIE/Chrome/Firefox. It must be third party software interupting the form but reports come in from computers with McAfee/AVG/Avast. I can't find a single common factor other than the HTML ...
All reports say that the form resets on clicking the submit "Save CV" button without attempting to load a page but I'm unable to replicate this.
I've never come across anything like this and am hoping one of you have!
Thanks for any help or guidance.
EDIT: I've added a name/email input form too to show that it is just the type=file input that is resetting. The remainder of the form holds on to the entered text.
It says you are posting to a HTML page - surely you would need to post to a PhP page or similar.
So basically when you hit submit the page is just refreshing. Also in your HTML page you should always have a head tag.
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
I have a frameset with an iFrame with a form in it.
When I submit the form IE8 does not send the form values. Firefox does.
Without the ambient frameset it works.
This is my code:
form.php:
<form method="post" action="doit.php" name="myForm" id="myForm" target="myFrame">
<input type="hidden" id="customer__csrf_token" name="customer[_csrf_token]" value="0136dba17fc1a81dc2c3b44dcb513712" />
...
<a onClick="document.myForm.submit();">Send</a>
</form>
site.html:
<iframe id="myFrame" name="myFrame" src="form.php" frameborder="0" >foo</iframe>
index.html:
<html>
<head></head>
<frameset rows='100%,*'>
<frame name='target' src='site.html'>
<noframes>foo</noframes>
</frameset>
</html>
I also tried to submit the form with these calls:
$('#myForm').submit();
document.forms['myForm'].submit();
parent.frames['myFrame'].document.forms['myForm'].submit();
<input type="submit" value="send" name="send" id="send" />
Can you help me?
EDIT:
I found the problem. I use the symfony framework. symfony uses a hidden csrf token in combination with a cookie value to secure the form trasmission. For some reason in my case IE8 is not able to store this cookie. Now I removed the csrf token from the form to get it working correctly.
CSRF was not the main problem. The problem in my case was caused by the IE security settings. IE does not allow a.o. cookies from domains with an underscore in it.
My domain was foo_bar.dev.domain.com, after chaning it to foo-bar.dev.domain.com it worked, also with enabled CSRF.