Win8 Metro Style navigation

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!

Direct Object References

I have to use the Open Graph API from Facebook ton my current project, and I found a real life example of the Direct Object Reference flaw I discuss in my Pentesting ASP.NET talk.

The Direct Object Reference is one of the OWASP Top 10, and is one of the most common security flaws in REST or SOAP APIs. When you use a knowable value as a unique identifier in your response, you are exposing an inportant part of your architecture to a potential attacker, or anyone else who deems your information interesting.

I was suprised to discover that the user identifier for Facebook is an integer. The OpenGraph request for a user looks like this:

That's me, obviously.


   "id": "1138975844",
   "name": "Bill Sempf",
   "first_name": "Bill",
   "last_name": "Sempf",
   "username": "billsempf",
   "gender": "male",
   "locale": "en_US"


By the way, I have every privacy control turned on, and yet anyone can view this basic information. I'm not terribly happy about that.

But who is next in line?

That could get interesting.

   "id": "1138975845",
   "name": "Mary Loaiza",
   "first_name": "Mary",
   "last_name": "Loaiza",
   "link": "",
   "gender": "female",
   "locale": "es_LA"


I wonder how Mary feels about me knowing that she is a facebook user.

Anyway, that's a direct object reference. Keep an eye out for it in your code. It's very simple for an attacker to write a script that checks every number in a range, and get a lot of your database. The easy remiadiation is to use a GUID as the ID, or use the ESAPI AccessRequestMap







Testing for my CSSLP and trying uCertify.

As part of my stated goal to become more active in the Information Security market (following my career path of Integration-Performance-Security), I have decided to certify as a CSSLP. There is a wealth of knowledge out there about the SSDLC part of things that I don't really hold, and it is time.

By way of Coincidence, uCertify emailed me just the other day and offered me the opportunity  to try out one of their prep kits. Needless to say I selected the Certified Secure Software Lifecycle Professional kit.  So I am going to get to review the kit in the best way possible - actually taking the exam!

The initial look of the kit is very nice - it is an installed package rather than a web based thing, which gives some nice user interface features but makes it a little less accessible. The learning mode is tightly integrated with the practice tests, which will help me a lot. I already know about 70% of what is on the test, so I need something that will help me focus on the 30% and uCertify seems to be doing that.

Plan on hearing a little more from me in the next month about this - I plan to test around the end of February. Wish me luck!

Referencing a C# class library in HTML5 Metro UI

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!


MetroUI:Another user has already installed an unpackaged version of this application.

If you have had to delete your user profile in Windows 8 to get around the known Internet Explorer 10 bug, you might have run into this error when trying to run an app from Visual Studio

Error    2    Another user has already installed an unpackaged version of this application.                    The current user cannot replace this with a packaged version.                    The conflicting package is 00392a51-cf7d-4fd5-bde7-be48dcef9ec2 and it was published by CN=sempf     ToDoTodayApp

The reason this happens is the Package Name parameter of Metro apps.  In the Package.appxmanifest you can see the GIUD that is used for the unique app identity.

<Package xmlns="">
  <Identity Name="00392a51-cf7d-4fd5-bde7-be48dcef9ec2" Version="" Publisher="CN=sempf" />

All I had to do to get around the problem was alter the GUID, and the program ran fine.

On popular events and the efficacy of registrations

Codemash - probably the single best regional development conference in the country - sold out of 1200 tickets in 20 minutes.  This is pretty impressive, but hardly unheard of.  ShmooCon, the DC security conference, sells out in a few seconds every year. and has gone to a lottery system to distribute tickets. This is not optimal because many who want to go and should go are not admitted by pure bad luck, making the conference worse overall.  While degradation in quality is an effective way to reduce queue length, it isn't one that anyone really wants.

I am fascinated with the economics and psychology behind popular events and their queues.  Generally, for something like a concert, you will drive the queue length down with cost.  You want to see Madonna?  Fine - $350. Too rich for your blood? Good - we had too many people anyway.  This works for a lot of entertainment topics, actually, since there is no moral standard for admittance.

Colleges are another story.  A good college will have an abundance of admissions, but only a few will be accepted.  Private schools will filter with cost as well - but is this a good idea?  Do you want those with the most money, or those who have the best chance for success? Those two items won't always overlap.  The Objectivist seminar that used to be in Virginia every year had a good solution: they filtered with high cost but had a scholarship program.  To apply for a scholarship, you needed to do a LOT of writing, and it had to be GOOD.  Few went to the trouble, but those who did REALLY wanted to be there. I know, because I was a recipient in 1997.

But how to reduce the queue for something like Codemash? Eventually something like a lottery will have to be instituted, because next year noone trying to register more than a few people at a time will be able to get tickets. But see, that is a problem, as this is a conference where people who really WANT to be there, should be there.  High prices have a similar problem - in general the community is not short on funds so that will probably do nothing except tick people off. (Although a charity could get involved which would be neat).  Even then, do we really want to put the con out of the reach of students? Early registration - effectively reserving space WAY in advance - is another possible solution. I am sure there are other options - guess I need to get out the queuing textbook from OSU.

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

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.

Notes from my Pentesting ASP.NET talk for DODD today

As promised, here are the relevant links to things I talked about at the OWASP talk today.

Thanks to DODD for inviting me out and for the nice certificate! Oh, and the food was awesome - one sure way to get speakers out there.


Got a cub scout in Simon Kenton council? Cross stitch?

The council patch is DMC 307

The Den patch is DMC 939

The international Scouting patch is DMC 550

The Pack Number is DMC 817

The 100 year ring is DMC 310

Just a PSA from your friendly neighborhood scouting family.

Want some popcorn?


Dual boot Windows 7 and Windows 8


When Windows 8 released, I was waiting.  I am not usually the first in line for OS releases, but this time I had a vested interest. I have a book in the works, and this release was an important part.

I was ready with VirtualBox, Windows Virtual PC, and a spare laptop (in case I needed to install on the metal). When the ISOs were available, I was first in line, with a fast connection, and I did the Pokemon bit – gotta get ‘em all.

VirtualBox refused to honor the 64 bit virtualization of my HP XW6200. Aaaand, so did Virtual PC. And guess what – the spare laptop I had was 32 bit too. I was stuck.

Except I had my main laptop, which was 64 bit and had Grub and a Linux partition.  Maybe, just maybe I could instead turn it into a dual booting Windows 7 / Windows 7 laptop.  This post is about how I did it.

Getting rid of Linux

The first time I had to do was get rid of Linux. I did this by removing the partitions that it lived on (That Wubu had made for me) and making them into an empty partition. I did this with the Disk Manager.

In Windows XP and prior, disk partitioning required a tool purchase. In Vista, Microsoft included a tool called Disk Management, part of the Computer Management control panel. To get there, open the Control Panel, change to Icon View, click Administrative Tools, and open the Computer Management panel.


This image shows my desktop right now, but the laptop had 6 partitions

  • The original Vista recovery partition
  • The C partition
  • Grub
  • Ubuntu 10
  • Ubuntu11
  • System Reserved

So I deleted the two Ubuntu partitions and Grub and made them into an empty partition. I made one on my desktop to show what I mean.


Here, I have a 250 GB unallocated partition.  I can right click on it and name it so I can be sure to get the right one when I am installing Windows 8.

Making a Windows 8 boot UBS drive

Now I needed to install – and I didn’t have any blank DVDs. (Really) I did have a 75 gig USB drive though. My laptop had the capability to boot from USB (as many do) so I decided to make a bootable USB drive.

  1. Start with a drive that you can empty (You can add stuff later if you need to).
  2. Extract the ISO to a file directory on your hard drive. Use WinRAR if you have nothing to do that.
  3. Download NovaCorp’s WinToFlash product.
  4. It runs right from the download no need to install
  5. Use the Windows Setup Transfer Wizard to move the extracted files from the ISO to the USB
  6. There ya go!

Making a Windows Partition

So I rebooted after this activity, and I got a Grub error. As it turns out, Grub doesn’t LIKE it when you delete its master boot record. I needed to load up a repair utility. Since I had a Windows 8 boot drive now, I booted to it by setting my BIOS to boot from USB, and entered the Repair menu.

From there I went to Advanced Tools, got a command prompt, and entered two commands:

bootsect /nt60 C:

and then

bootrec /fixmbr

Rebooted and then Windows 7 booted just fine.

Installing Windows 8

Installing Windows 8 was an awesome experience. I shut down Windows 7 and changed the boot partition to the USB drive again. When it came up, I had a normal Windows 8 install experience, which took about 10 minutes.

The installer auto rebooted, and I still had the bootable USB drive in. Since my BIOD was set to boot from that drive, it went back to the installer startup. I just shut down my machine, and unplugged the USB drive, restarted and the installer continued.

After installation, I rebooted to discover that Windows 8 comes with a boot manager! I get a big, neat MetroUI selection screen asking my if I want to boot into Windows 7 or Windows 8.

The Finished Product

I was stuck in 1024/786, but I had a landscape display. In a last ditch attempt, I navigated to the Display Settings, selected Advanced and then Update Driver.


Here I tried the Search Automatically feature and what do you know, it worked.

Now I have a perfectly working Windows 8 and Windows 7 partition, and I can freely boot between the two. The Windows 8 partition even has my Windows 7 partition mounted as a drive!

Nice work, Microsoft. Your work really showed on this one.

Who the heck is Bill Sempf?

Bill Sempf

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.

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

Month List

Paying the bills