Doing security analysis on Windows 8 Metro Apps with Zed Attack Proxy

by Bill Sempf 16. July 2012 05:30

This is the first in a series of articles about attacking Windows 8 applications using Zed Attack Proxy, or ZAP. Windows 8 is the new version of the venerable Windows operating system from Microsoft. It has a new Windows programming model that is heavily based in a new API for Windows development, called WinRT. ZAP is a web proxy for security analysis of applications by OWASP. It is free.

Setting up ZAP for Windows 8

After installing ZAP, it needs to be made ready to act as a proxy for Metro applications. As most Metro applications make heavy use of the Internet for data storage, information access and communication with the Windows Store, use of a proxy is a great place to start to test the underlying security.

1) Press the Windows button and type Internet Options.

2) Press the Settings tab on the right of the Start Screen.

3) Select the Internet Options control panel.

4) Click the Connections tab.

5) Click the LAN Settings button

6) Change the Provy Server settings like Figure 1. Check the 'Use a proxy server' checkbox, then set the address to 'localhost' and the port to '8080'.


Figure 1 - configuring a proxy

7) Click OK, then click OK.

Finally, you have to configure the app you are testing to allow the loopback (locakhost) address as a proxy, which by default AppContainers aren't allowed to do. You can do this with PowerShell, but it is a lot easier to download Eric Law's excellent EnableLoopback utility, which will do the work for you. You just need to find the app you want to test and select the checkbox, then click Save Changes, like Figure 2.


Figure 2: the EnableLoopback Utility

Not your machine is configured to use ZAP as a proxy. While these settings are set, you will have to have ZAP running to use the Internet. Also, enabling the loopback address circumvents important security controls placed on Metro apps. Only use it on a test system.

Testing your settings

To test your settings, run ZAP by pressing the Windows key and typing ZAP then pressing enter. Then run an installed Metro app, like the Finance app, which you have configured for loopback. In ZAP, all of the services being called by the application will appear in the Sites pane, and all of the individual calls will appear in the History tab. Figure 3 shows my results.


Figure 3 - Finance Test results

 Each of these represents an HTTP call being made by the Finance app to populate it's screens. Apparently, the developers of this app chose not to use SSL for any of the calls, which makes our job easier - although since we have a man in the  middle the analysis can still be carried forward. Either way, this gives us a ripe field to begin our analysis.

Attacking underlying services

You can now use ZAP to test the underlying services with the fuzzer.

1) Select a service to test in the Sites pane. I selected the service.

2) Highlight a parameter to fuzz in the Request pane, right in the querystring. I selected the 'a' parameter in Figure 4.


Figure 4 - Setting the fuzzing dictionary

3) Right click and select Fuzz. The dialog that appears is also shown in Figure 4.

4) Select the Fuzz category in the dropdown. I selected SQL Injection in Figure 4.The list of pre-installed fuzzers appear in the Fuzzers listbox. These are known attacks that work against a variety of databases. As this is a Microsoft service, we can assume that MSSQL is probably the database, although other test tools could be used to ascertain this. In Figure 4 that is the fuzzer I selected.

5) Click Fuzz to begin your attack. ZAP will begin to call the service with the attacks in the SQL Injection file.

And ... it didn't work at all. The Fuzzer tab shows each attack, and all of them have a 404 error in the result column. Apparently that field is being used as a controller method name - I should have thought of that!

Oh wrell, let's try something else. Select the 'q' parameter and try again with a SQL attack. This one is a lot better - every result comes back as a 200. Awesome.  Click on a line in the Fuzzer tab to see the result in the Response tab.


            "Message":"Parameter has invalid value.",
            "Value":"'create user name identified by pass123 temporary tablespace temp default tablespace users; "

What have we here? A error code 1002? Aah, 'Parameter has invalid value.' -- they are using parameterized queries. I suppose one would expect a well vetted service like Bing to be hardened against the #1 exploit on the OWASP Top 10 though.

In the next in this series we will look at an exploitable app and try and test the services that make up its data storage facility. Thanks for reading!


AppSec | HTML5 | Javascript | Windows8

Animating Windows

by Bill Sempf 11. July 2012 05:30


This is an excerpt from the upcoming book Programming Windows 8 with HTML5 for Dummies


The component animation that is inherent to HTML5 and even JQuery is not only supported in Metro, it is encouraged. The navigation model is new through, and there are bits in WinRT that make it easy to animate.


Everything for page and content level animation (sometimes called Transitions) is covered by WinJS though, and you can find it in WinJS.UI.Animation. Here is a sample of what you can get there:


  • Page transition: Animates the contents of a page into or out of view.
  • Content transition: Animates one piece or set of content into or out of view.
  • Fade in/out: Shows transient elements or controls.
  • Crossfade: Refreshes a content area.
  • Expand/Collapse: Shows additional inline information.
  • Reposition: Moves an element into a new position.
  • Show/Hide popup: Displays contextual UI on top of the view.
  • Show/Hide edge UI: Slides edge-based UI into or out of view.
  • Show/Hide panel: Slides large edge-based panels into or out of view.
  • Add/Delete from list: Adds or deletes an item from a list.
  • Add/Delete from search list: Adds or deletes an item from a list when filtering search results.
  • Badge update: Updates a numerical badge.
  • Start/End a drag or drag-between: Gives visual feedback during a drag-and-drop operation.


That’s a lot of animating. Don’t feel like you have to animate everything to get into the store. I would, though, seriously consider animating page and content transitions in order to show that you have given a nod to the realities of the Metro design language.


Page level transitions


Compared to dealing with the GestureLibrary, page transitions are a snap. In WinJS.UI.Animation you will find an enterPage function, and an exitPage function. They both do about the same thing, they just need to be run at different times in the page lifecycle.


Both methods take an element object and an offset object, and return a Promise. While an element is in transition you can’t act on it, so you want to use the promise to delay any page functionality (like removing an element) until the animation is over.


WinJS.UI.Animation.enterPage(content, startingPosition).done();


The content is the element or elements that you are animating. This seems counterintuitive but I believe it is set up this way so that you can choose to animate only certain parts of the page, and still have content level control later. The enterPage function is designed to be used with the Navigation libraries we talked about in Saying Hello World.


The startingPosition is exactly what it looks like. It is where the content collection should start before the animation occurs. You can pick a place on the page and pass in a JavaScript array of the location to make this happen. The recommendation is, though, to use “undefined” for the default start location.


The done of course represents the Promise that is being returned by the function. When the animation is done, the rest of the code will be run, and not until the animations is done. This is to prevent the entire UI from locking up while an animation is being performed.


To set up an animated page sequence, try the following steps:


  • Create a blank JavaScript Metro project.
  • Make a new directory called “pages” for the pages we are going to transition amongst.
  • Add three pages. Right click on the pages directory and select Add New Item. Select Page Control. Do it three times. I named mine firstpage, nextpage and thepageafter.
  • In default.html, add a content div replacing the paragraph tag, like this:


    <div id="content"></div>


  • In the default.js file, add a navigated event handler.


WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var content = document.getElementById("content");
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, content, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;


  • Also, navigate to the first content page in the onactivated event. This will get things started.


app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
                return WinJS.Navigation.navigate("/pages/firstpage.html");


  • The firstpage.html, nextpage.html, and thepageafter.html give the header and main sections a ID. While you are in there, add a button for navigation.


    <div class="firstpage fragment">
        <header aria-label="Header content" role="banner" id="header">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to firstpage</span>
        <section aria-label="Main content" role="main" id="main">
            <p>Content goes here.</p>
            <button id="nextPage">Next Page</button>


Add a transition function to firstpage.js, nextpage.js and thepageafter.js that navigates to the shosen page and uses the animation.


function transition() {
        WinJS.UI.Animation.exitPage([[header],[main]], null).done(
            function () {


This will be different for each page! It should navigate to the page you want to go next.


  • Finally, in the firstpage.js (and the others) and change the ready event to fire the new transition function when the click event occurs.


WinJS.UI.Pages.define("/pages/firstpage.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var nextPage = document.getElementById("nextPage");
            nextPage.addEventListener("click", transition, false);
            WinJS.UI.Animation.enterPage([[header],[main]], null);

I wish I had a pretty picture of this to show you, but wiley STILL hasn’t implemented those animated pages. If you can’t get it to work, download the sample code and give that a try. There is also a fantastic sample (if a little overcomplicated) on the samples site.


Animating content


Good news! Animating content is almost excactly the same as animating entire pages. The Animation library has enterContent and exitContent functions that work a lot like enterPage and exitPage.


WinJS.UI.Animation.enterContent(content, startingPosition).done()


The content object is an HTML element (the ID of said object) that you want to animate. The startingPosition is best set to null unless you have a specific starting position. And the Promise returned is just to make sure that you don’t do anything with the entity until the animation is through.


I’ll spare you the steplist – it looks a lot like the Animating Pages example above. Just put the enterContent in the load function, and the exitContent in the navigation event.



HTML5 | Javascript | Windows8

Treating users right

by Bill Sempf 9. July 2012 05:30

This is an excerpt from the upcoming book Programming Windows 8 with HTML5 for Dummies


Metro apps are different.  As I mentioned in This Is Not .NET, Metro apps are optimized for touch, usually mashups, and often single use. They are not complex, menu driven or multi-functional.  They are usually for consumption, not creation. It is a totally different user experience that we are after here.

Because of this, there is a totally different design paradigm.  Now, Microsoft has tried to lay on the User Interface guidelines before with mixed success, but this time they are serious! The development environment is set up to only allow certain kinds of user interface elements, and if you step away from the path you will find your going rather tough.

Setting some design principles

Microsoft is being very clear in laying out some user interface and architectural design patterns.  It remains to be seen if these will be upheld in the review process, but they are good guidelines and should be followed.

While we will go into more detail in Chapter 2, there are a few core principles I want to use to describe Metro apps that will make the rest of this chapter make more sense. Metro apps are:

  • Socially connected. Metro apps make use of social network and public sharing networks to broadcast information, connect with friends, and make new groups.
  • Living in a sandbox. An install of the Metro app should never alter the core functionality of the user’s machine.
  • Designed for touch. These apps are designed to be run on a tablet, but should work with a mouse. Much more on this later.
  • Screen size sensitive. Like a web page, Metro apps should be sensitive to resolution, orientation, and docking.
  • Made for multitasking. Users can ‘snap’ Metro apps into specified parts of the screen, and if you want a nice looking app you have to handle that in your interface.

Using the Design Checklist

Something that Microsoft has implemented to help with the core principles is the Design Checklist. It covers what you need to make sure you have planned for in your app.

                           *  Basic design groups – core things you need to make sure you have covered

                                       *App tile – the icon that the user touches to launch your app

                                       *Splash screen – what the user sees while your app is loading

                                       *Application Lifecycle – be ready when the app gets suspended, or the battery runs out.

                                       *App bar – all your apps commands go in the same place.

                           *  Engaging the user with app contracts

                                       *Settings – how the app communicates with Windows

                                       *Search – how does it apply to your app?

                                       *Share – be social!

                                       *Play to – stream to other devices

                           *  Various Views

                                       *Full Screen





                           *  Adding features – take advantage of the neat stuff you can do

                                       *Semantic Zoom



                                       *Content tiles

                                       *Gesture library

                                       *File picker


                                       *User tiles

Convention over configuration

You may have noticed by now that the Metro style is a lot about convention – convention being defined as how Apple decided to make the IPad work. You don’t actually have a lot of artistic license over how the user will interact with the meta-information related to your app; it is pretty well defined by the Design Checklist and Core Principles.

Let’s take navigation for example.  In Windows Forms application, navigation is all over the place.  There are menus and ribbons and buttons (oh my!). In MetroUI, however, the navigation of the application should be document oriented, and in the app bar, at the bottom of the application.

The programming model supports this, in fact.  It supports it so well that there really isn’t any other way to implement the app bar.  To see what I mean, open up the Hello World application we made in Getting There Ourselves.

In the HTML, inside the body tag, add a div that represents the AppBar control.  Notice the data-win-control declaration:


    <h1 id="headline"></h1>

   <div data-win-control="WinJS.UI.AppBar" id="appbar">

   <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'back', id:'', label:'example', onclick:null, section:'global', type:'button'}"></button>



Now you can run the application, and have a nice back button in the app bar. All of your navigational type stuff would go here – start over, change views, go home.  Not in a menu, not in the page.  In the app bar.


HTML5 | Javascript | Windows8

Updating your Windows 8 HTML 5 Metro project to RC

by Bill Sempf 11. June 2012 10:07

In updating my Metro app to Windows 8 RC, I only ran into one incompatibility - Microsoft revved WinJS (as they should!) The error I got was:

Error 1 Could not find SDK "Microsoft.WinJS, Version=0.6". C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets 1682 6 ToDoToday

All I had to do was delete the old reference from the References folder, right click and Add Reference, and select the new version. Looks like this:


Then I needed to change my references. The original default.html has this WinJS Reference code:

<link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

 And I changed it to this:

<link rel="stylesheet" href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

 And then everything worked!


HTML5 | Javascript | Windows8

Win8 Metro Style navigation

by BillSempf 14. February 2012 04:08

WARNING! This is based on Developer Preview, and much has changed.

Navigation in Metro is a little fuzzy right now. Fortunately Visual Studio has a navigation template. If you click File.NewProject, and dig into the Metro JavaScript apps, then you will see the Navigation Application. It is described as a “minimal style application that uses Windows Metro style frameworks and includes navigational support.”

The Navigation Template

A look at the source that the Navigation template shows us a pretty contemporary divided-screen model.  It has div that will contain the content, and another one that has the navigation tools.

<body data-homePage="/html/homePage.html">
    <div id="contentHost"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
        <div class="win-left">
            <button id="home" class="win-command">
                <span class="win-commandicon win-large">xE10F;</span><span class="win-label">Home</span>

The div labeled contentHost will be used to store the content that is directed there. The appbar div is of some more interest. It has a data-win-control property, which is a Metro-specific field that includes specific styles and functionality at render time.

This one is the WinJS.UI.AppBar, which is the little sliding bar that you can access in a Mero app by sweeping from the bottom. There is a 1 pixel trigger left in the bottom of all application that makes the sweep work, and the div shown here sets up the content for the bar.

Right now there is just one button in the bar. If you just click the Debug button without making any changes, you get one button that goes to one page that you already start at. Not terribly interesting.

What that AppBar is supposed to do it give you the ability to load new fragments into contentHost. You can do this with direct buttons, page numbers, or VCR style controls. Doesn’t matter, as long as the content gets loaded.

Loading the fragments is set up in default.js. Remember that weird data-homepage attribute in the body tag of the default page? Well, that’s used to set the initial page in contentHost.

WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            homePage = document.body.getAttribute('data-homePage');

            document.body.addEventListener('keyup', function (e) {
                if (e.altKey) {
                    if (e.keyCode === WinJS.Utilities.Key.leftArrow) {
                    else if (e.keyCode === WinJS.Utilities.Key.rightArrow) {
            }, false);

                .then(function () {
                    document.getElementById('home').addEventListener('click', navigateHome, false);


After activating the app, a few keyboard events are handled, and then the WinJS.Navigation namespace is used to navigate the page to homepage.

Adding a fragment

One page is really quite boring – why would you need navigation for one piece of content, right? To make things a little more interesting let’s do something wild, like add a page, screen form, wqhatever you want to call it. From Microsoft’s perspective, it is a ‘fragment’ and it is treated like a form or page in any other paradigm.

To add a ‘page 2’ to the template application:

1) In the Solution Explorer, right click on the HTML folder and click Add | New Item…

2) In the Add New Item dialog select the HTML Fragment item and name is Page2.html.

3) After you have added the new fragment, all of the fragment files will be in the HTML folder, as of this writing. Move them into their correct folder. The CSS file goes in the CSS folder and the JS file goes in the JS folder.

4) Update the references in the Page2.html file to point to the new file locations.

<link rel="stylesheet" href="/css/Page2.css" />

<script type="ms-deferred/javascript" src="/js/Page2.js"></script>

5) Update the body content of Page2.html so that we can show some cool neato content when we get there.

    <div class="Page2 fragment">
        <header role="banner" aria-label="Header content">
            <button disabled class="win-backbutton" aria-label="Back"></button>
            <div class="titleArea">
                <h1 class="pageTitle win-title">Welcome to Page2</h1>
        <section role="main" aria-label="Main content">
            <p>This is my new page 2! Isn’t it cool?</</p>

6) In default.html, add a button that will take the user to page 2. This goes in the appbar div.

<div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
    <div class="win-left">
        <button id="home" class="win-command">
            <span class="win-commandicon win-large">xE10F;</span><span class="win-label">Home</span>
        <button id="page2" class="win-command">
            <span class="win-commandicon win-large">xE10F;</span><span class="win-label">Page2</span>

7) In default.js, you will need an event handler for the new button.   Add it to the process method for the appbar (it’s near the end).

    .then(function () {
        document.getElementById('home').addEventListener('click', navigateHome, false);
        document.getElementById('page2').addEventListener('click', navigatePage2, false);

8) Hey, we need a navigatePage2 method, don’t we? Let’s add that above the process code.

function navigatePage2() {

That should be everything we need. Press F5 to run and (if you are on a regular machine) press Windows+Z to bring up the new appbar. Tap that neat new Page 2 button. And of course here is more to it than this. You might need to keep an array of pages in memory and provide a next/back button, or give random access via a menu. The principles are the same though. Good luck!


Biz | HTML5 | Javascript | Windows8

Referencing a C# class library in HTML5 Metro UI

by Bill Sempf 14. December 2011 15:39

I am sure that you, like me, are hoping that you can use your C# code as the backend to your HTML5 Metro applications. For instance, I need to use the Meetup API that I am developing in a metro application that I am planning. I don't want to rewrite all of that in JavaScript.

In the solution that needs the C# class, right click on the solution in Solution Explorer and select Add New Project. I used new rather than trying to import one becasue the import facility is a little buggy in Visual Studio 2011. Click on Visual C# and then select Class Library as shown in Figure 1.


Figure 1- Add a class library

Once the project is added , you need to make two changed before you can reference it in your HTML5 application. First, the output type of the assembly needs to be set to WinMD File, as shown in Figure 2.  You can change this in the Properties.


Second, you need to seal the class. You can do that in the code for the class, using the sealed declaration, like this:

    public sealed class WebService
        public string BaseUri { get; set; }


Note that implementation inheritance isn't alloweed in Metro applications, so you need to head back to the 90s to get your polymorphism working, sorry!



Biz | C# | HTML5 | Windows8

They aren't kidding about that 'enable exceptions' thing

by Bill Sempf 19. October 2011 11:54

In the default templates for WinJS Windows 8 applications, there are two lines that are easy to ignore:


    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);


They aren't kidding.  I was doing a little work with the Pastebin API (shh, don't tell anyone) and had failed to declare a variable.

Over and over, I would run it and have no idea that something was wrong.  I would have to set a breakpoint and know where to look to find errors.  It sucked.  I am too used to an IDE.

Then I remembered those lines, uncommented the Debug member there, and was good to go.  It seems painfully obvious now, but it didn't before and if I can help someone else not pull their hair out, we are all the better.

Generally, though, I am not sure how I feel about this.  It seems a lot like On Error Resume Next in VBscript, and we all know how THAT turned out.


Windows8 | Javascript | HTML5

Husband. Father. Pentester. Secure software composer. Brewer. Lockpicker. Ninja. Insurrectionist. Lumberjack. All words that have been used to describe me recently. I help people write more secure software.

Find me on Mastodon

profile for Bill Sempf on Stack Exchange, a network of free, community-driven Q&A sites