Skip to main content

Mobomo webinars-now on demand! | learn more.

Last weekend I had the opportunity to speak at RubyConf 2012 about a topic that is very exciting to me: Cross-Origin Resource Sharing (CORS). CORS allows for true cross-domain AJAX in the browser which, while simple in concept, is powerful in potential. The fine people at Confreaks recorded the session and you can watch it here:

There are two extremely interesting new things you can do with CORS (and probably many more yet to be discovered):

  1. SOA in the Browser. With CORS you can implement lightweight HTTP services that are called and coordinated through the browser instead of on the server. This gives you the modularity to scale pieces independently without the complexity of weaving together a server-side service fabric.
  2. Serverless Mashups. When more APIs implement CORS (like GitHub and Amazon S3 currently do) it will be possible to construct mashups with zero server-side code that can be hosted statically and distributed via CDN.

To find out more about how to implement CORS in your Ruby web apps and my thoughts about where this all is going, check out the video.

Categories
Author

Hello Manhattan! We’re thrilled to be taking part as an exhibitor at the NYTimes Open Source Science Fair this Thursday, Nov 15th.

The event will bring together over 150 talented developers poring over new, interesting open source projects and showing off their own work. In true charming, classic science fair style, each contributor will get a couple of minutes to talk about their projects and then man their booths to go more in-depth with attendees.

Intridea is proud to be one of ten lucky exhibitors at the event. Our very own Ted O'Meara will be taking the stage to showcase his smart-as-a-whip Green Onion. We’ll also be discussing other open source projects by fellow Intrideans, such as OmniAuth and Grape.

We hear there’ll be snazzy ribbons and prizes going around, but who’s competing? :-)

If you’re attending the event this Thursday, please stop by and say hello - we’d love to meet you.

Be sure to follow our tweetstream for updates and tune in to the blog for a recap.

Nerd-a-thon, here we come!

Categories
Author

Nov 8th brings upon us World Usability Day, now eight years in the running. This year’s major theme is the Usability of Financial Systems, with the event growing larger every year from record participation in international conferences and increasing media coverage.

First of all, let’s all take a moment to say “Go, world!” for anointing a full day to usability. This gives us design nerds yet another excuse to wax poetic about our favorite buzzy terms and hipster-geek out together in giant conference rooms at swanky hotels over our Macs and steaming cups of coffee (locally-sourced beans, of course).

Cheekiness apart, we can agree that this is important. Never before has such attention been paid, by design folks and “normals” alike, to the collision of form, function, visual design and sensory experience in one gigantic meta-ideal we call the “usable”. Apple’s stock price knows no bounds, Steve Jobs is a demi-god, and people somehow keep shopping at IKEA despite swearing they’ll never go back.

The fact is it’s not just about aesthetics anymore (it never was). It’s about “How fast does it load?” and “How smooth are its curves?” It’s about “How heavy is it on my shoulder?” and “Can I find the menu quickly enough?”. It’s about “Can I carry it on the subway?” and “Does this make me feel stupid?”. And even, “Is this inexpensive-yet-stylish enough to be worth my time crouched on the floor hammering together random pieces of wood with the lofty goal of furnishing my apartment?” (clearly, IKEA and I have unresolved issues).

It’s also about creating habits, making users want more, building in “social hooks”, and making it “go viral”. It’s about developing reward systems, demanding user commitment, toying with psychology, and considering disabilities. It’s about touch and smell, hardware and software, bits and bytes, wood and steel, and the air in between.

Usability, in other words, is like a giant dinosaur’s mouth that seems it will swallow you whole--except, when you stop to realize, that at the end of the day it’s all about bringing a smile to the user’s face and having them come back for more.

Simple, when you look at it that way, but certainly not easy. And this brings us to this year’s theme - The Usability of Financial Systems.

I would say it was somewhere around mid-2007 that people stood up and started to take notice about the importance of usability in finance. That’s when Mint.com exploded on the scene, with a drop-dead gorgeous interface showcasing slick, colorful dashboards, and “No way, really?” functionality bringing together personal credit cards, debit cards, bank accounts, student loans, mortgages, and more, into one so-easy-your-grandma-would-get-it, eat-it-like-it’s-cake online software package.

In my view, that’s really when things changed, and they’ve never been the same. Mint has spawned an entire industry of personal finance me-too software products including CakeHealth for managing health insurance and Simple.com as a close competitor. Let’s not forget Mint’s influence on the payments space as well, what with Square, Dwolla, and WePay boasting beauty, simplicity, and powerful functionality all rolled into one.

But things have come a long way since 2007, and usability isn’t a luxury any more--it’s just expected. Finally, it seems, Big Finance is catching on too. Intridea has been proud to develop interfaces for giants like Citi, Bank of America, JPMorgan Chase, Agilysys’ point-of-sale systems. We’re just glad some folks are stepping up to the plate, and that we get to be part of the revolution.

On a separate note, the reason I love this year’s theme so much is because it invites discussion on usability in an area where people least expect it, an area that’s still wide open for disruption. Let’s face it--people expect a designer scarf to be gorgeous, rich in color, featuring complex textures, and soft to the touch. But a bank’s interface? Not so much. Until it is. And you see it. And it all comes together. And everything changes.

This year, it’s incumbent upon everyone--not just the design industry--but Big Finance too, to take the usability of financial products seriously and do something about it. It’s only fair--you shouldn’t be allowed to experience the joy of a BMW test drive, the ripping open of a new iPad package, or the other-worldliness of Disneyland, if what you put out in the world yourself is utter and complete crap. Quid pro quo, I say, quid pro quo. Karma. Do unto others. What goes around comes around. All that jazz.

So there, I said it. Bring it on, World Usability Day. Bring it on, Big Finance. Show me what you’ve got.

Now if you’ll excuse me, I need to get back to my steaming cup of organic Guatemalan coffee.

Categories
Author

At Intridea, we cherish growth and exploration. Sometimes that means growing into a leadership position here at Intridea, but sometimes growth means leaving to found your own startup or join one of our peers.

We’ve got a stellar network of Alumni, and today we kick off a series of interviews with some of the best. What are they up to now? What did they learn at Intridea? And how can we get better?

Dingding Ye spent three years working on some of our biggest projects including Socialspring, our enterprise real-time collaboration platform.

It came as no surprise when Dingding set out on his own to build Pragmatic.ly, a clean, well-built and easy to use project management tool for developers. In this exclusive interview, Dingding shares his tips for creating web-based products with a small team.

Marc: Tell me about Pragmatic.ly and what inspired you to build a project management tool.

Dingding: Pragmatic.ly is a fast and easy to use project management tool featuring real time collaboration. It’s a project management tool built for developers with love.

My inspiration for Pragmatic.ly came from working on projects like Socialspring. Though the coding itself was always enjoyable, I found it difficult to adapt to using the various existing project management tools. Many of them felt as though they were built for project managers and not necessarily developers. On small, agile teams, developers end up using project management tools extensively and I wanted to build the perfect solution for developers.

Building a project management tool was a small idea and I knew it would be a tough market to penetrate, as there are many many teams out there trying to build something similar. But focusing on creating a tool for small teams of developers where code shipping is the most important priority allowed me to narrow in on a more specific niche. Ultimately, I set out to create a tool that gets out of the developer’s way and allows him/her to be more productive and see faster progress.

Marc: Stepping out on your own can be daunting. How did you decide you were ready to make that leap?

Dingding: It was definitely a hard decision. I enjoyed my three years at Intridea. I had great team members and loved the cool engineering culture. But I was ready to take the challenge of creating my own product and move on to the next venture.

Marc: How do you manage the stress of launching a new startup/product - from maintenance and support, development, design, marketing, and more. Do you have a lot of sleepless nights or have you been able to achieve a good balance?

Dingding: It’s a totally different experience - much different than what I thought before the start. At Intridea I was only responsible for project management and architect because Intridea did the other things really well. But as a startup co-founder, I’m responsible for everything. It's not an easy job. Like you mentioned I have a lot of stress. But when our users thank us for the tools we build it makes me very proud and energizes me to do more.

Also, I receive a lot of help from friends and family; they share their thoughts and expertise with me and it really helps alot. So I want to say thanks to my team members and friends, specifically to Pradeep Elankumaran who always gives me great advice and to Renae Bair who gives us a lot of help on blog writing. My family has been incredibly supportive of my venture as well, giving me the strength to follow through with my goals.

Marc: In what ways did the work you performed at Intridea help prepare you for this venture?

Dingding: Most importantly it taught me “How to work the right way”. Thanks to Dave Naffis and other teammates over the years, I learned so much about how to run a team. They gave me 100% flexibility on how to manage the development team and how to do the work. Intrideans are all so cool and it’s joyful to work at a place where you can learn from others every day. I’m proud that I have been an Intridean and that my other two co-founders are also former Intrideans. We have worked together for more than 2 years and know what we can achieve together.

Marc: Now that Pragmatic.ly is out of private beta and has been launched, what are your next steps?

Dingding: It’s a MVP (Minimum Viable Product) and we’re working our hardest adding more value to Pragmatic.ly to make it awesome. Only if you have an awesome product will the users pay for it. Meanwhile, we'll work on customer development as much as we can. I think our working methodology will be a benefit to many teams and we want to spread that to as many people as possible. We care for our users very much. We want Pragmatic.ly to be able to help teams build their products better. We’re ready for the challenge.

Marc: What is it like running a business (as a developer) as opposed to just doing development on a project for someone else? Do have any tips for developers who might be interested in starting their own businesses and launching their own products?

Dingding: You should always keep doing good work, no matter whether you’re running a business or just doing development for others. But running a business will bring you lots more stress and sometimes things just don’t work out as you expect. Don’t be upset, keep iterating, stay focused. Developers normally are not good marketers. But don’t be intimidated by that, just keep learning, keep practising. Developers are smart people and if you are driven by a goal you can learn all the necessary skills to carry out your vision. Believe that everyday is a new day and you can do better.

We’re excited for Dingding and the Pragmatic.ly team on their new venture. We encourage you to [check out their product](http://pragmatic.ly) and share your feedback with them! We’ll be back in November with an in-depth interview with another Intridea alum. In the meantime if you want to work with a group of insanely talented developers and designers, [we’re hiring - apply today](http://intridea.com/careers)!

“The growth and development of people is the highest calling of leadership.”
~Harvey S. Firestone

Categories
Author

Given this is my first European conference, it's challenging not to be overwhelmed by the rush brought on by being in an incredibly beautiful city like Freiburg. Cobblestone streets, medieval architecture, Schnitzel, Spaetzle, copious amounts beer and rich regional food make this tiny town easy to love and grow attached to.

As Oliver Reichenstein put it in his talk, "Being in a country that's completely foreign to you forces one to simplify the environment into abstract shapes and colors, making it easier to understand." To an extent, this simplification allows us to focus more on the experience, as the noise of understanding is relatively low. It's the experience that we take with us, not the words, the schwag, the memories— it's the physical imprint on our minds, the binding of an event to tissue. The very same that drives users to use Facebook, Twitter, Instagram and other dopamine-focused apps that rule our lives. So that's what I hope to describe to you, my experience at #smashingconf, the things that triggered my dopamine gate, those moments and ideas presented by some of the worlds best web leaders.

So let's cut to the chase; what was the most memorable event that attached itself to my brain? It's difficult to say, perhaps it was Brad Frost's talk on mobile web and his dropping a pretzel on the floor and eating it again to illustrate the 5 second rule and how it relates to download times. Or Lea Verou's live demo of CSS techniques that would put even the most experienced presenter to shame. Maybe Paul Boag's animated, inspiring, and self-reflective manifesto on client focused vs. user focused, web design and the importance of including clients in the process. Wait, it had to be Josh Brewer's fantastic presentation on his new jQuery plugin that auto-calculates the perfect line-length or measure. Nope, nope, I got it, it was Oliver Reichenstein's talk on the state of the web and the inspirational quotes I was able to relate to.

Damn, it's really hard to say. Come to think of it, maybe those small bits that I described above are it so rather than trying to recap the whole event, let's focus on a few of the things I can recall without looking through my notes.

Brad Frost, you my friend are the winner. Probably, no definitely, the youngest presenter in the group, Brad showed what he's made of by giving a kick-ass presentation on moving beyond media queries.

Principles of Adaptive Design

While he covered many important things, such as core necessities and some techniques, the thing that stuck was probably the simplest—a good mobile experience is about performance. Performance is not the size of the logo, the number of nav elements, your mobile first approach—it's making the mobile experience perform in context of mobile web — fast-as-hell. As mentioned earlier, Brad illustrated the average download time and how painful it is by dropping the pretzel he was eating and counting to 5. Think about that, one-one-thousand, two-one-thousand, three-one-thousand, four…you get the drift—it's a really long time. No user, especially those still stuck on 3G or even Edge should have to wait that long to see your logo, nav, or whatever else your focus group deems critical. So, two things to bear in mind, both of which are quotes by Brad, the next time you approach a project—

  • You can't mock up performance in photoshop.
  • Nav is like a good friend, there when you need them but cool enough to give you space.

As Jay-Z says "On To The Next One"—Lea Verou. First I'd like to say thanks to Lea for helping me get a lot more retweets than I usually do:

"My takeaway from @LeaVerou's talk = She's a badass and more girls should code. Make it happen ladies! #smashingconf"

Lea showing everyone what's up

Seriously, wow. That woman know's what's up. While I don't necessarily remember all the cool tricks she showed, I do remember coming away saying to myself—"Man, why don't more ladies code?!? That was awesome!" To any woman out there looking to make a dent in the tech community, follow @LeaVerou—she's a smart, talented dev, and will definitely put any experienced speaker to shame when it comes to live demos. In fact, I don't think I've ever seen someone give such a good live demo of code. Probably because it's a lil' geeky, not gonna lie, but yeah still pretty badass. I also came away feeling inspired and eager to pop open sublime text and finish this css gradient thing I've been working on—watch this space.

One thing I didn't expect was a manifesto—Paul Boag's talk on making our jobs more enjoyable by changing our outlook on clients and focusing on client focused design vs. user focused. Now I know what you're thinking, we all said the exact same thing—GTFO. But he made some great points about what we as designers/developers bring to the table when we work with clients and how we're happy to take their money but more often than not we'll write off their suggestions as being crap. In turn, we create scenarios where things are unnecessarily difficult for ourselves.

I didn't get to take a picture of Paul so here's some whoopee cushions.

Clients matter, more importantly, a client's input matters and more often than not, they may have a good idea or two, or three. Don't fret, he agreed that clients can sometimes be wrong, but so can we and rather than simply nodding and saying "uh-huh, sure thing client, maybe next after the MVP" maybe we should actually listen to them once in a while. Get them involved, take their input seriously, play ball with them and in turn they'll play back. In the end, you may find that they're not only a repeat client but that the product is better than expected. I know I've definitely suffered from designer-knows-best, as some of my clients will agree, so moving forward I intend to be a little more humble.

I'm going to pause for now—this is getting a little long and it's a good excuse to post again soon. I'll continue shortly and cover my imprints on Oliver Reichenstein, Stephen Hay, Josh Brewer, Jonathan Snook and the awesome guys I met at this Smashing conference

Categories
Author

This weekend we had Intrideans at four different events we sponsored from DC to Germany, talking about user experience, design, Ruby on Rails, and tablets. Here's a quick rundown of our experience at the events.

MoDevTablet

The first event kicked off early Friday morning. We partnered with GoMoDev to support their MoDevTablet event, and Jurgen, our Managing Director of UX, Christine Nakatani, our Director of Business Development, and Maggie, one of our superbly talented Project Managers spent the day talking with tablet developers and designers.

Jurgen and Maggie delivered a presentation to the MoDevTablet crowd later in the day on "Tablet as a Utility".

Using case studies from our work with Mitsubishi Electric, Agilysys, and the National Fish and Wildlife Foundation, they were able to speak to the tablet's evolution into a tool for business. Now that businesses are using tablets as kiosks to speak to customers, sales tools to encourage customer purchases, and portable ordering devices for servers in hospitality it has become ever more important that designers pay attention to the user experience.

They iterate that as designers we have to look not only at what the client wants, but what the user-base needs, and how we can create apps that get out of the way and allow the user to accomplish business in an unobtrusive and helpful way. You'll find slides from their presentation on our community page and some photos of the event on our Flickr page.

MobileUXCamp DC

Elena Washington and Jurgen woke up bright and early Saturday morning and headed to the Goethe-Institut for MobileUXCamp.

We sponsor this event annually to help build a more innovative, forward-thinking community of developers and designers by giving mobile enthusiasts a forum for sharing ideas and knowledge. We always enjoy the presentations at this event and this year was no exception.

RailsGirlsDC

While Jurgen and Maggie were wowing the MoDevTablet crowd, Renae was flying from Portland, Maine to DC for the RailsGirlsDC event, which Intridea was sponsoring. We kicked off the event Friday night at the Living Social offices with an "installation party", where delicious and delicate cupcakes were provided, along with beer, wine and a nice spread of appetizers. We ended the party with a "#FridayHug".

Renae spent Saturday in the same office learning the basics of Ruby on Rails alongside 48 other girls. The event, organized by Liz Steininger, was the first of its kind in DC; however, RailsGirls events have been happening all over the world since the first one in Helsinki in 2010 attracted over 100 girls. RailsGirls aims to get more women interested in (and involved in) tech by offering a free, full-day course on Rails, exemplifying how easy it is to get applications up and running.

The attendees got their "Ideas" application off the ground, and for those who were more experienced spent the day adding more complex features to our apps. Renae added a commenting feature, the ability to upload additional pictures for individual ideas, and started adding user authentication. Coding was broken up into reasonable chunks of times, buffered by a fantastic round of lightning talks on everything from REST to SASS to TDD.

The most moving talk was from Maria Gutierrez, a software engineer at Living Social who told us how her love of software drove her to become an engineer. Explaining that software is involved in almost aspect of our lives, she stressed how important it is that more women are more involved in the creation of that software.

Each sponsor for RailsGirlsDC was asked to write a note to be read aloud to the class about why there were supporting the event. Renae felt really proud when Intridea's sponsor message received accolades and cheers from the crowd.

The tech community is one of the most vibrant, avant-garde ecosystems in today's world. And while women play vital roles in tech, we count far too few women among Rails developers. No community can call itself a success without fair representation and participation from the smartest minds across all genders, races, and cultural backgrounds.

That's why Intridea stands with you today in support of women in tech. We know the joy of writing your first line of code. We know the pride in seeing passing unit tests. We know the rush (and sometimes *terror*) one feels when pushing changes to production.

We're working to usher in a new generation of programmers in which men aren't the only dreamers and builders of our online future. Everyone, regardless of gender should have the opportunity to be part of the truly exciting and challenging world of software development.

Women, code on.

Smashing Conf

Chris Tate, our Director of UI and Ted O'Meara, our Director of UX touched down in Germany this weekend for Smashing Magazine's first conference, Smashing Conf.

The event kicked off this morning and brings together web designers and developers for three days of intense workshops and engaging presentations from industry experts around the world.

Chris and Ted are talking strategy with other designers and sending us updates of all the awesome things happening throughout the day. We'll be adding photos from the event to Flickr page and the guys will be sharing some of what they're learning on our blog after the event, so check back here this week for more updates.

If you were at these events or want to know more about the events, leave us a comment below. If you're interested in talking to us about your mobile or web strategy and would like to leverage our expertise in UX/UI design or Rails development, contact us today.

Categories
Author

Mobomo is home to a Stripe CTF 2.0 security challenge winner.

Stripe's second Capture the Flag ended nearly two weeks ago. If you haven't heard of it, the CTF is a security challenge in which contestants progress by analyzing (web-based, in this iteration) systems and exploiting vulnerabilities to gain access to a secret token which serves as the password to the next level.

The levels in 2.0 tested a practical understanding of at least:

  • SQL injection
  • Code/command injection
  • XSS/CSRF attacks
  • Cryptographic weaknesses
  • Side-channel attacks

I had the pleasure and privilege of completing the challenge. It was a
really great exercise in real-world web application security.

The Challenge

The source of each challenge is available online now, so you can review each level in detail if you're curious.

Each contestant had their own isolated instance of each level, and corresponding users and directories in the Linux virtual machines hosting the challenge.

Several of the challenges involved exploiting the full range of the underlying OS, user accounts, background services, and internal network of the CTF servers.

Level 0

Level 0 was basically a low bar to see if you have any place at all in the contest.

A simple web form serves up "secrets" to authorized users. Despite the use of a parameterized query, which avoids the most common form of SQL injection (unescaped quotes), this code is still vulnerable:

var query = 'SELECT * FROM secrets WHERE key LIKE ? || ".%"'; db.all(query, namespace, function(err, secrets) { if (err) throw err; renderPage(res, {namespace: namespace, secrets: secrets}); }); 

Can you spot it? By passing a wildcard (%)" to the server, it goes straight into the LIKE condition, returning all of the records in the table.

The Takeaway

Don't just count on parameterized SQL queries and proper quote escaping. You must also sanitize user data in a SQL LIKE condition.

Basically, do not trust user data.

Level 1

The code for level 1 uses a dangerous PHP function which is used as a shortcut for extracting each HTTP parameter. This is similar to Rails' "mass assignment" problem, except that it allows for an attacker to overwrite variables in the running program!

By simply sending a filename parameter in a request, the previously-assigned value of $filename is overwritten when extract is called.

An attacker can then read any file on the system readable by the PHP process, most obviously the secret combination or password file.

The Takeaway

Do not pass user data (i.e. PHP's $_GET, or Rails' params) to any routine that modifies the program's executing environment.

Basically, do not trust user data.

Level 2

Another level, another bad PHP script: level 2 demonstrates an indirect vulnerability that is very similar to level 1.

Instead of relying on any particular vulnerability in the execution of the script itself, the weakness lies in trusting uploaded content. For whatever reason, the code grants executable privileges to uploaded files. This opens the system up to command injection attacks.

The simple solution here is to upload a PHP file that prints the password:

<?PHP echo file_get_contents("../password.txt"); ?> 

You can do lots of interesting things when you can execute any PHP script you want, like running system commands (ls, etc.), and this proves to be key in several later levels.

The Takeaway

You must be careful to only grant the minimum permissions absolutely necessary to user content in the filesystem.

Basically, do not trust user data.

Level 3

Finally, a classic unescaped SQL injection! I was surprised that it took this long to make an appearance.

The program in level 3 makes the mistake of not escaping quotes in parameters to a SQL query. If the code were to do the password hash comparison in SQL, then we could simply pass:

' OR '1' = '1 

And we would get back a user record.

However, since the hash comparison is done after the fact, we need to return an actual valid hash and salt for the user we are trying to impersonate.

The trick here is to tack a row onto the result set. Since we're already in a WHERE clause, the obvious choice is to add a UNION to the query.

password = foo username = ' UNION SELECT '1', 'c3ab8ff13720e8ad9047dd39466b3c8974e592c2fa383d4a3960714caef0c4f2', 'bar' -- 

The hash here is simply obtained by firing up a Python REPL:

$ python >>> import hashlib >>> hashlib.sha256("foobar").hexdigest() 'c3ab8ff13720e8ad9047dd39466b3c8974e592c2fa383d4a3960714caef0c4f2' 

The user ID for the user with the level 4 password is randomly shuffled when the system is initialized, so it must be ascertained through trial and error.

The Takeaway

Always, always, always escape parameters to your database queries. Many data access libraries do this for you through parameterized queries.

All ad-hoc SQL queries in the applications we develop are parameterized through data access libraries.

Basically, do not trust user data.

Level 4

Now things get interesting.

This level actually has another (automated) user sitting out there, logging in and using the web app, whom is the real target of our attack.

All we need to do is get karma_fountain to send us some karma, and his password will sent along with it (by design... this is a strange web app).

The system allows you to register any number of user accounts, and while usernames must match /^w+$/, there are no restrictions whatsoever on passwords.

Couple that with the fact that passwords are displayed, completely as-is, when sending karma, and we have a quick route to injecting arbitrary JavaScript into the page. This is a basic Cross-Site Scripting, or XSS attack.

All we have to do here is sign up with a password that contains a malicious JavaScript payload, and send a message to our friend karma_fountain. The next time he loads the page, he will see our "password" and his browser will do the work for us.

A suitably devious password for a user attacker might be:

<script>$("input[@name='to']").val("attacker"); $("input[@name='amount']").val("9001"); $("form").submit();</script> 

After logging in and sending a little friendly karma to karma_fountain, the only thing left to do is wait for our karma to come pouring in, along with the password.

The Takeaway

User data is often displayed in web apps. This is unavoidable. And many fields only make sense as completely arbitrary text. The only thing to do is to be sure to correctly escape it so that it cannot be interpreted as a script by a viewer's browser.

We make use of libraries that escape output by default, so that outputting raw text is an extra step that must be done deliberately and only with a valid reason.

In case you haven't noticed a pattern yet, this basically boils down to: do not trust user data.

Level 5

The system in level 5 introduces an authentication scheme that uses an "auth pingback" URL to call an arbitrary endpoint inside the CTF network to authenticate a user.

The authenticating server calls a user-supplied pingback URL to validate a user, looking for a string matching the pattern
/[^w]AUTHENTICATED[^w]*$/.

The obvious vector for this attack was to use the level 2 server to host a malicious PHP script that authenticates.

However, the page only reveals the level 6 password when you are authenticated on a "level05" server. Fortunately the authentication script echoes the pingback response regardless of source.

This means we can use the level05 server itself as the pingback, with a nested authorization request to the level02 server tucked away inside.

The Takeaway

Stick with tried-and-true authentication schemes, and don't get clever. If you feel you need this kind of feature, go with OAuth 1.0.

Although, any networked system is only as secure as the systems it relies on, and in this case the authentication server trusted a compromised server inside its own network.

Level 6

The solution to level 6 was basically an escalated version of the attack in level 4. HTML tags are not properly escaped when user data is printed out as JSON in the page, and so by posting a malicious message we can jump out of the JSON and into our own <script> tag and get to work.

We can post message for other users to see, so when they load the page they execute our malicious script. We want to construct a script that will cause any user who loads the page to post their own password. We can view the logged-in user's password on their profile page.

Our payload script is just going to leverage jQuery to request the profile page, parse out the user's password, and post it as a message using the message posting API.

The payload wrapper is essentially:

</script><script> ... </script> // 

The only tricky part is that quotes are not allowed in messages, so it's necessary to encode our script without using any literal strings. Obviously some strings are necessary to do anything interesting with the victim's session. The JavaScript function fromCharCode() can take a sequence of integers and return a string, though, so you can turn any code into this form easily, and then pass it to eval().

The Takeaway

As always, sanitize your output to prevent JavaScript injections. Do I really have to say "don't trust user data" again?

Level 7

The underlying vulerability in level 7 was new to me, and after much Googling, it became apparent that I was looking for a hash length extension attack. I won't go too much into this, because the link explains it better than I can.

In a nutshell:

If you know a mesage and the result of:

H(secret + message) 

... then you can calculate:

H'(bad_message) 

... where H' is a hand-tweaked hash function, such that the result
is equal to:

H(secret + message + padding + bad_message) 

This works because hash functions are state machines that operate in blocks, and the digest of a message is really just the final value of the registers in the state machine for the last block calculated.

This digest gives you a starting point for extending the message and calculating a valid hash without knowing the secret.

The Takeaway

DO NOT, under any circumstances, unless you are truly an expert, try to roll your own cryptography. You will likely get it wrong, perhaps in subtle and hard-to-understand ways.

We rely on open, tested, trusted cryptography here, and fight the temptation to throw home-made cryptography at a problem.

Level 8

This was by far the most challenging level, because of the rather oblique nature of the attack.

The target in level 8 is a password validation system, consisting of one master server and a chain of "chunk" nodes. No single node knows the entire password. The master server takes password validation requests, breaks the supplied password into chunks of 3 characters (trigrams) and sends the first chunk to the first chunk node. If the first chunk is valid, then it continues through the other nodes in the same fashion.

If any chunk fails, a user-supplied "web hook" URL is called with a simple success/failure message. Nothing in the content of this response is useful for anything more than a simple brute force attack.

While brute force is an option, it would require about 1012/2 attempts, and there is likely not enough time in the world for that when the server can only handle a few per second.

However, by analyzing other attributes of the response, we can actual glean enough information to start narrowing things down.

Specifically, the callback URL receives a connection from an auto-generated port. And, since the master server only connects to a subsequent chunk server on success, the typical difference in port numbers is larger when more chunks are correct.

To begin solving this problem, the level 2 server (allowing arbitrary PHP files to be posted) had to be exploited to allow me to run a custom server to act as the web hook. By uploading a PHP script which copied my SSH public key to the correct location, I could then connect to the level 2 server and run any code I wanted.

I came up with several "solutions" that worked on a local copy of the system but failed in the real world, when the algorithm ran up against the "jitter" introduced by all of the other contestants hitting the live servers.

Finally, after clearing my head and stepping through the logic, slowly, again, a solution emerged. It was not entirely natural to come up with, because programming tasks rarely depend on "fuzzy" data such as this, where you can only guess at first and then later eliminate false positives.

The key was to start testing values (001, 002, 003, etc.) for a single chunk, "push" it (save it and start testing the next chunk) when the port difference jumped by 1, and "pop" it (throw the saved value away and start counting where you left off) if the port difference dipped down (indicating a false positive). This cut the runtime to a mere 14 minutes for my final attempt.

The Takeaway

Nothing is secure. Everything is vulnerable. Hide yo kids, hide yo wife.

...

Just kidding.

This level was really eye-opening, in that it demonstrated how a seemingly inconsequential bit of noise (auto-generated port numbers) coupled with pattern detection and oblique logic can reveal secrets.

Be careful in what you may reveal to attackers, because so much more can be deduced than what is readily apparent.

Categories
Author

Last April we sponsored the first MoDevUX event in Washington DC and helped facilitate some important conversations about user experience design and application development with hundreds of industry experts.

We had the opportunity to take the stage to share some of our insight gained from developing beautiful, modern mobile applications over the years. Our presentation garnered a lot of feedback and even landed us a story in InTheCapital, DC's leading online news source for tech and startups.

We're pleased to report MoDev is back in action this September with another mobile-themed conference, MoDevTablet; this round they will focus specifically on keeping pace in the tablet era.

We're excited to sponsor MoDevTablet alongside giants like Adobe, BlackBerry and Microsoft. The conference offers more than 60 workshops and presentations over three days from September 13th-15th.

Once again, Jurgen Altziebler, our Managing Director of UX, and Anthony Nystrom, a Fellow at Intridea as well as our Director of Mobile and Emerging Technology, will take the stage. This time they'll be presenting "Tablet as a Utility", and will share case studies on developing tablet applications for real world, utilitarian cases where the functionality and design of the app has to enable someone to do their job more effectively. They will cover questions like:

  • How does the design of these apps differ from the design of novelty tablet applications?
  • What special cases do you need to take into consideration?
  • How to keep tablet in use without Wifi?
  • How to accommodate for working conditions like changes in light, differences in fingernails, and extended use?

We hope you'll join us for this exciting event in DC next week! Registration is still open. Several Intrideans will be there along with Jurgen and Anthony, so it will be a great time to pick our brains about your design and development strategy. Be sure to follow us on Twitter for updates throughout the event.

Categories
Author

As someone who deals with the digital presentation layer from day-to-day, being limited to the screen creatively can be…well… limiting. Don't get me wrong, I love designing apps and interfaces but sometimes it feels good to make something with your hands, ya know? To feel the fruit of your labors in your hands, to interact with them, share them, and most importantly to learn from the process of making them. Which brings me here, the open-source backpack—a simple sewing pattern that can be used as a springboard for making your own kick-ass rucksack.

Over the coming months I'll be travelling quite a bit and need a good bag. If all goes as planned, I'll be visiting family, attending the Smashing Magazine conference in Germany, co-working with friends in San Francisco, seeing the American Northwest and blogging along the way. That in mind, having something sturdy, comfortable, and stylish to carry my life in is so necessary. Rather than purchasing another Air Force-1 by DQM x SAGLIFE, I decided to make one using the skills I developed in the sewing classes I took this summer.

Sewing you say? Wait, aren't you a UI designer? Yes, yes I am and I can whip up a pair of trousers, hem a shirt and make backpacks. Okay, neato, so then why are you posting this on a blog that's typically focused on tech? Simple—because I want to share how I was able to produce this using techiniques I've honed as a UI designer. I'm also sharing it because I believe it's important for "creatives" to work in mediums that are vastly different from one another. Being proficient in multiple areas not only allows you to make some pretty neat stuff, it also gives you the ability to solve problems from a varieity of directions.

OS Bag - Alpha

Like any good designer, I started by defining some base requirements:

  • Capable of carrying at least a week's worth of clothing
  • A built-in pocket for my laptop
  • Side access zipper to easily access stuff
  • Comfort, durable and stylish (of course)

Once my requirements had been established, I did a bit of competitive analysis to see what others were doing. Since I already had a good idea of what I wanted, something similar to my old bag, the Air Force-1, I was able to just pick the things I liked and drop that which was out of my ability or scope in order to achieve the MVP (minimum viable product).

Next came some napkin sketches so I opened up Paper, the kick-ass iPad drawing app, and threw down some very rough ideas.

Afterwards it was time to come up with the architecture for the bag or it's wireframe. Rather than creating a traditional pattern, which I don't really know how to do, I laid out a template with all the pieces as if I were putting it together in the same way that we do with our high-fidelity wireframes. Pockets on top of panels, straps next to back supports—this really helped me to visualize the end product and think about how to approach the construction of the components, such as the laptop pocket, the interior pockets, side zipper, and straps.

Then it was onto building my first prototype. In a very agile fashion, I built in sprints and tackled each part of the bag individually, starting with the straps because they were the most complicated. The alpha was produced using an inexpensive material, muslin, which allowed me to quickly and efficiently try things out without concern for budget—tactile throw-away code.

With the alpha complete, I shared it with friends for user feedback and found that my dimensions didn't accomodate all users, particularly those who were shorther than me. The solution would have been to revisit the measurements and strap placement, which, given my schedule wasn't feasible. So I opted for a more custom experience and decided to factor these users in at a later date.

OS Bag - Beta

With my alpha complete it was time to get real and build a production version. I began by gathering all the materials, assembling them into components, attaching the components to their parent structures, and finally tying it all together in a final build.

It wasn't all ponies and rainbows—I broke a lot of needles, stitched through my finger and struggled with a machine that wasn't quite strong enough in some situations. But I made due, sacrificed when I needed to and finished with a complete working product in the end.

It's striking how similar the design and production process of the backpack was to designing and producing web applications. I was able to apply many of the practices I use every day at Intridea - like rapid prototyping, agile design and iterative development.

 

Categories
Author

The main function of data visualization is to help us better understand the concept of a data set quickly. When done effectively, data visualization can look organic and beautiful, but the primary goal is to help the viewer to consume and understand the gist of the data quicker than if he/she were looking at the sum of its parts.

Rating systems are a great example of where we could do better with data visualization. As Goodfil.ms mentioned last week in a post about rating systems, 5-star rating systems are broken.

A typical rating system should convey information quickly to a user as they browse through many entities on a screen. The 5-star rating system does do this, but it only shows a mean, not an entire dataset that the mean is derived from. Amazon.com does a breakdown of ratings and shows the context and relationship between all of the ratings for a product but they are too verbose to be put into a browsing view; they simply take up too much space.

The problem: we need to show detailed information of a dataset in a small space in a way that can be understood easily and quickly.

Plenty of research has gone into sparklines, which does exactly this – cram detailed information into a small space. Sparklines have been deemed pretty successful in applications, especially when surrounded by a lot of content. A study published in the IEEE Transactions on Visualization and Computer Graphics in 2010 showed that tag-cloud using sparklines resulted in faster task times, fewer errors, and was more preferred than its stacked-bar and multi-line chart counterparts.

Ok, great, a sparkline visualization meets our needs for space and can be an effective conduit, but how are we going to actually show the data we have?

Typically we think of heatmaps working really well in spatial relationships, but they've also been attributed to working extremely well when reviewing large datasets. Specifically, heatmaps can be used to find clusters and correlations from large datasets to those with only a few data points, such as 5-star ratings.

Heatmaps and sparklines are two good solutions to the problems with displaying rating results. That's why we created heatRate; a jQuery plug-in which takes a simple 1-dimensional array and creates a CSS gradient heatmap that displays the data on any HTML element you'd like.

You can keep the visualization in-line with your other elements but still see details you might otherwise miss on the standard 5-star rating visualization. heatRate has various options you can adjust to change contrast and the overall look of the heatmap gradient altogether. It works by employing HSLa, so you can choose to have values change based on hue, saturation, or lightness.

heatRate would be a good choice for you to use anywhere that you might have varied values in your data, even outside of the scenario of a rating system.

Give it a try and share your feedback with us! We'll be working on new features for this project in the coming weeks. We're obsessed with finding better ways to visualize data.

Categories
Author
Subscribe to