PETERZHANG

Hello there.

I'm a front-end developer passionate about cutting-edge technologies and impacting everyday lives. It's nice to meet you!

Securing data and communication with RSA across Android app and Python server


I took my Algorithms class in USC with Prof. Leonard Adleman. Unsurprisingly, one of the biggest topics that we focused on in that class was RSA encryption. “Generate a pair of keys – you can encrypt by taking this exponent and mod that, decrypt by taking that exponent and mod this.” It all sounded too simple.

A few semesters later, I find myself needing to use a public-key encryption scheme. I’m trying to implement Spotify support for the playlist app I’ve been working on, QCast, for which we need to ask the user to input their Spotify credentials. Since a Spotify account involves some really sensitive details, and we might want to store the credentials locally on device (so that we can offer to automatically login for user), we thought we’d be a little smarter than just having plaintext username and passwords around. Vinnie argues: “https is enough!”; I’d generally agree for communication (though a quick Google search seems to suggest otherwise), but definitely not for storage.

In fact, for that matter, not just any encryption – it has to be asymmetric so that even if the key to encrypt is public and known to everyone, the encrypted data cannot be decrypted.

So I thought I’d implement RSA, thinking it can’t be that hard… right? What, import RSA, RSA.encrypt(key, message)? Hah, so I naively thought. Turns out, there are different ways of generating the keys, different ways of encrypting and decrypting. For the cherry on top, Java and Python use different ways of naming and setting up things. As a result, even though the final solutions that we have isn’t too complicated, we wasted a ton of time researching for the right way to do things. I hope to save ourselves and other people the troubles for doing all the research again in the future with a short guide.

Goal

  • Generate a pair of RSA keys
  • Encrypt using the public key in Android with the javax.crypto package (though it can be easily adapted to any Java project).
  • Decrypt using the private key in Python with PyCrypto*.

* M2Crypto is the hip alternative, but is not supported by Google App Engine.

Generating Keys

To generate, we use openssl, a widely-used security library.

First, let’s generate a private key.

This command will do the trick, outputting the generated key to the file private_key.pem. 2048 is the length of the key generated; the length is actually very important – turns out, you cannot encrypt a string that is longer than the size of the key.

From this private key, we can generate a public key.

This command takes in the private key from the file private_key.pem, generates a public key (with the -pubout flag) using the format der, and writes it to the file public_key.der. We encode the public key in der format and not pem format, because Java likes the base64-decoded version of the key (that’s pretty much the only difference, anyway – a good StackOverflow answer here on the different key formats).

Python, on the other hand is much more robust and can support the pem encoding just fine.

In your Android app, create a folder named raw inside [modulename]/src/main/res/, and put the public key there. It’s okay if the public key is “leaked” (hence the name public) – the encrypted data cannot be decrypted with the public key. In your python app, I would create a folder called ‘resources’ in root and put the private key there.

Encrypting Messages in Java

(Special thanks to David for his help in this part)

Before we start encrypting, we first need to read from the public key file, and generate a usable PublicKey object.

(The comment above X509EncodedKeySpec ... highlights my frustration – it is rather hard to get a clear answer to the different formats and encodings of keys, and I had to settle with a lot of trial and error.)

So now that we have the key ready to be used, we can set up the “encryption engine” and feed the key to it.

This part seems more straight froward (except with the weird syntax that Cipher uses). One line, in particular, deserves a little more attention, though.

Cipher.getInstance("RSA") – There are actually multiple ways of using RSA, including different kind of “padding” – it works kind of like a salt in a hash. This StackExchange post really helped me understand this concept:

The operation at the core of RSA is a modular exponentiation: given input m, compute m^e modulo n. Although in general this is a one-way permutation of integers modulo n, it does not fulfill all the characteristics needed for generic asymmetric encryption:

  • If e is small and m is small, then m^e could be smaller than n, at which point the modular exponentiation is no longer modular, and can be reverted efficiently.
  • The operation is deterministic, which allows for exhaustive search on the message: the attacker encrypts possible messages until a match is found with the actual encrypted message.
  • The modular exponentiation is malleable: given the “encryption” of m1 and m2, a simple multiplication yields the encryption of m1m2. This is akin to homomorphic encryption, which can be a good property, or not, depending on the context.

For these reasons, the integer m which is subject to RSA must not be the data to encrypt alone, but should be the result of a transform which ensures that m is “not small”, contains some random bytes, and deters malleability.

So while getInstance("RSA") can compute the RSA encryption, the string parameter can actually be overloaded with different options.

  1. Encryption algorithm to use – in our case, RSA.
  2. “Transformation mode” – doesn’t seem to have an effect on RSA encryption, so we’ll just set that to NONE. (I’d love to be corrected)
  3. Padding standard. Some brief research tells me that the one should be used these days seems to be OAEP Padding, with some hash function (usually SHA or MD5, by default SHA1) and mask generation function (by default MGF1).

Therefore, you might want to replace that string parameter with "RSA/NONE/OAEPWithSHA1AndMGF1Padding". (Why they decide to have parameters to be this really baffles me.)

The base64-encoded string is then stored in the variable encrypted, ready to be sent to the server for decryption.

Decrypting Messages in Python

Over on the server-side, we need to do something similar. Namely, read from the key file, set it up with the correct padding configuration, and decrypt. Fortunately, the code to do this is a lot simpler on Python.

First, make sure your dependencies are set correctly. In app.yaml of your Google App Engine project, make sure you specify you want to use the pycrypto project that is included with Google App Engine: (or, (sudo) pip install pycrypto for other projects)

Setting up in Python is actually extremely easy. All the modules we need come from the Cipher package.

PKCS_OAEP.new actually takes in multiple parameters; but since we decided to use the default OAEP settings (SHA1 and MGF1), nothing needs to be set explicitly. However, if you do change it, you might find this reference guide useful. For example, to use with the Java configuration of "RSA/NONE/OAEPWithSHA-512AndMGF1Padding", you would want to change to PKCS1_OAEP.new(rsakey, SHA512).

Similarly, if you decide not to use OAEP Padding, then PKCS1_OAEP.new(rsakey) is completely unnecessary. Just use what RSA.importKey returns and that’ll do the trick.

Afterwards, we can decrypt very easily:

Ta da! The decrypted string is now in the decrypted variable.

Limitations

As mentioned above, the amount of data we can use with RSA depends on the length of the key that we chose. If we generated our private key with length 2048 bits, the message cannot be more than 256 bytes, minus padding size.

The most common solutions I’ve found for encrypting long strings is a hybrid solution, combining both a symmetric encryption scheme (like AES) and RSA:

  1. Generate symmetric key, K
  2. Encrypt data with K
  3. Encrypt K, which we can guarantee length for, with RSA using the public key
  4. Send encrypted data, and the encrypted key to server
  5. Server decrypts the encrypted key with RSA using the private key, getting original K
  6. Decrypt with AES using K

Conclusion

The motivation for writing was that there didn’t seem to be a simple guide for cryptography beginners who want to implement some security in their app without having to dive into jargons that are way too complicated. I hope this guide served that purpose.

Please help me correct anything incorrectly explained in the post – I’m no expert and would definitely love to learn more.

(We are taking QCast to iOS too, so there might just be a post with encryption in iOS soon. )

The new Peetahzee.com


I liked my old Peetahzee’s Blog quite a lot. It was my first major web design project, and it took quite a few iterations to get it looking right. It looked good, well, in 2008 standards at least. Just to give some context – border-radius wasn’t yet a thing back then.

I gave it a facelift in 2011 – call it v1.5 if you will – when I entered college and realized that portfolio websites matter to recruiters. Peetahzee.com was no longer just a personal blog anymore, but more so a professional representation of me as a developer. I put some CSS tricks on (oh how I loved inset box-shadow), got a new portfolio site going, and hoped that it would last for a few more years.

Much blue. So color. Very roundedcorners. Wow.

Much blue. So color. Very roundedcorners. Wow.

But of course, in this industry, hardly anything ever lasts for more than a couple of years. I soon got jealous of all my friends’ fancy personal sites and thought, hey, I can do better with my own site. I was very happy with myself when I redesigned my new resume – it’s clean, has a very “refreshing” look, and (I believe) helps people focus on the right things through graphics and typography. I wonder what it would look on a website.

Based on that, there are a couple of things I wanted to do differently:

  • Less blue. It’s still my favorite color, but it seems that when the entire page is blue, it is quite distracting
  • Dominant “featured image” – an image to sum up the contents of the post
  • Focus of the page is on the content. Sidebar is much less important
  • Some place for a one-liner about myself
  • Always-on nav bar
  • Responsive design
  • Some sort of scrolling magic

Ah, about the scrolling magic – I didn’t want to just be like everybody else who gets a full-screen-image-parallax-thingy-majingy on there and call it a day. I thought about what I want the visitor to see on the instant they first visit the page, and what they’d want to see after spending some time. One obvious example would be my face. It can really help the visitor identify that it’s my blog, but it can also get in the way of the contents of the blog afterwards.

The entire redesign took me about two weeks from mockup to final implementation, and I’m quite pleased with the results. As a bonus, under this new design, I feel like I can have more flexibility when designing individual pages in the future (for example, the portfolio page.) I have some plans for that and can’t wait to get started on that.

Any comments or suggestions? I would love some feedback!

Openness: what I enjoyed most in Google


(Just got back from Hong Kong, and extremely jetlagged. Why am I up at 4 in the morning…)

As I step back onto the school grounds in a blazing 90`F LA weather, I couldn’t help but to think back that awesome summer I’ve had. The 10-week internship at Google flew by like a blink. I’ve made some great friends, met some amazing people in the company, and walked away learning a lot of new things I wouldn’t even have heard about otherwise.

It’s also time now to think about internships again. Lately, I’ve been picking up on reading in blogposts, articles, and journals about work experience at different companies. I seem to have found a trend in all these posts: innovation. This word appears everywhere. Don’t get me wrong – it’s an amazing vision and mission to have, one that I often share and enjoy working for; but when everybody has it on their profile pages, what makes them different?

In a lot of ways Google’s innovations exceed far beyond what others can even imagine: grand technologies like Google Glass and self-driving cars, and tiny details like empowering blind users through improving accessibility in their apps. But these weren’t what made me fall in love with working there; no, what did was the openness in its culture and empowerment of their employees – it’s an innovation in the workplace.

How so? Take this for an example. As a mere intern, I had access to almost the entire codebase of Google from every single project. Compare that to what I heard from my host, who has worked in Microsoft as a PM intern without any code access – not even those in his own project, this is pretty darn cool. With access to a codebase this big, there is no lack of resources for learning how to use certain technologies. I cannot think of a better way of encouraging Googlers to go outside their safety zones and learn from others.

Every Friday, employees and interns enjoy a very special treat from Sergey and Larry themselves in a company-wide all-hands meeting called TGIF. They’d present about a product Google has been working on, and then take questions from the audience – any question. When I was interning, there were questions ranging from “How is Larry doing?” (with regards to his illness) to “Why did we buy Meebo?” And with that, you can surely expect somebody from the exec team is going to give you a detailed and thorough answer, as if presenting the entire exec meeting to you. What’s more awesome is that the mic is even open for interns, and a lot of us have surely taken advantage of this opportunity. This has created an environment of trust, one that ensures employees of the most honest feedback from management and room for creativity.

This is extremely hard for any business to pull off. The amount of effort it requires the leadership team to be this open is extraordinary. But the effort isn’t unnoticed, as it has built an extremely unique and impressive culture all around the company. Undoubtedly, this, is what I enjoyed most in my time at Google.

(Disclaimer: I’m only speaking about what I’ve seen and heard during my internship, and in no way do I represent any of the companies mentioned here.)

Engineer fun.


“Here’s my algorithm. I check the page three times in an interval, and if I still giggle after the third time, then I’ll buy that shirt.” Laura, one of the engineers on the AdWords Front End team, was describing how she makes decisions on whether to buy a shirt on shirt.woot.com at the dinner table. My first reaction: wow, how much nerdier can everyday actions get?

“Did you have that algorithm tested?” Laughter follows.

Each day just seems to be filled with surprises like this, reminding me that I’m not the only one nerding out. It’s hilarious and somehow, weird, in a really enjoyable kind of way.

And not just that, we all have the weirdest obsessions. Laura and Luisa, my host, are insanely addicted to Triple Town. They’d send me a gift every a couple hours or so, inevitably dragging me into the game. (I swear it’s not my fault.)

Jeremy, another engineer here, is obsessed with a board game called Set. Laura brought it up during a picnic off-site just last week. The objective of the game was to  find a set of 3 cards matching or completely dismatching a set of attributes – pattern, color, number of shapes and texture. Laura and Jeremy went crazy on it. While us interns were still trying to learn the game, slowly trying to pick up the pace of the others, they’d be able to call out sets only moments after new cards are drawn. Heck, Jeremy even wrote his own web app allowing players to play this game online – he was telling us about it while bragging out how he knows random facts like “there are on average 2.7 sets in any 12 cards.”

All this happened with a conversation about how we can use Cobalt-60 to clean off sausages so that we can grill them in space for hotdogs. And how we are going to answer the Homeland Security’s questions when they find out what we’re trying to do: “But… but… but… all I wanted to do is to clean my sausage!”

And all of them, of course, love Star Wars. When they found out that I, along with 3 other interns, have never seen any of the Star Wars movie, they almost fainted. I think they’re now planning a Star Wars night, fully utilizing Google’s giant screens everywhere. Oh that’s going to be fun.

Userstyles Experiment #1 – Amazon.com


So I was just browsing Amazon the other day looking for stuff to buy (I guess you can call this the guy version of window shopping), and found out that I got the infamous redesigned interface. About time!

As much as I appreciated the new design and valued it much higher than the old one, there was still something missing. And I think I figured out why: It was wide! Looking at YouTube, Facebook, Google+ or most other popular sites* – they seem to all be fixed-width. And as a result, it was too hard to focus on the content when everything was so spread out.

So I started taking out Stylish and Userstyles, and started modifying Amazon to one that I’d like. But it turned out to be quite for the non-unified structure across all pages. They all have a header and a footer (actually, where the footer is placed in terms of structure is different each page as well), but each page has a different structure. Some are made of tables, some are made of divs, some are surrounded by a <center>, and others are a bunch of really complicated, overlapping table cells.

My immediate reaction was to use javascript to wrap the whole page up to one single div, have that div centered, and done. At first I thought it was a great idea, as I could keep everything simple with almost guaranteed success across the whole site – since it didn’t matter how the page structure was designed. However, there were some conflicts with that and the sciprts that the page came with, like the departments dropdown menu, so I had to look for an alternative.

I then went through every alternative of pages (search page, product listing page, account center, and so on) and tried to find a solution that fit each one of them and combined them together. It was simply painful. And because the solutions were so idiosyncratic to these pages, not all the pages could be modified.

But hey, at least those that I modified look great!

I encourage you to try download and put it on sometime (It supports most modern browsers), and you’ll soon notice a difference in your shopping experience. Trust me.

*Excluding Picasa, but contents adjust themselves so that they fill the screen; Gmail or Google Calendar – the flexible width provides more space for more content.

A note to self: Lessons from the WWW App


A week ago, I created an web app designed to aid ICS students in choosing their WWW trips where their friends are going. Like the app I created a while ago with courses, this idea came up from the millions of “where are you guys going?” wall posts on Facebook – why not just create a central hub for people to see where people are (or in some cases, aren’t) going?

Development took a little bit over a full day and made me sleep at 5am – something that I would have definitely not done normally. Could have took much less time had I not played with the various Facebook APIs, jQuery effects and aesthetic elements, but you know, it was worth it. I mean, in the end I took this mini project as an experiment in itself, testing what works and what doesn’t, and improve on the later products.

And here is my report.

(more…)

Registering for ICS Tribal App


Because the ICS Tribal App is designed for ICS students only, there are several security measures taken to make sure that only ICS students/faculty join. We wouldn’t want to ask you for a personal email and stuff, so the best way for us to check is through Facebook’s built in network system. Which means, you’ll need to be in the International Christian School network to access to the App.

Click here to join in the App

There is a network setup on Facebook, but not very well known – only 81 people are on it. The rest are either in their previous school (I see a lot of AIS), Hong Kong, or are having trouble to join any networks. Follow this tutorial, and I’ll get you into the app shortly.

If you are not in the network, you’ll most likely see a message like this when you access to the app:

Some people might be able to resolve the issue through Network Settings in Facebook without any hassle, but others find it troublesome to change network. In that case, you’ll need to double-check the following settings:

Are you in any colleges/high schools currently?

  1. Click on “Profile” on top right corner
  2. Under “Education and Work”, click on “Edit”
  3. Remove your colleges records
  4. Update your highschool record to be “International Christian School (Kowloon City, Hong Kong)”, and set the year to be the year you’re graduating.  (For 09-10 school year, Seniors = 2010, Juniors = 2011, Sophomores = 2012, Freshmen = 2013)
  5. Save your settings

Check your Birthday

This is quite important, as somebody over 18 obviously can’t be in a high school network. If you don’t have it set, or set as something over 18 years old, you’ll need to contact Facebook to change it for you. Or, if you really are over 18 and are still in this school, you’ll need to contact Facebook as well.

Join the Network again

After the steps above are done, try to edit your network settings again. You should be able to see International Christian School in the Edit Network Settings screen.

If you don’t see it, please contact Peter Zhang at p@peetahzee.com.

The concept of the ICS Tribal App


I’ve realized the ICS Tribes App looks much more confusing than it is. I thought writing something about it explaining fully how the whole system is would be nice, so here it is 😉

When I designed the app, I spent a lot of time thinking about how I can make use of the already-awesome Facebook systems. That way, I don’t have to spend a lot of time on programming a nice interface myself, nor do I have to worry about the right security stuff – Facebook can take care them for me!

Showcase with Pages

After thinking a while, here’s what I decided: Facebook Pages! Each Tribe has its own Facebook Page, and that is where the tribes”showcase” their class. Through them, tribes can easily upload pictures and tell everybody about it through the fans system. Pages are where tribes basically showcase their work, and most likely where all the tribal points will be coming from (posting good pics, reflective stories, etc.)

While that is solved, another issue popped up: I need to somehow connect the pages together. And this is where the Page Tabs come in. With the “ICS” Tabs on each page, you can access the information about a tribe quickly, such as points and members, as well as links to other tribes too.

“Internal Communication” via App

In addition, there is also a separate part from the pages system, and it is the app itself. If you launch the app from Facebook menus, you’ll be able to see something like an announcement system. Although the whole system is still in progress, the part with advisory announcements is done. Advisories and Mr. Chan can easily setup advisory meeting times. And yes, that means no more posting “any advisory tomorrow” messages on Facebook. =)

Always Looking for Suggestions

So now, please do me a favor and start using the Facebook App! We’ll be running a few contests soon, but it’s never too late to start. =D

I’m always looking for suggestions. If you have ideas (be reasonable, please) that you think can help the ICS App Experience, please do tell me! Either by Facebook wall post, or commenting on this post.

Two Facebook Ideas I’m Planning to Work on…


After developing ICS Tribes, I find that it’s actually quite fun to make a Facebook App and share it with friends. It spread so fast it’s not even funny, which makes me wonder again at the awesomeness of Web 2.0 and Social Networks. I started thinking, how can I take advantage with it? I mean, from the way I vision it, there are a huge user base for Facebook already, and all I need is some really slight advertising, and the app will automatically grow rocket high.

But there is a problem as well. With that many apps already made on Facebook, I have to make mine really stand out and make the users really like it and find it useful. But how exactly do I do that?

Social Vocab

Let’s see… apparently people like apps to interact with their friends and stuff (look at Social Interview)… but I want to make something more than Social Interview; being a copy cat never works. I was studying Vocab for my SAT when I thought of that, and an idea immediately popped out – Social Vocab!

It’s still a very rough idea, but I think it definitely has potential. Basically, this app will allow the user to go through the friendlist and assign SAT vocabs on them. Let’s say, the app will pick a random person from the friend list, let’s say, Peter Zhang, and the user replies that Peter Zhang is scintillating (out of 5 vocabs optoins). During the process of assigning vocab, the user actually unnoticeably learned the word by associating the word with the object. Now, because of that, supposedly the user will think of Peter Zhang when they see the word “scintillating”, and remember its meaning as being “brilliant”.

Of course, there will be other tools to help the user memorize as well, such as flash cards, quizzes and maybe games; but the main point of the app really is about the paragraph above. The reason I think it will be successful is because, this app can easily spread by posting on other people’s walls (“You’ve been described as ‘scintillating!'”); more users will join, and eventually, I’ll be rich.

That’s So True!

Quite opposite to the idea above, this idea came from being annoyed by “Person A joined This Group and 7 million other groups” messages. I really hate it when people join these groups just because they think the name is true. By having a large group, group creators can now earn from putting ads in their group, and I simply think that’s not fair. Plus, you’re most likely going to be spammed for joining groups. Groups were not made to be used this way!

Therefore, in an attempt to bring back the clean Facebook without the joining group messages (yes, I do know I can filter it out), I came up with the idea for “That’s So True!” App. Basically, in this app, the user can find phrases where they think it’s true, and join it. That way, people can discover the trends of what people think safely. No spams; no duplicates; no unfair advantages for anybody else. Also, people are going to find the “truth” so much easier, too.

What do you think?

I don’t really have time to develop these ideas just yet, but I will. Someday. What do you think about these apps? Will you use it? Why or Why not?