I am writing a backend for a web based system and currently do testing using curl on the command line. I know too little about web design so I'll outsource this layer later, once the service has taken shape.
In the mean time I do want to just do a small proof of concept that a web site can act as middle (front-ish) tier.
The back-end (being written in python/bottle) receives data in JSON format (and replies in a similar format), so I can do
$> POSTING="-X POST -H Content-Type:application/json -u user:password"
$> curl $POSTING -d #input.json https://backend.server/path/to/function
I would like to try out a few of the functions using a web-based interface in stead of curl, so I wrote a simple handler in python using a preppy template that throws up a form, eg:
<form action="https://backend.server/path/to/function" method="post">
Enter Something <input name="fieldname" type="text" />
</form>
This form is actually generated by a simply python/bottle/preppy program running on a "front-end" server, eg: https://frontend.server/testform
The form action points to the same path that I would use in curl, but this has got some disadvantages because the backend system doesn't have any awareness of the front-end system being used, so there is no re-direction to a next step.
I can possibly let the form be handled on the frontend-server, re-package the request and forward it to the backend server as JSON, handle the response from the backend, and format it for the client. This makes sense because the front-end can do some value-add (by being not stateless, eg it can add smart logic (The backend provides a very simple interface).
So as a mostly academic question, and because I am sure I will need to know at some point how to do this in any case, I started to investigate how to use JavaScript to submit form data as JSON.
I have found This answer which seems good to me, but where does it go in the HTML document? I guess between <script> tags in the <head> section, but how does the script know when to execute - I may have multiple forms on a single page: So how does it know which form to attach to? Basically about this answer I want to know how it works?
How can I alter it to also be able to handle other HTTP methods, eg PUT or DELETE?
I have another question which relates to the Authentication header, as I want Authentication and Authorization to be handled on the back-end. The "front-end" can be owned by an untrusted third party, so how do I handle this?
My current thinking is that the user will sign the request and the JSON requests may look like this:
{
"FINGERPRINT": "xxxxxxxxxxxxxxx",
"REQUESTSIGNATURE": "xxxxxxxxxxxxxxxxxxxxxx",
"SUBJECT": "URL.....",
"REQUEST": {
"Field1": "Field1-value",
"Field2": "Field2 value"
}
}
In this case the Form Fields are packed into the "REQUEST" field of the main JSON document, and the signature is generated for that part only. The client must to the JSON packaging because the middle tier must not have access to the user's private key.
Since the request section of the JSON document is not encrypted, and since HTTP authentication lives outside of the request data, I can use a pre-stored public key for every user to authenticate the requests. The Middle tier can read the request, but depends on the back-end to verify the signature. The only problem with this is how to get the client (browser) to store a public key for a new user without first handing it to the untrusted middle tier. But this is probably a separate question?
Related
Using PHP, how do you securely authenticate an API call, cross-domain, with the following criteria:
Must be called from a given domain.com/page (no other domain)
must have a given key
Some background: Please read carefully before answering...
My web application will display a javascript widget on a client's website via a call like the one below. So we're talking about cross-domain authentication for a script to be served but only to genuine client and for a given URL only!
At the moment the widget can be included by the CLIENT's website, by a single-line of javascript.
Example client-website.com/page/with/my-widget
<head>
...
<script src="//ws.my-webappserver.com/little-widget/?key=api_key"></script>
...
</head>
Now, in reality this does not call javascript directly but a PHP script on my remote server which sits in front of the actual javascript for the purpose of doing some authentication.
The PHP script behind the above call does this first:
checks that API key ($_REQUEST["key"]) matches the user's record in the database.
checks the referrer's URL ($_SERVER['HTTP_REFERER']) against the a record in the database***.
This is simplified, but in essence the server looks like:
if ($_SERVER['HTTP_REFERER'] !== "http://client-website.com/page/with/my-widget")
&& $_REQUEST["Key"] == "the_long_api_key") {
header("Content-type: application/x-javascript");
echo file_get_contents($thewidgetJS_in_secret_location_on_server);
} else {
//pretend to be a 404 page not found or some funky thing like that
}
***The widget is only allowed to run on CERTAIN websites/pages
Now, here's the problem:
the key is on the client side so anyone can view source and get the key
referrers can be spoofed (by cURL) for example
And a little snag:
I can't tell the clients to stick the key inside a php script on their server because they could be running any server side language!
So how can I make my web service secure and only accessible by a given domain/page?
Any help would be really appreciated!
ps: The widget does some uploading to a kind of drop box - so security is key here!
id recommend using a whitelist approach to this issue, i am not entirely sure this will solve the problem however i have used a similar technique for a payment processor which requires you to whitelist server-ips.
I've got a single page node.js FB Canvas App. Every user action triggers an AJAX POST to my node.js HTTPS server, returning the result.
Now I need a way to send a user token I create from the userId on app boot (this is an AJAX POST too, returning all content + user token). I verify that it is this user by doing a Graph API call (which is required for my boot for another reason) on the server.
Q1 So to create the token what should I use?
Q2 How to send the token with every AJAX call:
POST param?
cookie?
something else?
Q1 I assume that tokens should be unique and secure. That's generally not an easy problem. I would go with following steps:
generate a random number
try to save it into DB (or any other shared storage)
if it already exists in DB go to step 1. if not go to step 4
send the token
Ad.1. To generate a random number use crypto.randomBytes with large enough size param (256 is more then enough) in order to minimize collisions:
http://nodejs.org/api/crypto.html#crypto_crypto_randombytes_size_callback
crypto.randomBytes should be secure. There are however some subtleties with it. For example you have to ensure that your machine has enough entropy. It can be a problem when your server does not have keyboard, mouse or mic. You can always add a hardware entropy generator:
http://en.wikipedia.org/wiki/Hardware_random_number_generator
If you don't need it to be secure then you can use crypto.pseudoRandomBytes instead.
Also it is a good idea to create and use your own algorithm (based on crypto of course). For example add a current date to that number, hash it, whatever. Just be careful not to overdo it.
Also remember about cleaning DB from old tokens.
Q2 It doesn't really matter. Whatever suits you. Probably putting it in a cookie is the easiest solution.
If you need this token for preventing from a CSRF attack, I'd recommend to send it into a POST parameter.
Since mostly a backend guy, I am not sure how can I achieve the following since it
requires some interaction with the browser.
So, I have a the following things so far.
A communication protocol where server is in python and client is in javascript code.
Ultimately, I want my data to reach to that javascript code.
Now, this data is being captured from browser.
As a practice.. what I am trying to do is.. have two radio buttons on my browser and a submit button
*radio A
*radio B
* Submit
Now, when the user presses submit, I somehow want to create a query "user submitted: A (or B)" and this query i am able to capture on python script.
I am at lost on how to do this.
My guess is that "submit" invokes a python script.
But what if my python server is always on .. how do i parse that response from the click of browser to this python server?
This is the way it usually works:
Client (browser) visits webpage and initiates request to server
Server (in your case, Python) handles request and writes HTML response, including the radio-button form
Client fills out form and hits Submit, triggering another request to the server
Server handles the second request and writes another response (e.g. "Purchase successful", "message posted", etc.).
Note that the second request is a brand-new request. You may want some way of linking the first request to the second one unless the second request is anonymous. Some frameworks will do that for you, but if you are making the server from the ground up you'll want some kind of session mechanism to keep track of state.
To get the client to make the second request, the simplest is to add appropriate action and method attributes to the form element in your HTML. action specifies the URL to access for the form request, and method is either GET or POST. (More advanced usage, e.g. on this site, typically uses AJAX to make the submissions instead).
I want to pass some textbox value strictly using POST from one html page to another...
how can this be done without using any server side language like asp.net or php
can it be done using javascript??
thnx
You can't read POST data in any way on javascript so this is not doable.
Here you can find similar questions:
http://forums.devshed.com/javascript-development-115/read-post-data-in-javascript-1172.html
http://www.sitepoint.com/forums/showthread.php?454963-Getting-GET-or-POST-variables-using-JavaScript
This reading can also be interesting: http://en.wikipedia.org/wiki/POST_%28HTTP%29
This expecially suggests why this answer (wikipedia is the source):
GET
Requests a representation of the specified resource. Requests using GET should only retrieve data and should have no other effect.
(This is also true of some other HTTP methods.)[1] The W3C has
published guidance principles on this distinction, saying, "Web
application design should be informed by the above principles, but
also by the relevant limitations."[10] See safe methods below.
POST
Submits data to be processed (e.g., from an HTML form) to the identified resource. The data is included in the body of the request.
This may result in the creation of a new resource or the updates of
existing resources or both.
POST data is added to the request. When you do a GET request the data is added to the url, and that's why you can access it through javascript (and that's why it's not parsed and you have to do it manually). Instead, POST send data directly into the http requests, which is not seen in any way by the html page (which is just a part of what is sent through the http request).
That said, only server side language will receive the full HTTP request, and definitely you can' access it by javascript.
I'm sorry but that is the real answer
I need to do as much as possible on the client side. In more details, I would like to use JavaScript to code an interface (which displays information to the user and which accepts and processes response from the user). I would like to use the web serve just to take a date file from there and then to send a modified data file back. In this respect I would like to know if the following is possible in JavaScript:
Can JavaScript read content of a external web page? In other words, on my local machine I run JavaScript which reads content of a given web page.
Can JavaScript process values filled in a HTML form? In other words, I use HTML and JavaScript to generate an HTML form. User is supposed to fill in the form and press a "Submit" button. Then data should be sent to the original HTML file (not to a web server). Then this data should be processed by JavaScript.
In the very end JavaScript will generate a local data-file and I want to send this file to a PHP web server. Can I do it with JavaScript?
Can I initiate an execution of a local program from JavaScript. To be more specific, the local program is written in Python.
I will appreciate any comments and answers.
It could technically, but can't in reality due to the same origin policy. This applies to both reading and writing external content. The best you can do is load an iframe with a different domain's page in it - but you can't access it programmatically. You can work around this in IE, see Andy E's answer.
Yes for the first part, mmmm not really for the second part - you can submit a form to a HTML page and read GET arguments using Javascript, but it's very limited (recommended maximum size of data around 1024 bytes). You should probably have all the intelligence on one page.
You can generate a file locally for the user to download using Downloadify. Generating a file and uploading it to a server won't be possible without user interaction. Generating data and sending it to a server as POST data should be possible, though.
This is very, very difficult. Due to security restrictions, in most browsers, it's mostly not possible without installing an extension or similar. Your best bet might be Internet Explorer's proprietary scripting languages (WScript, VBScript) in conjuction with the "security zones" model but I doubt whether the execution of local files is possible even there nowadays.
Using Internet Explorer with a local file, you can do some of what you're trying to do:
It's true that pages are limited by the same origin policy (see Pekka's link). But this can be worked around in IE using the WinHttpRequest COM interface.
As Pekka mentioned, the best you can manage is GET requests (using window.location.search). POST request variables are completely unobtainable.
You can use the COM interface for FileSystemObject to read & write local text files.
You can use the WScript.Shell interface's Exec method to execute a local program.
So just about everything you asked is attainable, if you're willing to use Internet Explorer. The COM interfaces will require explicit permission to run (a la the yellow alert bar that appears). You could also look at creating a Windows Desktop Gadget (Vista or Win 7) or a HTML Application (HTA) to achieve your goal.
Failing all that, turn your computer into a real server using XAMPP and write your pages in PHP.
see i got what you want to do
best things is do following
choose a javascript library (eg:jquery,dojo,yui etc), i use jquery.this will decrease some of your load
inspite of saving forms data in in a local file, store them in local variables process them and send them to server (for further processing like adding/updating database etc) using XMLHttp request, and when webservice returns data process that data and update dom.
i am showing you a sample
--this is dom
Name:<input type='text' id='name' />
<a href='javascript:void(0)' onClick='submit()'>Submit Form</a>
<br>
<div id='target'></div>
--this is js
function submit()
{
var _name=$('#name').val();// collect text box's data
//now validate it or do any thing you want
callWebservice(_name,_suc,_err);
//above call service fn has to be created by you where you send this data
//this function automatically do xmlHttprequest etc for you
//you have to create it ur self
}
//call this fn when data is sucessfully returned from server
function _suc(data)
{
//webservice has returned data sucessefully
//data= data from server, may be in this case= "Hello user Name"; (name = filled in input box);
//update this data in target div(manipulate dom with new data);
$('#target').html(data);
}
function _err()
{
//call this fn when error occurs on server
}
// in reality most of the work is done using json. i have shown u the basic idea of how to use js to manipulate dom and call servcies and do rest things. this way we avoid page-reloads and new data is visible to viewer
I would answer saying there's a lot you can do, but then in the comment to the OP, you say "I would like to program a group game."
And so, my answer becomes only do on the client side what you are able and willing to double check on the server side. Never Trust the Client!
And I do not want to do my job twice.
If you are going to do things on the client side, you will have to do it twice, or else be subject to rampant cheating.
We had the same question when we started our project.In the end we moved everything we could on the JS side. Here's our stack:
The backend receives and send JSON data exclusively.We use Erlang, but Python would be the same. It handles the authentication/security and the storage.
The frontend, is in HTML+CSS for visual elements and JS for the logic.A JS template engine converts the JSON into HTML. We've built PURE, but there are plenty of others available. MVC can be an overkill on the browser side, but IMO using a template engine is the least separation you can do.
The response time is amazing. Once the page and the JS/CSS are loaded(fresh or from the cache), only the data cross the network for each request.