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?
