JQuery with Wt

This is my eleventh in AESTE. Trying to use Witty (Wt) as a CLIENT to send request to my PIC32 wolfSSL server. My time limit is 3days to get this done.

     ̿̿ ̿̿ ̿̿ ̿̿ ̿’̿’\̵͇̿̿\з=( ͡° ͜ʖ ͡°)=ε/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿                                                                                                   ̿ ̿̿’̿’\̵͇̿̿\=(•̪○)=/̵͇̿̿/’̿̿ ̿ ̿ ̿
░░░░░░███████ ]▄▄▄▄▄▄▄▄▃  ♥ ♥ ♥ ♦ ♦ ♦ ♣ ♣ ♣ ♠ ♠ ♠                                      ▃▄▄▄▄▄███ ]……… ▂▄▅█████████▅▄▃▂                                                                                           ▂▄▅█████▅▄▃▂… I███████████████████].                                                                                [███████████████]
◥⊙▲⊙▲⊙▲⊙▲⊙▲⊙▲⊙◤                                                                                 ◥⊙▲⊙▲⊙▲⊙▲⊙▲⊙◤

I get started with using my previous Wt template to perform ajax request. (the one I used to generate HOTP with Wt). I follow this link to read up some JQuery information. To allow Wt to perform JQuery use this->doJavaScript();
There are 2 method to use the above code:
1) Parse a string into ‘doJavaScript()’ std::string mystring
2) Parse a function from a ‘.js’ file with this->require("your.js") written during initialization/setup

Next is to figure out which JQuery request I need to configure to send to my PIC32 Server. Well definetly CORS is one of them, HOTP, BitStream and SHA1. Luckily to implement Ajax request is really straight forward and simple I should say. The basic idea to make sure everything works is that, for every CLIENT Ajax configuration made, the SERVER must be configured the same way to be able to reply the correct respond to CLIENT.

Getting started with CORS Protocol on Wt to PIC32

$.ajax({
method: “DELETE”,
url: “https://IPaddress”,
headers: {
Accept : “application/xml;”,
“Content-Type”: “application/xml;”,},});

Side notes: If header is set anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, you will trigger a preflight request. With ‘Content-Type: application/xml’ now my Wt will fire an OPTION request as preflight then follow by other CORS protocols.

Must read!!

1. I was pretty lucky because my PIC32 server state-machine was written correctly therefore only minor adjustment made to allow my PIC32 able to read the requests send from Wt. There is only one minor problem I faced which is: Chrome and Mozilla no longer support TRACE request from either sides (CLIENT or SERVER). However I found another substitute request for my TRACE which is call CUSTOM. CUSTOM request is allowed by Chrome and Mozilla which works similarly with DELETE and PUT request, so there is no issue in implementing/replacing TRACE to CUSTOM.
2. Since I am using TLS for my SERVER (https://), I must upload my self sign certificate that I used for my PIC32 to both Chrome and Mozilla to be able to allow the browser to send requests to PIC32. And yes, this step must be done, if not Chrome and Mozilla will not parse any requests to my SERVER regardless of any JQuery configuration done. Another alternative would be to add exception from browser however more testing needed to be done from me to give a confirmation.

After ensuring CORS protocol could be send using Wt and read by my PIC32 to reply the correct respond, I proceed with implementing HOTP to my CORS protocol.

Getting started on HOTP with JQuery using Wt

HOTP will be parse as a custom header to PIC32. First I make sure Wt can parse my generated HOTP from custom header to SERVER. Then make some minor changes to my SERVER code to be able to read the HOTP and Walahhh magic happen~ Both my CLIENT and SERVER are communicating with CORS and HOTP as smooth as cream. There are few reasons it works so smoothly; one of them would be, I did make sure the HOTP generated from Wt is correct, my StateMachine will prompt the correct request and output the correct respond. With these fundamental features working properly from the beginning other additional features or changes needed can be easily added.

Parsing Bitstream and SHA1 to PIC32 with Wt

To send data to SERVER with JQuery:

$.ajax({
data: “0372ab7d452f9c52ec9e9a02cd18ec1b26f0012f”});

With ‘data’ from JQuery, the above SHA1 or Bitstream value will be parse from the body of HTTP to my PIC32 SERVER. To be able to read it, I just use ‘strstr()’ from c string library to search for “\r\n\r\n”. Next I combine my last week work which is TRACE request (now change to CUSTOM request) will be able to pump all the bitstream into SHA1 calculator and compare with the SHA1 from Wt.

Basically all the major features of communication between Wt and PIC32 are done, only some minor error checking, alert messages to be implemented and testing needed. Looking forward to next week because I am going to venture into Hardware soon. Woots~