Tag Archives: HTML5


How to generate keys with the Web Cryptography API

I have been playing around with the Web Cryptography API a lot lately.  My most recent post was about getRandomValues().  I wanted to take a moment to investigate two more methods: generateKey() and exportKey().  The generation of a good cryptographic key is fairly fundamental.  I wrote up a short demo app, to demonstrate how the two functions work.

The code outputs to the console, so make sure to have Firebug open when you run the app.  Also, keep in mind that the Web Cryptography API is not fully supported in every browser, so not all of the functions in this demo will work everywhere.  I added in a description box for the crypto algorithms, so you can see the details of each one.

Have any questions? Feel free to drop a comment, below.


Generating random numbers with the Web Cryptography API

The W3C has been working on a Web Cryptography API for a while, now.  The current version (11 December 2014) is their “Candidate Recommendation”.  As such, I would not necessarily consider it fully ready for primetime but that does not mean that we can not play around with it a bit.  I figured that today, we should take a check out getRandomValues().

According to MDN, “To guarantee enough performance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy.”  You do not want to use this method to generate encryption keys (especially since generateKey() is available within the same API).  I think that this method is more foundational than anything.  It is just meant to be part of the plumbing.

Like usual, you can find the code behind my example here or check out the final result here.

Have some thoughts? Drop a comment below.


How to use FileReader() to generate data URLs

These days, the lines between the web and the local environment can be very blurry.  There is a web API called FileReader() that nicely adds to that blurriness.  It lets you asynchronously read the contents of a file on the user’s computer.  I am going to show you one way of using it.



So, what am I doing, here?  There is an input tag that is set up to accept images.  It triggers openFile() onChange.  The openFile() function looks at the first (and only) file supplied and reads it as a data URL.  The function then changes the innerHTML of the “TheImageContents” div to contain an img tag that uses the data URL as the source.

The code behind this demo is available on jsFiddle and Github Gist or you could just test the final result on jsFiddle.


An unofficial Security Now episode explorer

Well, I finished another PhoneGap Build app.  This is another “Joe scratches his own itch” app.  It’s an app that shows the entire Security Now back catalog and lets you browse through the various topics.

This is the final app in my 30 day challenge, so my pace of new development is going to slow a little.  I am planning on iterating each of the 4 apps over the next month, though.


Try the app in your browser

PhoneGap Build Page

GitHub Page

Play Store Page


Security Now Explorer Screenshot #1 Security Now Explorer Screenshot #2 Security Now Explorer Screenshot #3


How do you sign a PhoneGap app?

This is a quick thing.  When you build an app in PhoneGap Build, it asks for a keystore file.  So, how do you get one?  Here is the command for on the mac.

keytool -genkey -v -keystore [Name for the file].keystore -alias [Name for the app] -keyalg RSA -keysize 2048 -validity 10000

Remember to replace [Name for the file] and [Name for the app].  After that, just follow the prompts.

Happy developing!

PhoneGap Build Keystore File


How to use localStorage to remember form values

Since finishing my last post, I’ve been wanting to work on a way of implementing the concepts.  Let’s say you have a long form (like a job application) or a form you would be filling out a lot (like shipping/billing information).  You could use ajax to store the information server-side but let’s say you need or want to store it client-side.

Using jQuery, we can loop through all of the text boxes on the page, without really knowing how many elements are there.



Now that we know what’s there, let’s store the values in an array.



Now that the values are packaged up in an array, let’s build setters and getters around this.



You’ll notice that you can essentially just drop this javascript into a page with forms and it will start collecting values.  You need to be careful though.  What if your user is on a shared computer?  It will blindly leave the values for the next visit to the site.  My suggestion would be that you use a “remember me” checkbox.  That would give the user a little more control.  Alternately, you could replace localStorage with sessionStorage.  That would kill the stored values once they close the browser.


How to store JavaScript values persistently, locally

So, you want to store data on the client side?  There is a method called localStorage.  Let’s do a simple example.



This very simple example simply writes the “coffee” values from the local variable, to localStorage, and back to another local variable but it shows the potential of localstorage. Let us take a look at a slightly more complicated example.



This example gets you a little closer to an actually useful implementation of the concepts.  It takes the values you enter into the text box and adds it to localstorage.  It also populates the unordered list with the contents of localstorage.  So, how can we take it a step further?



Functionally, this example is identical to the one above.  It does, though move the functions into a namespace.  How does this help?  Well, let’s say that we want to keep a list of both Sally’s favorite coffees and a list of Bob’s favorite coffees?  AddCoffee() is a little generic.  There is a good chance of a collision in function names.  This helps to prevent that.

Now that you understand localStorage, you might want to check out sessionStorage.  It’s just like localStorage except it only lasts as long as the browser window (or tab) is open.  Where localStorage might be better for storing user preferences, sessionStorage might be better for storing a shopping cart.  Please keep in mind that neither localStorage nor sessionStorage work with IE7 and older.  If you need to support IE7, you might need to look towards using cookies for your application.