Ugo Lattanzi

Using Kestrel with ASP.NET 5

2016-01-12T00:00:00+00:00

With ASP.NET 5 is possible to host your web applications in different ways; of course you can always host your application using IIS (Internet Information Services) and probably it is the best way if you are running your application on top of a Windows OS, but sometimes could be helpful to run test your application also outside of IIS.

For all people who don’t know what Kestrel is (but you should have guessed) let me past here the official definition

Kestrel is a cross-platform web server based on libuv, a cross-platform asynchronous I/O library. Kestrel is open-source, and you can view the Kestrel source on GitHub. Kestrel is a great option to at least include support for in your ASP.NET 5 projects so that your project can be easily run by developers on any of the supported platforms. You add support for Kestrel by including “Kestrel” in your project’s dependencies listed in project.json.

Now that you know what is Kestrel let’s see how to use it.

First of all, when you create a new project from Visual Studio or Yeoman the project is automatically configured to run using Kestrel, in fact into your project.json you should have something like that

My code is based on the RC1 but should be the same also if you are running and older or newer version.

The arrows show you two important things:

Kestrel dependency
Web command

The first one is the normal reference you need if you want to run your web application on Kestrel, the second one is the command to run into your project folder (is the same to run dnu web)

Now you have your application ready (I used Web Application template, see here) you have two ways to run it on Kestrel.

From command line run dnu web getting an output like this (maybe you have to run dnu restore if is the first time with your app)

or using the play button from Visual Studio

That’s pretty easy but is helpful only you want to test your application locally, right now you are not specifying any domain host and you are exposing your application on to schema http and not https. That’s not so good in a real world so, let’ start to see how to do more with Kestrel.

Because we want to run our application on https, first of all we have to buy a certificate. For demo purpose I’ve create one myself (so is not trusted) but is ok for now. Below the steps to create your own self signed certificate

Now your test certificate is ready, let’s add the Kestrel.Https dependency to our project. To do that let’s open the project.json and add Microsoft.AspNet.Server.Kestrel.Https

Now it’s time to configure the certificate into our Startup class like this:

public void Configure(IApplicationBuilder app, 
                                    IHostingEnvironment env,
                                    IApplicationEnvironment appEnv,
                                    ILoggerFactory loggerFactory)

    var certFile = applicationEnvironment.ApplicationBasePath + "\\democertificate.pfx";
    var signingCertificate = new X509Certificate2(certFile, "democertificate.io");

    app.UseKestrelHttps(signingCertificate);

    //...... your code
}

As you can see the code is pretty simple, is enough to create the X509Certificate2 class and call the specific method UseKestrelHttps.

Note: if you are running the RC1 of Microsoft.AspNet.Server.Kestrel.Https you have a problem with the schema. That because it’s a bit buggy as you can see here (https://github.com/aspnet/KestrelHttpServer/issues/551). That is fixed with the RC2 (not released yet) but, in the meanwhile, you can use a simple workaround like this

private static RequestDelegate ChangeContextToHttps(RequestDelegate next)
{
    return async context =>
    {
        context.Request.Scheme = "https";
        await next(context);
    };
}

public void Configure(IApplicationBuilder app, 
                                    IHostingEnvironment env,
                                    IApplicationEnvironment appEnv,
                                    ILoggerFactory loggerFactory)

    var certFile = applicationEnvironment.ApplicationBasePath + "\\democertificate.pfx";
    var signingCertificate = new X509Certificate2(certFile, "democertificate.io");

    app.Use(ChangeContextToHttps);
    app.UseKestrelHttps(signingCertificate);

    //...... your code
}

Finally we have to specify out custom domain and the https protocol to Kestrel. To do this is enough to add a json file into the root of the project named hosting.json and put this code into it

{
  "server": "Microsoft.AspNet.Server.Kestrel",
  "server.urls": "http://localhost:5000;https://localhost:5001"
}

As you can see you can specify more than one url and, if you have mapped the DNS, you can also replace localhost with your domain (i.e. http://tostring.it).

Finally the result

Stay tuned!

Log your application errors into Slack

2015-11-23T00:00:00+00:00

In our company we use Slack as communication tool (probably since it was released years ago) for about everything. It is becoming a really important tool because our teams are located throughout Europe with different timezones so, a good communication tools is mandatory. It means also that the client is always open on our computers, phones and tablets.

We use it in different ways, to talk one to one, to share funny things, or for projects. Usually for a project we have more than a single private channel, because there are different teams for the project and because we use a channel as alerts application.

Here is an example about one of our customers:

bmw-ux (UX and Art stuff)
bmw-dev (dev, quality assurance, github integration, trello and other tech stuff)
bmw-alerts (alerts by the application)

The last channel is the most important one for this post, because we use it to log information when something goes wrong into the application. Before to see how to use it, let me explain our logging workflow.

The application is built partially on .NET hosted on Azure and we use Serilog as logging framework. It's a really good logging framework and it offers several appenders. We store all logs into ElastichSearch and use Kibana as dashboard to see the log, reports and other cool stuff. The output of our dashbord looks more or less like this:

The usage is really simple


ILogger log = new LoggerConfiguration()
    .Enrich.With<ExceptionDataEnricher>()
    .Enrich.With<MachineNameEnricher>()
    .Enrich.With<HttpRequestClientHostIpEnricher>()
    .Enrich.With<HttpRequestUrlEnricher>()
    .Enrich.With<HttpRequestUrlReferrerEnricher>()
    .Enrich.With<UserNameEnricher>()
    .Enrich.With<ThreadIdEnricher>()
    .Enrich.With(
                        new EnvironmentIdEnricher("Production"), 
                        new ApplicationIdEnricher(applicationName))

    .MinimumLevel.Error()
    .WriteTo.Email(new EmailConnectionInfo
    {
        EmailSubject = $"[BMW {applicationName}] Something went wrong",
        EnableSsl = smtpConfig.EnableSsl,
        FromEmail = smtpConfig.From,
        NetworkCredentials = new NetworkCredential(smtpConfig.Username, smtpConfig.Password),
        Port = smtpConfig.Port,
        ToEmail = emailConfiguration.SupportEmail,
        MailServer = smtpConfig.Host,
    })
    //https://github.com/serilog/serilog/wiki/Configuration-Basics
    .WriteTo.Logger(lc => lc
                                .Filter.ByExcluding(le => le.RenderMessage().StartsWith("....myStuff")
                                .WriteTo.Elasticsearch(new ElasticsearchSinkOptions(elasticSearchConfiguration.Url))
    )
    .CreateLogger();

As you can see in the code above, we use also to send the error via email. For me it's not the best way to have an important notification. All people could write you an email and you need a notification everytime you get an email so it's difficult to enphatize a log message in tons of emails. For this reason we chose to use a private channel on Slack to log important errors. I think it's pretty easy to do that with any logger, but it is for sure using Serilog.

The first thing to do is to configure Slack integration services:

Image 1: Image 2: Image 3: Image 4:

Now save and create your Serilog Slack Sink

namespace Gaia.Bmw.Logging.Serilog.Sinks
{
    using System.Net.Http;
    using Enrichers;
    using global::Serilog.Core;
    using global::Serilog.Events;

    public class SlackSink : ILogEventSink
    {
        private const string SlackWebhookUrl = "here the url you copied from the image 2";
        private readonly string applicationId;
        private readonly string environmentType;


        public void Emit(LogEvent logEvent)
        {
            this.applicationId = "";            //read the application identifier from your configuration
            this.environmentType = "";      //read the environment type from your configuration

            string color;

            switch (logEvent.Level)
            {
                case LogEventLevel.Error:
                case LogEventLevel.Fatal:
                    color = "danger";
                    break;
                case LogEventLevel.Warning:
                    color = "warning";
                    break;
                default:
                    color = "good";
                    break;
            }

            //handlse some scenarios, this probably is not needed in your application
            var title = logEvent.Exception != null
                                ? logEvent.RenderMessage()
                                : "New error occured";

            var exceptinon = logEvent.Exception != null
                                ? logEvent.Exception.ToString()
                                : logEvent.RenderMessage();

            var obj = new
            {
                attachments = new[]
                {
                    new
                    {
                        fallback = $"[{this.applicationId}] [{this.environmentType}] An error occurred.",
                        color = color,
                        title = title,
                        text = exceptinon,
                        fields = new[]
                        {
                            new
                            {
                                title = "Project",
                                value = this.applicationId,
                                @short = "true"
                            },
                            new
                            {
                                title = "Environment",
                                value = this.environmentType,
                                @short = "true"
                            }
                        }
                    }
                }
            };

            HttpClient client = new HttpClient();

            client.PostAsJsonAsync(SlackWebhookUrl, obj).Wait();
        }
    }
}

Now that you have everything ready, it's time to register the Sink into Serilog so


.MinimumLevel.Error()
.WriteTo.Sink<SlackSink>()
.CreateLogger();

The output on slack should be like this:

If you want to customize the output message take a look here Enjoy

What a conference

2015-06-08T00:00:00+00:00

Today we announced (here) by the official channel some important news about the next Web European Conference

That will be a really AMAZING conference and we had several news for you and for all the attendees.

The previous conference was sold out in 40 minutes for 170 available seats, but now we have more seats so everything should go in the right way for all of you but, if you want to be the first to know about the conference, and to have the possibility to pre-register before the official registration opens, go to our website http://webnextconf.eu/ and subscribe to the mailing list. First July the registration will be free for all but, few hours early, we'll send the registration link to all people who subscribe our newsletter.

As for the previous edition, the conference will be free. That's really important and it's the difficult part of the organization. Is not easy to find the money for speakers, rooms, other stuff and keep the tickets free, for this reason your support is more important than ever.

During the registration you can choose if you wanna come for free, if you want the lunch (around 10€), the T-Shirt (€10) and if you want to make a donation (as you wish). We'll use the donation for the organization, speakers, stickers and other stuff like that.

The conference will be in Milan, University of Milano-Bicocca so, if you think you wanna come, it's time to book your hotel. That's important because there is the Expo fair in Milan, so lot of hotels are fully booked, don't wait!

All the information about the location is available on the conference web site here

Finally, I'm very happy to announce two important speakers that will be here in Milan The Great Scott Hanselman and the fabulous Dino Esposito who will talk about ASP.NET vNext and "Extending RWD with Lightweight Client-side Device Detection".

So far we received almost 50 proposals from 20+ different speakers, but to get even more speeches to choose from, we've decided to keep the call for presenters open till the end of June: if you haven't done it yet and you want have the chance to be in the "speakers room" with Scott, go on our Github account, fork the c4p repository, add your proposal and submit a pull request.

Is that cool enough? Yeah! But the surprices are not over, other cool speakers could come, so stay tuned.

An easy way to use StackExchange.Redis

2015-04-23T00:00:00+00:00

In the previous post (you can read it here) I wrote about how cool is Redis as cache server and I showed the basic steps to run Redis on premise or on Microsoft Azure if you prefer.

In this post I wanna introduce an small package available on NuGet that complete one of the best library actually available for Redis in a .NET environement.

The package is StackExchange.Redis.Extensions and, as you can imagine from the name, it offers a set of useful helper.

What can we do easily with StackExchange.Redis.Extensions?

In the previous post I wrote that you have to serialize and deserialize a class if you wanna store it into Redis because the library stores a byte[] and the value could be sent via network. Using this library you don't have to worry about that, it does that for you. Right now it can use three different serialization libraries :

JSON.Net by NewtonSoft
Jil
Message Pack CLI

If you need to use another serializazion library you can easily do it by creating an implementation of ISerialize. Of course in this case a Pull Request is welcome

In the example below I'm going to use JSON.Net but the code is the same for the other librarys, just the Nuget Package changes.

First step is to install it on our project so:

PM> Install-Package StackExchange.Redis.Extensions.Newtonsoft

It contains all you need to use Redis, so you don't have to add StackExchange.Redis because it has the right dependency to it.

Now that we are ready, it's enough to create our ICacheHelper instance

var serializer = new NewtonsoftSerializer();
var cacheClient = new StackExchangeRedisCacheClient(serializer);

The constructor of StackExchangeRedisCacheClienthas different overloads offering you the opportunity to specify your custom serializer, database, connection string or, if you have it, your instance of ConnectionMultiplex.

If you use the code above is enough the add the following code to your configuration file replacing the right values (host, port, ssl and so on):

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <configSections>
        <section name="redisCacheClient"
               type="StackExchange.Redis.Extensions.Core.Configuration.RedisCachingSectionHandler, StackExchange.Redis.Extensions.Core" />
    </configSections>

    <redisCacheClient allowAdmin="true" ssl="false" connectTimeout="5000" database="0">
        <hosts>
            <add host="127.0.0.1" cachePort="6379"/>
        </hosts>
    </redisCacheClient>
</configuration>

If you use a dependency injection framework, probably it's better to register it as singleton

From now we have a set of useful methods for the following scenarios:

How can I store a complex object into Redis?

var user = new User()
{
    Firstname = "Ugo",
    Lastname = "Lattanzi",
    Twitter = "@imperugo"
    Blog = "http://tostring.it"
}

bool added = myCacheClient.Add("my cache key", user, DateTimeOffset.Now.AddMinutes(10));

How can I retrieve an object into Redis?

var cachedUser = cacheClient.Get<User>("my cache key");

How can I retrieve multiple objects with single roundtrip?

That's one of my favorite features because It's very helpful in case you have to retrieve several objects in the same time.

var cachedUsers = myCacheClient.GetAll<User>(new {"key1","key2","key3"});

How can I add multiple objects with single roundtrip?

IList<User> values = new List<User>();

var user1 = new User()
{
    Firstname = "Ugo",
    Lastname = "Lattanzi",
    Twitter = "@imperugo"
    Blog = "http://tostring.it"
}

var user2 = new User()
{
    Firstname = "Simone",
    Lastname = "Chiaretta",
    Twitter = "@simonech"
    Blog = "http://codeclimber.net.nz/"
}

var user3 = new User()
{
    Firstname = "Matteo",
    Lastname = "Pagani",
    Twitter = "@qmatteoq"
    Blog = "http://qmatteoq.com/"
}

values.Add(user1);
values.Add(user2);
values.Add(user3);

bool added = sut.AddAll(values);

Can I search keys into Redis?

Yes that's possible using a specific pattern. If you want to search all keys that start with myCacheKey:

var keys = myCacheClient.SearchKeys("myCacheKey*");

If you want to search all keys that contain with myCacheKey:

var keys = myCacheClient.SearchKeys("*myCacheKey*");

If you want to search all keys that end with myCacheKey:

var keys = myCacheClient.SearchKeys("*myCacheKey");

Can I use a Redis method directly from ICacheClient without adding another dependency to my class?

Of course you can. ICacheClient exposes a readonly property named Database that is the implementation of IDatabase by StackExchange.Redis

How can I get server information?

ICacheClient has a method GetInfo and GetInfoAsync for that:

var info = myCacheClient.GetInfo();

That's what the library does right now and I've to say thanks to ziyasal, ppanyukov and rajasekarshanmugam for the contribution.

The project is available on Github here

OWIN Succinctly: free ebook

2015-03-16T00:00:00+00:00

I'm very happy to announce that, from today, my first book is available here thanks to Syncfusion that is a popular company among developers for their great suites of controls. The ebook is focused on OWIN (Open Web Server Interface for .NET specification) and it's co-written with my friend Simone Chiaretta who is organizing with me the 2° Web European Conference.

It's a free ebook and, in 110 pages, it covers the most important things you need to know about OWIN from the basic stuff, like "What is OWIN" and "The Middleware", to more complex stuff like "Authentication using social networks" like Facebook, Twitter and Google with ASP.NET Identity and ASP.NET MVC.

Here is the TOC of the book:

OWIN
Katana
Using Katana with Other Web Frameworks
Building Custom Middleware
Authentication with Katana
Appendix

The book is distributed by Syncfusion for free, you just have to register and then you’ll be able to download it both in PDF and Kindle format. Of course if you have feedbacks or you find something that is not clear, that sounds strange or whatever, please don't hesistate to contact me

All you need to know about Redis

2015-03-05T00:00:00+00:00

I know, the title is a bit provocative or presumptuous if you prefer, but I think this post could be useful if you wanna approach to Redis as cache server using .NET. For all the people who don't know what Redis is, let me quote that definition:

Redis is an open source, BSD licensed, advanced key-value cache and store.

And why is it so cool? This is probably the best answer you can find on internet (source here):

Redis running on an entry level laptop can scan a 1 million key database in 40 milliseconds.

Installation

Now that is clear why Redis is so cool and why lot of enterprise applications use it, we can see how to use it. First of all we have to download Redis from here, unzip the file and run it locally

> redis-server.exe redis.conf

and the console output should be something like this:

if you want to use Redis on Microsoft Azure, you can do it by creating your instance here:

choose the best plan for you, the location, add your name in the proper field and create it.

creation could take a while and sometime you can get errors. The reason is that the portal is still in beta but don't worry, keep trying till you get the redis cache server up & running

Configuration

Here we go, Redis is up & running on your dev machine and/or on Azure if you choose it. Before to start writing code, it's important to choose the client library to use. The most used libraries are

The first one is free and opensource so, if you want to use it, you can do easily. The other one has a AGPL license (from 149$ to 249$).

if you prefer ServiceStack.Redis you can downgrade to version 3.9.71 which was the last truly free

In this article I'm going to use StackExchange.Redis so, let's start to install it using NuGet

PM> Install-Package StackExchange.Redis

There is also a StrongName (StackExchange.Redis.StrongName) package if you need to use it into a signed library.

Now, it's time to write some good code:

namespace imperugo.blog.redis
{
    class Program
    {
        private static ConnectionMultiplexer connectionMultiplexer;
        private static IDatabase database;

        static void Main(string[] args)
        {
            Configure();
        }

        private static void Configure()
        {
            //use locally redis installation
            var connectionString = string.Format("{0}:{1}", "127.0.0.1", 6379);

            //use azure redis installation
            var azureConnectionString = string.Format("{0}:{1},ssl=true,password={2}",
                                    "imperugo-test.redis.cache.windows.net",
                                    6380,
                                    "Azure Primary Key");

            connectionMultiplexer = ConnectionMultiplexer.Connect(connectionString);
            database = connectionMultiplexer.GetDatabase();
        }
    }
}

For some plans, Redis on azure uses SSL by default. If you prefer a no-secure connection you can enable it via Azure Portal, in this case use 6379 and remove ssl=true from the connection string

Add and Retrieve cache objects

StackExchange stores data into Redis sending/retrieving a byte[] or so, whatever you are storing into Redis must be converted into a byte[] (string is automatically converted by StackExchange.Redis implementation so we don't have to do it).

Let's start with simple object like a string

private static bool StoreData(string key, string value)
{
    return database.StringSet(key, value);
}

private static string GetData(string key)
{
    return database.StringGet(key);
}

private static void DeleteData(string key)
{
    database.KeyDelete(key);
}

and now we can use this methods

static void Main(string[] args)
{
    Configure();

    bool stored = StoreData("MyKey","my first cache string");

    if (stored)
    {
        var cachedData = GetData("MyKey");

        bool isIt = cachedData == "my first cache string";
    }
}

That's pretty simple but what about storing complex objects? As I wrote above, StackExchange.Redis stores only byte[] data so we have to serialize our complex object and convert it into a byte[] (there is an implicit conversion in case of string, for this reason we didn't convert the type string to byte[])

The easiest (and probably the best) way to store complex objects consists to serilize the object into a string before to store the data into Redis.

Choose your favorite serialized (NewtonSoft in my case ) and create some helpers like here

public bool Add<T>(string key, T value, DateTimeOffset expiresAt) where T : class
{
   var serializedObject = JsonConvert.SerializeObject(value);
    var expiration = expiresAt.Subtract(DateTimeOffset.Now);

    return database.StringSet(key, serializedObject, expiration);
}

public T Get<T>(string key) where T : class
{
    var serializedObject = database.StringGet(key);

    return JsonConvert.DeserializeObject<T>(serializedObject)
}

Now we are able to put and retrieve complex objects into Redis, next step is to remove it and check if the value exists

public bool Remove(string key)
{
    return database.KeyDelete(key);
}

public bool Exists(string key)
{
    return database.KeyExists(key);
}

if you need async methods, don't worry, StackExchange.Redis has an async overload for almost every method

Resources

Redis Commands absolutety the best reference to understand how Redis works and what StackExchage.Redis does under the table.

StackExchage.Redis documentation is absolutely helpful if you choose this library as your wrapper.

StackExchange.Redis.Extensions is a great library (and I suggest to you it) that wrap the common operation needed with StackExchange.Redis (basically you don't need to serialize objects or create helpers like I explained above):

Add complex objects to Redis;
Remove an object from Redis;
Search Keys into Redis;
Retrieve multiple objects with a single roundtrip;
Store multiple objects with a single roundtrip;
Async methods;
Retrieve Redis Server status;
Much more;

It uses Json.Net (NewtonSoft), Jil or Message Pack CLI to serialize objects into a byte[]. Anyway we'll see it with the next blog post.

Investigating Timeout Exceptions in StackExchange.Redis for Azure Redis Cache great article about possible timeout exception problem with Redis and Azure

Dashboard

Azure Dashboard

It offers basic stats but it's free when you use Redis with Microsoft Azure

Redsmin

Probably the most complete dashboard for Redis, offers a set of stats about your Redis servers, supports Azure and has a good prompt allowing you to run Redis command directly on the server without using C# or any other programming language. Unfortunately it is not free, here plans and pricing.

Redis Desktop Manager

Open Source tool for Windows, Mac and Linux hosted on Github here (right now it the version 0.7.6) offers to run Redis commands into Redis like Redismin, but unfortunately it doesn't support Azure yet (there is an issue about that opened here).

Redis Live

It's a real time dashboard for Redis written using Python.

Conclusions

Redis is absolutely one of the best in memory database available right now. There is a wrapper for every language, it's got a good documentation and it's free. If I were you I'd give it a look!

staytuned!

Redirect from http to https yes or no?

2015-02-17T00:00:00+00:00

In the previous post, I wrote about HTTP security, particularly about "special" headers. This post is partially related to the previous one, it means I am writing about security in a common scenario for web applications.

How many times did you add a redirect from an HTTP request to an HTTPS? I think you did it more than one time and, looking on internet, there are several simple solutions.

If you are using OWIN it's enough to create a custom Middleware like this:

public class ForceHttpsMiddleware : OwinMiddleware
{
    private readonly int port;

    public ForceHttpsMiddleware(OwinMiddleware next, int port) : base(next)
    {
        this.port = port;
    }

    public override Task Invoke(IOwinContext context)
    {
        if (context.Request.Uri.Scheme == "http")
        {
            var httpsUrl = string.Format("https://{0}:{1}{2}", context.Request.Uri.Host,
                port,
                context.Request.Uri.PathAndQuery);

            context.Response.Redirect(httpsUrl);
        }

        return Next.Invoke(context);
    }
}

Nothing complex here, but the question is: "Is it correct to redirect a user from an unsecure connection to a secure connection?" Basically the answer should be yes, but you must be careful about a particular scenario.

An unsecure request (HTTP) that includes a cookie and/or SessionId is subject to hijacking attacks and we don't want that to happen on our website. The easiest way to prevent this is to release the cookies only in a secure mode, it means that the cookies are not available from an unsecure request, but only from an HTTPS preventig a MITM (Man in the middle) attack.

Using Aspnet and Owin you can do it easily

app.UseCookieAuthentication(new CookieAuthenticationOptions
{
    AuthenticationType = "Cookies",
    CookieSecure = CookieSecureOption.Always,
    CookieHttpOnly = true
});

Here the most important part is CookieSecure property. It defines that only HTTPS request can access to cookie. To complete the security scenario, you could add also HTTP Strict Transport Security (HSTS) explained here.

Enjoy.

Security Headers using OWIN

2015-02-09T00:00:00+00:00

There are several ways to add security to our web application, sometime it could be difficult and requires several hours but, with a good architecture, it could be very easy

What some developers don't know is that there are some very useful HTTP Headers available that help your web application to be more secure with the support of the modern browsers.

The site OWASP has a list of the common security-related HTTP headers that every web application must have.

Strict-Transport-Security

also know as (HSTS), is an opt-in security enhancement that it's specified by a web application to enforce secure (HTTP over SSL/TLS) connections to the server preventing downgrate attacks like Man-in-the-middle.

Browser support:

Browser	Version
Internet Explorer	not supported
Firefox	from version 4
Opera	from version 12
Safari	from Mavericks (Mac OS X 10.9)
Chrome	from version 4.0.211.0

Options

Options	Description
max-age=31536000	Tells the user-agent to cache the domain in the STS list (which is a list that contains known sites supporting HSTS) for one year
max-age=31536000; includeSubDomains	Tells the user-agent to cache the domain in the STS list for one year and include any sub-domains.
max-age=0	Tells the user-agent to remove, or not cache the host in the STS cache

Example:

Strict-Transport-Security: max-age=16070400; includeSubDomains

X-Frame-Options

Provides Clickjacking protection.

Browser support:

Browser	DENY/SAMEORIGIN	ALLOW-FROM
Internet Explorer	from 8.0	from 9.0
Firefox	from version 3.6.9 (1.9.2.9)	from version 18.0
Opera	from version 10.50	not supported
Safari	from version 4.0	not supported
Chrome	from version 4.1.249.1042	not supported

Options

Options	Description
DENY	The page cannot be displayed in a frame, regardless of the site attempting to do so
SAMEORIGIN	The page can only be displayed in a frame on the same origin as the page itself
ALLOW-FROM http://www.tostring.it	The page can only be displayed in a frame on the specified origin.

Example:

X-Frame-Options: deny

X-XSS-Protection

This HTTP Header prevents Cross-site scripting (XSS) enabling the filters available in the most recent browsers.

Browser	Version
Internet Explorer	supported
Firefox	not supported
Opera	not supported
Safari	not supported
Chrome	supported

Options

Options	Description
0	Disables the XSS Protections.
1	Enables the XSS Protections.
1; mode=block	Enables XSS protections and prevents browser rendering if a potential XSS attack is detected
1; report=http://site.com/report	Available only for Chrome and WebKit allows to report the possible attack to a specific url sending data (using JSON and verb POST)

Example:

X-XSS-Protection: 1; mode=block

X-Content-Type-Options

This HTTP Header prevents the browsers from MIME-sniffing a response away from the declared content-type.

Options

The only option available here is nosniff

Example:

X-Content-Type-Options: nosniff

Content-Security-Policy

This HTTP Header (aka CSP) is very powerful and it requires a precise tuning because we need to specify all the trusted sources for our pages like Images, Script, Fonts, and so on.

With the correct configuration the browser doesn't load a not trusted source preventing execution of dangerous code.

Browser	Version
Internet Explorer	partial support starting from 9.0
Firefox	from version 4
Opera	from version 15
Safari	partial support starting from 5.1, total support from 6
Chrome	from version 14

Options

Options	Description
default-src	Specify loading policy for all resources type in case one of the following directive is not defined (fallback)
script-src	The script-src directive specifies valid sources for JavaScript
object-src	The object-src directive specifies valid sources for the `<object>`, `<embed>`, and `<applet>` elements.
style-src	The style-src directive specifies valid sources for stylesheets.
img-src	The style-src directive specifies valid sources for images and favicons.
media-src	The media-src directive specifies valid sources for loading media using the `<audio>` and `<video>` elements.
frame-src	The frame-src directive specifies valid sources for web workers and nested browsing contexts loading using elements such as `<frame>` and `<iframe>`
font-src	The font-src directive specifies valid sources for fonts loaded using @font-face
connect-src	The connect-src directive defines valid sources for XMLHttpRequest, WebSocket, and EventSource connections
form-action	The form-action directive specifies valid endpoints for `<form>` submissions
plugin-types	The plugin-types directive specifies the valid plugins that the user agent may invoke.
reflected-xss	Instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks, equivalent to the effects of the non-standard X-XSS-Protection header
report-uri	The report-uri directive instructs the user agent to report attempts to violate the Content Security Policy (send json using post)

Example:

Content-Security-Policy: default-src 'self'

Now that we know all these header, let's see how to implement them on our applications. As usual there are several ways to configure the HTTP Headers, we can do it using WebServer configuration (IIS and Apache support that) or, if we use owin, we can do it using a sample middleware without configuring the webserver.

The last one is absolutely my favorite implementation because I can switch the webserver without configuring anything (that's is one of the reason why Owin was created).

Anyway let's start to add SecurityHeadersMiddleware

PM> Install-Package SecurityHeadersMiddleware

and now to configure it is very easy


var contentSecurityPolicy = new ContentSecurityPolicyConfiguration();

//Content-Security-Policy header 

//Configuring trusted Javascript
contentSecurityPolicy.ScriptSrc.AddScheme("https");
contentSecurityPolicy.ScriptSrc.AddKeyword(SourceListKeyword.Self);
contentSecurityPolicy.ScriptSrc.AddKeyword(SourceListKeyword.UnsafeEval);
contentSecurityPolicy.ScriptSrc.AddKeyword(SourceListKeyword.UnsafeInline);
contentSecurityPolicy.ScriptSrc.AddHost("cdnjs.cloudflare.com");

//Configuring trusted connections
contentSecurityPolicy.ConnectSrc.AddScheme("wss");
contentSecurityPolicy.ConnectSrc.AddScheme("https");
contentSecurityPolicy.ConnectSrc.AddKeyword(SourceListKeyword.Self);

//Configuring trusted style
contentSecurityPolicy.StyleSrc.AddKeyword(SourceListKeyword.Self);
contentSecurityPolicy.StyleSrc.AddKeyword(SourceListKeyword.UnsafeInline);
contentSecurityPolicy.StyleSrc.AddHost("fonts.googleapis.com");

//Configuring fallback
contentSecurityPolicy.DefaultSrc.AddKeyword(SourceListKeyword.Self);

//Configuring trusted image source
contentSecurityPolicy.ImgSrc.AddHost("*");

//Configuring trusted fonts
contentSecurityPolicy.FontSrc.AddKeyword(SourceListKeyword.Self);
contentSecurityPolicy.FontSrc.AddHost("fonts.googleapis.com");
contentSecurityPolicy.FontSrc.AddHost("fonts.gstatic.com");

app.ContentSecurityPolicy(contentSecurityPolicy);

//X-Frame-Options
app.AntiClickjackingHeader(XFrameOption.Deny);

//X-XSS-Protection
app.XssProtectionHeader();

Here the github repository.

Have fun and make your application secure.

Speed up WebAPI on Microsoft Azure

2015-01-20T00:00:00+00:00

One of my favorite features of ASP.NET WebAPI is the opportunity to run your code outside Internet Information Service (IIS). I don’t have anything against IIS, in fact my tough matches with this tweet:

But System.Web is really a problem and, in some cases, IIS pipeline is too complicated for a simple REST call.

we fix one bug and open seven new one (unnamed Microsoft employee on System.Web)

Another important thing I like is cloud computing and Microsoft Aure in this case. In fact, if you want to run your APIs outside IIS and you have to scale on Microsoft Azure, maybe this article could be helpful.

Azure offers different ways to host your APIs and scale them. The most common solutions are WebSites or Cloud Services.

Unfortunately we can’t use Azure WebSites because everything there runs on IIS (more info here) so, we have to use the Cloud Services but the question here is Web Role or Worker Role?

The main difference among Web Role and Worker Role is that the first one runs on IIS, the domain is configured on the webserver and the port 80 is opened by default; the second one is a process (.exe file to be clear) that runs on a “closed” environment.

To remain consistent with what is written above, we have to use the Worker Role instead of the Web Role so, let’s start to create it following the steps below:

Now that the Azure project and Workrole project are ready, It's important to open the port 80 on the worker role (remember that by default the worker role is a close environment).

Finally we have the environment ready, It’s time to install few WebAPI packages and write some code.

PM> Install-Package Microsoft.AspNet.WebApi.OwinSelfHost

Now add OWIN startup class

and finally configure WebAPI Routing and its OWIN Middleware

using System.Web.Http;
using DemoWorkerRole;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof (Startup))]

namespace DemoWorkerRole
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            var config = new HttpConfiguration();

            // Routing
            config.Routes.MapHttpRoute(
                "Default",
                "api/{controller}/{id}",
                new {id = RouteParameter.Optional});

            //Configure WebAPI
            app.UseWebApi(config);
        }
    }
}

and create a demo controller

using System.Web.Http;

namespace DemoWorkerRole.APIs
{
    public class DemoController : ApiController
    {
        public string Get(string id)
        {
            return string.Format("The parameter value is {0}", id);
        }
    }
}

Till now nothing special, the app is ready and we have just to configure the worker role that is the WorkerRole.cs file created by Visual Studio.

What we have to do here, is to read the configuration from Azure (we have to map a custom domain for example) and start the web server.

To do that, first add the domain on the cloud service configuration following the steps below:

finally the worker role:

using System;
using System.Diagnostics;
using System.Net;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.Owin.Hosting;
using Microsoft.WindowsAzure.ServiceRuntime;

namespace DemoWorkerRole
{
    public class WorkerRole : RoleEntryPoint
    {
        private readonly CancellationTokenSource cancellationTokenSource = new CancellationTokenSource();
        private readonly ManualResetEvent runCompleteEvent = new ManualResetEvent(false);

        private IDisposable app;

        public override void Run()
        {
            Trace.TraceInformation("WorkerRole is running");

            try
            {
                RunAsync(cancellationTokenSource.Token).Wait();
            }
            finally
            {
                runCompleteEvent.Set();
            }
        }

        public override bool OnStart()
        {
            // Set the maximum number of concurrent connections
            ServicePointManager.DefaultConnectionLimit = 12;

            string baseUri = String.Format("{0}://{1}:{2}", RoleEnvironment.GetConfigurationSettingValue("protocol"),
                RoleEnvironment.GetConfigurationSettingValue("domain"),
                RoleEnvironment.GetConfigurationSettingValue("port"));

            Trace.TraceInformation(String.Format("Starting OWIN at {0}", baseUri), "Information");

            try
            {
                app = WebApp.Start<Startup>(new StartOptions(url: baseUri));
            }
            catch (Exception e)
            {
                Trace.TraceError(e.ToString());
                throw;
            }

            bool result = base.OnStart();

            Trace.TraceInformation("WorkerRole has been started");

            return result;
        }

        public override void OnStop()
        {
            Trace.TraceInformation("WorkerRole is stopping");

            cancellationTokenSource.Cancel();
            runCompleteEvent.WaitOne();

            if (app != null)
            {
                app.Dispose();
            }

            base.OnStop();

            Trace.TraceInformation("WorkerRole has stopped");
        }

        private async Task RunAsync(CancellationToken cancellationToken)
        {
            // TODO: Replace the following with your own logic.
            while (!cancellationToken.IsCancellationRequested)
            {
                //Trace.TraceInformation("Working");
                await Task.Delay(1000);
            }
        }
    }
}

we are almost done, the last step is to configure the right execution context into the ServiceDefinistion.csdef

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="imperugo.demo.azure.webapi" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition" schemaVersion="2014-06.2.4">
    <WorkerRole name="DemoWorkerRole" vmsize="Small">
        <Runtime executionContext="elevated" />
        <Imports>
            <Import moduleName="Diagnostics" />
        </Imports>
        <Endpoints>
            <InputEndpoint name="Http" protocol="http" port="80" localPort="80" />
        </Endpoints>
        <ConfigurationSettings>
            <Setting name="protocol" />
            <Setting name="domain" />
            <Setting name="port" />
        </ConfigurationSettings>
    </WorkerRole>
</ServiceDefinition>

Here the important part is Runtime node. That part is really important because we are using the HttpListener to read the incoming message from the Web and that requires elevated privileges.

Now we are up & running using WebAPi hosted on a Cloud Service without using IIS.

The demo code is available here.

Have fun.

NodeJs for .NET Developers talk during Codemotion in Milan

2014-12-02T00:00:00+00:00

It’s been a while since my last blog post; Unfortunately I’ve been very busy in the latest months for due to some important deliveries for the company I'm working for.

During the past two days one of my favorite conference, Codemotion, has been in Milan and fortunately I had a talk about NodeJS for .NET Web Developers.

The code used for the demo is available on github here (the most important demo is the Sample 004) and the slides are available on Slideshare and below:

Nodejs for .NET web developers from Ugo Lattanzi

I had a good feeling about the talk, the room was full of people, lot of questions and feedback. It means there is interest about Node from .NET people.

Introducing Event Starter Kit

2014-09-02T00:00:00+00:00

One month ago we announced (here more info) the next edition of Web European Conference.

We tried this year to replicate the conference but we got some problems with the venue. This time it seems it's going better; we don't have the venue confirmed yet, but we have good feeling about that.

Anyway, with the conference an important Open Source project was born, we (Simone and I) called it Event Starter Kit (ESK).

The idea is to create something that helps people to organise a conference with a small effort. In our case, the conference is a tech one, but of course, you can use ESK for all kind of conferences.

For this reason we are working on several repositories in the same time:

Launch page;
Blog;
Web site;
Mobile app (iOS, Android and Windows Phone);

of course we didn't complete everything yet except for the Launch Page and the blog. We planned to complete the project with the Conference, so spring 2015, but of course part of the project must be completed early (like the website).

For this reason we need help :heart_eyes:

If you wanna collaborate, contact me or send a PR (see the complete documentation about the project here).

Website and APIs are written using NodeJs + Mongo and, for the mobile apps, we are using Xamarin.

Work on ESK is really funny because we are also integrating several external services with our application like:

Twitter (for login/registration and sharing)
Facebook (for login/registration and sharing)
Github (for login because we are nerd);
Mailchimp (for newsletter);
Eventbrite (for event registration)
Disqus (for comments)
Slideshare (for presentation slides)
Vimeo (for video sessions)
Paypal (for donations)

Why Node and Xamarin?

I would like to do this using ASP.NET vNext but it seems we have to wait a bit before we can use it on a production environment. So Node is the perfect solution because we don't want to impose the choice of server so, if you wanna go on Linux you can, same for Windows (right now we are using Microsoft Azure)

About Xamarin I think it's almost clear, same code with 3 different output (iOS, Android and Windows Phone).

We created a Github organization with all repositories (see it here) and other info about the project are available here.

We are looking for several roles, starting from Front-end developer (compass, bootstrap, angular and so on) till backend (nodejs, mongodb).

What are you waiting for? Join us here

NodeJs, Azure and IIS

2014-07-09T00:00:00+00:00

Yesterday I spent some time to understand a problem with a Node Js application on Microsoft Azure. To be quick, my code was a simple web application built on top of Express and the code was something like this:

var express = require("express");
var app = express();

.... configure express

var port = Number(process.env.port || 5000);

app.listen(port, function() {
    logger.info("Listening on " + port);
});

Running locally the code works very well both if you run it on your dev environment or a server. Unfortunately it doesn't work if you try to run it on Microsoft Azure Website. But Why?

Adding some log I identified the problem on the port environment, basically process.env.port returns a string instead of a number (to be precise it was \\.\pipe\e289ed7e-b57b-46bb-8bba-ad8cd1f1529c) f The solution is easy, do not try to convert it to a number but pass it as is to node:


var port = process.env.port || 5000;

app.listen(port, function() {
    logger.info("Listening on " + port);
});

The reason is that Node is not running on its process like on local machine (node app.js to be clear), but it's mapped under IIS using IISNode with a wildcard on an HTTP Handler using named pipe

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>         
      <handlers>
           <add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
     </handlers>
      <rewrite>
           <rules>
                <rule name="StaticContent">
                     <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                     <conditions>
                          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                     </conditions>
                     <action type="Rewrite" url="app.js"/>
                </rule>
           </rules>
      </rewrite>
    <iisnode 
      debuggingEnabled="false"
      logDirectory="..\..\LogFiles\nodejs" 
      watchedFiles="*.js;iisnode.yml;node_modules\*;views\*.jade;views\*.ejb;routes\*.js;views\*.vash" />
   </system.webServer>
 </configuration>

For confirmation, I wrote to David Ebbo via twitter getting this answer:

Unfortunately (or not), right now there is no way to run Node outside of IIS on Azure Websites but maybe it's not a problem, it works :smirk:

Top "Must Know" Frameworks for .NET web developers

2014-06-30T00:00:00+00:00

The idea of this post is born talking with my colleague Antonio about the frameworks a .NET web developer should know (from my point of view of course). That's funny because the list is very long and I asked myself if there is something wrong with my idea of .NET web developer or something else.

From my point of view (and also for my company) there are two kind of web developers, Back End (server side code) and Front End (javascript, css and HTML). Unfortunately, in Italy, these figures matches in only one person and the quality of the product obviously falls.

Back End Developer

ASP.NET MVC

Website: http://www.asp.net/mvc

Source code: http://aspnetwebstack.codeplex.com/

Most of our application runs on top of ASP.NET MVC, so for me it's really important to know it. I think it's a good framework, with a lot of extensibility points, good implementation of the MVC pattern, and we use it in heavy traffic projects without particular problems. Of course there are few things I don't like of it (first of all System.Web), but fortunately the vNext will solve these "problems".

ASP.NET WEBAPI

Website: http://www.asp.net/web-api

Source code: http://aspnetwebstack.codeplex.com/

ASP.NET Web API is probably the best solution if you know ASP.NET MVC and you don't have time to learn something else like NancyFx, NodeJs and so on; The approach is very similar to MVC (Controller + Action). Fortunately it doesn't have the dependency to System.Web but it's a Framework totally separate from MVC and sometime you have to duplicate the same code on MVC and Web API because the same interface/class has a different namespace.

SignalR

Website: http://www.asp.net/signalr

Source code: https://github.com/SignalR/SignalR

I'm not sure if an another Framework for real time applications exists in .NET world, but surely SignalR it is the most famous and used. Build by the same team of ASP.NET MVC / Web API it offers several clients (iOS and Android with Xamarin, Windows 8 and Windows Phone) and finally it supports old browsers (with fallback of course forever-frame, polling and son on).

NancyFX

Website: http://nancyfx.org/

Source code: https://github.com/NancyFx/Nancy

Nancy is a lightweight framework for building HTTP based services on .Net and Mono (yes it runs on linux and OSX). The main difference between Nancy and Web API is the routing approach. It uses lambdas to identify relative paths and arguments. Really helpful if you can't deploy on a Windows Server.

Common Logging

Website: http://netcommon.sourceforge.net/

Source code: https://github.com/net-commons/common-logging

I really like this library. When I need to deploy my code side by side with another application or I have to use a specific logging framework, Common Logging is the perfect solution. It is an abstraction of different logging implementations like Log4net, NLog, Enterprise library or whatever you want (you can write your custom bridge). Like many frameworks in the .NET world, this is a porting of a Java Framework (here more info). Really useful!

Windsor Container

Website: http://www.castleproject.org/

Source code: https://github.com/castleproject/Windsor

Probably the first package I add in a new project. I'm really a Dependency Injection addicted and Castle Windsor fits very well with my needs. It's fast, easy to use, all needed lifecycle and offers lot of extension point (Interceptor, custom lifecycle, factories and so on).

Automapper

Website: http://automapper.org/

Source code: https://github.com/AutoMapper/AutoMapper

In my Italian blog I wrote about the importance to use a DTO for the views and the responses instead of the Domain Model. Automapper is absolutely the best framework to "copy" data from an entity to a DTO. Easy to use, fast and extensible it's the second package I install on a new project. A must.

Service Stack

Website: https://servicestack.net/

Source code: https://github.com/ServiceStack

An extremely interesting set of Frameworks. It contains a Json serializer, ORM, Redis client and Service Clients. This set of Frameworks matches perfectly with those who are obsessed with performance. The tagline of the Framework is "Simplicity at Speed". Here a good presentation about ServiceStack and performances in .NET application

Quartz.NET

Website: http://www.quartz-scheduler.net/

Source code: https://github.com/quartznet/quartznet

Quartz.NET is a job scheduling system for small or large applications. Like Common Logging, this is a porting from a Java project (here more info). It offers several ways to run a job, from Cron pattern to special calendar, or whatever you like. The nice thing is you can have a storage for your jobs (configurable SQL, Mongo, MySql .....) very useful for scalable applications.

Cache Cow

Source code: https://github.com/aliostad/CacheCow

Caching is really important, specially if you application must answer to lot of requests. The best way to keep performance acceptable is to reduce the number of operation, specially if request and response are the same for most of the total requests. Cache Cow is a Framework built by my Twitter friend @aliostad and it offers an easy way to cache HTTP requests (both from client and server) using WEB API. With few line of code, you can have a good caching in your favorite storage (Redis, Azure Caching, Sql Server and so on).

Redis

Website: http://redis.io/

Source code: https://github.com/antirez/redis

Redis is an open source caching Framework that offers an advanced Dictionary (key/value) storage. Recently it's available (as preview) also on Windows Azure (here a good article explains how to use redis with MVC and Azure). The Performance of this Framework are great: it is very fast, and it also available on distributed infrastructures. If you go in a multi-server application, probably it is the best solution.

XUnit

Source code: https://github.com/xunit/xunit

This is the most active testing framework for .NET applications. It's used on lot of the Frameworks mentioned in this post (MS Stack included). It has support for Resharper, CodeRush Test Runner and Xamarin Test Runner.

Autofixture

Source code: https://github.com/AutoFixture/AutoFixture

It's a framework that helps developers to do Test-Driven Development by automating non-relevant Test Fixture Setup. Really I'm not a fan of TDD but Autofixture contains several features like Automock (helpful if you change frequently the constructor dependencies) and AutoMoqData that can help all developers.

Sharp Tests Ex

Source code: http://sharptestex.codeplex.com/

It's a library born to wrap all testing framework using a fluent syntax. Usually I don't change often the testing framework but sometime I need to copy part or my code to an existing application that uses NUnit or MS-Test. In this case the only thing to do is change the Testing attribute in the test class.

Front End Developer

Sass

Website: http://sass-lang.com/

Source code: https://github.com/sass/sass

Sass (Syntactically Awesome Style Sheets) is an extension to CSS. It is CSS as it should have been. Its key features are the ability to use variables, nesting, mixins and loops within your code. This means you can code more quickly and keep your code neat, tidy and easy to maintain. The Sass or SCSS code you write is then compiled in to standard CSS as browsers can't (yet) understand Sass / SCSS.

Also take a look at Compass, it is a great framework for Sass that contains loads of reusable mixins... no more memorising vendor prefixes and obscure pre-spec CSS3 styles!

Bootstrap

Website: http://getbootstrap.com/

Source code: https://github.com/twbs/bootstrap

Created by the guys at Twitter, Bootstrap gives you a massive selection of reusable, robust and attractive styles for your everyday styling needs. It includes a responsive, mobile-first grid system, basic typography styles, styles for common elements such as buttons and form inputs and lots more. Bootstrap is perfect for rapid prototyping but don't use it for everything otherwise we'll end up with all sites looking the same!

Bower

Website: http://bower.io/

Bower is a front-end package management tool, you use it to speed up your dev workflow. It allows you to simply install packages and their dependencies in your project using the command-line. No more Googling for the latest version of jQuery, downloading it, unzipping it, copying it into your project etc... just: $ bower install jquery

Grunt

Website: http://gruntjs.com/

Source code: https://github.com/gruntjs/

Like Bower, Grunt is another dev tool that can be run from the command-line. It is a JavaScript task runner which allows you to automate pretty much anything... minification, unit testing, compiling of Sass, code linting, image compression, launching a node server, creation of documentation, whatever you like. There are many, many Grunt Plugins available which do the most common tasks so it is easy to get started.

Yeoman

Website: http://yeoman.io/

Source code: https://github.com/yeoman/yeoman

Yeoman makes using Grunt and Bower even easier. It allows you to scaffold out a project very quickly using a "Generator". The Generator will create a bare-bones (boilerplate) project architecture, with certain libraries, frameworks, Grunt tasks and Bower dependencies pre-installed. Different Generators are available for different projects. For example if you are starting a new AngularJS app, you would use the Angular Generator and run $ yo angular and it will set up the architecture, along with basic units tests, install AngularJS and Bootstrap (if you want it).

AngularJS

Website: https://angularjs.org/

Source code: https://github.com/angular/angular.js

AngularJS is an open-source MVC JavaScript framework created by Google - it allows you to very quickly extend HTML's capabilities and create powerful, highly testable web applications. Angular includes two-way declarative data-binding which greatly simplifies complex application development as much of the DOM manipulation is handled automatically by the framework. It is (fairly) well documented and there is an active support community on Stack Overflow.

Karma

Website: http://karma-runner.github.io/

Source code: https://github.com/karma-runner/karma/

Karma (formerly Testacular) is a framework agnostic test runner. You write your unit tests alongside your application code and you can automatically test your code as you develop. Karma allows you to test your code in real browsers on real devices or in PhantomJS. It is definitely worth watching the introduction video from creator Vojta Jína.

Jasmine

Website: http://jasmine.github.io/

Source code: https://github.com/pivotal/jasmine

Jasmine is a framework for testing JavaScript code. You can use Jasmine to write your unit tests and then run them using Karma. The syntax of Jasmine is very clear and easy to understand, yet powerful.

If you want to take things further take a look at Jest (by Facebook), it is built on top of Jasmine, and adds some additional levels to Jasmine's feature-set.

Conclusion

It's an hard life for our developers.

Thanks to my friend Daniel Crisp for the support in this post

Advanced logging with NodeJs

2014-06-23T00:00:00+00:00

As I wrote in my previous post here, Node Js is becoming a part of my dev life and today I'm gonna write about logging.

Every good application must have a good logging and NodeJs, as all Frameworks, offers several ways to save information.

Unfortunately the most used is the classic console.log method that's a quick and dirty solution. For all people like me that usually use a robust Framework like Log4Net or NLog, console.log doesn't fit so well with my requirements.

All these Frameworks offer the opportunity to add more than one Appender to the same logger instance.

What's an appender?

Basically It's a simple way to have more than one output during logging. To be clearer let's try to think about an application where you want to see your logging in the console, but also in a file or an external service like Raygun.

In my Node sample repository I created a demo of a simple web page (using Express) configuring the web server with the most needed middleware and some logs.

The result of the log is this:

As you can see there are just few lines of log but, when you do something more complex, the number of lines could be a lot and difficult to read. The problem here is that lot of them are only debug log but some of them could be errors. Using the same color is difficult to understand what is the error and what is not.

A good solution is to use a logging framework that helps us to log into the console using different colors (red for errors, yellow for warnings and so on) and, in production, switch the log to a file or database.

Winston is the equivalent to Log4Net/Log4J/NLog in a NodeJs world. It offers the opportunity to use the Appenders and, in our case, colored console.

npm install winston --save

now it's enough to configure it. I've logger.js with its configuration

var winston = require('winston');
winston.emitErrs = true;

var logger = new winston.Logger({
    transports: [
        new winston.transports.File({
            level: 'info',
            filename: './logs/all-logs.log',
            handleExceptions: true,
            json: true,
            maxsize: 5242880, //5MB
            maxFiles: 5,
            colorize: false
        }),
        new winston.transports.Console({
            level: 'debug',
            handleExceptions: true,
            json: false,
            colorize: true
        })
    ],
    exitOnError: false
});

module.exports = logger;
module.exports.stream = {
    write: function(message, encoding){
        logger.info(message);
    }
};

The most important thing is the transports section where you can specify your Appenders. In this example, I want to log into a file with verbosity level set to info, max 5 files and 5 MB for each and I want a complete full log (verbosity level debug) in the terminal but the different level should use different colors.

The result is pretty nice:

and

for the file.

I think that's absolutely more readable if you have different colors in the console app. Another cool thing is that you can switch on/off some logging just changing the level property in the transport configuration.

In my example, I used Express as MVC framework to render HTML. It offers the opportunity to put you log to have some info about the HTTP Requests.

So, here is the code:

var logger = require("../utils/logger");

var express = require("express");
var app = express();

logger.debug("Overriding 'Express' logger");
app.use(require('morgan')({ "stream": logger.stream }));

The only importat thing here is the middleware, app.use where logger.stream comes from the logger configuration file.

All my code is available on my Node Sample github repository available here

Express 4 moved some middleware outside of Express packages, so you have to install it manully (more info here). If you are using an older version of Express my code needs some changes because of middleware.

How to get notifications from a Windows Azure website

2014-06-16T18:37:42+00:00

In my company we switched from Team Foundation Server to Github more than one year ago and we are really happy. In the same period we switched all our server to Windows Azure (Virtual Machine, Web Sites and Cloud Services) and we are equally happy.

The Azure team works very well and I love to deploy my web sites using Github (there are sevaral providers so, if you don't use github don't worry, you'll find the solution that fits best your needs).

If you are intersted in how to push your code to Azure website using Git, here there is a cool post and here there's also an engine used for the deploy based on NodeJs

The problem about this approach is that I need to be notified when someone of the team deploy something, especially if the deploy fails. Unfortunately right now Windows Azure doesn't send you any notification about a deploy procedure, so you have to remind yourself to go in the administration portal and check the deploy status (see the image below).

Zapier is the solution to this problem. It allows you to select from many sources, to select an event and to attach an action. In my case it means something like "For each failed Azure Website deploy call my phone and read me the report" (You can get a email, sms or whatever you want).

Here the workflow to configure Zapier:

Select the services (here the complete list of the available services)

Write your condition

Compose the message

How f...ing cool is that?

How to configure a cluster with Node Js

2014-06-03T00:00:00+00:00

In the last period I'm working a lot with Node JS and, for a developer like me who loves C# and .NET, I'm still not sure I really love Node :confused:

The first impression is positive but I don't know if it's just because I'm playing with something new or if I really like the approach; however, for the moment, now I'm happy with it.

This friday I was explaining my experience with Node to my colleague speaking about the differences between Node and .NET.

From my point of view the biggest difference among .NET and Node is the async implementation. The first one is MTA (multi thread application) and the second one is STA (single thread application).

STA means you can't open a thread to execute something so your application can manage only one request per time.

Ok, that's absolutely fault because Node is smart :smile:

It's true that Node is STA but it is async by default, in fact when you do something that goes outside of your application (database query, I/O, web request and so on) Node uses the thread to do other stuff like answer to another request, execute other code in you application and so on.

That means Node is really really optimised, in fact the performance among .NET and Node JS are very similar and, in several case, Node is faster than .NET.

But how to increase the number of process with Node so that you can have a good scaling system?

In the .NET world you can find something similar is ASP.NET (hosted on IIS) and it's called "web garden", in Node instead it's called Cluster. Basically there are more than one active process and a "manager".

In that scenario you can use one process for each core of you computer, so your Node application can scale better with you hardware.

Basically it's like running 'node app.js' for each core you have, and another process to manage them all.

First step, install some packages:

npm install cluster --save

The goal of this example is to create one process for each core, so the first thing to do is to read the number of cores installed on your laptop:

var cluster = require('cluster');

if (cluster.isMaster) {
  var numCPUs = require('os').cpus().length;
  for (var i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  Object.keys(cluster.workers).forEach(function(id) {
    console.log(cluster.workers[id].process.pid);
  });
}

cluster.isMaster is necessary to be sure that you are forking it just one time.

Now if you run the app you should have one process for each core, plus the master

In my case I've 8 core, so 9 process because of master.

The next step is to add a webserver, so

npm install http --save

and put your logic for each fork:

var cluster = require('cluster');
var http = require('http');

if (cluster.isMaster) {
  var numCPUs = require('os').cpus().length;
  for (var i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  Object.keys(cluster.workers).forEach(function(id) {
    console.log(cluster.workers[id].process.pid);
  });
} else{

  // Create HTTP server.
  http.Server(function(req, res) {
    res.writeHead(200);
    res.end("This answer comes from the process " + process.pid);

  }).listen(8080);
}

Now calling the webserver you can see which process is answering your request:

Because the code is too simple, probably you'll get the same 'pid' for each request from your browser. The easier way to test it is to lock the thread (yes, I said that) so the "balancer" can switch the request to another process demonstrating the cluster.

In Node there isn't something like Thread.Sleep, so the best way to lock a thread is create something that keeps it busy, something like an infinite loop :smirk:

var cluster = require('cluster');
var http = require('http');

if (cluster.isMaster) {
  var numCPUs = require('os').cpus().length;
  for (var i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  Object.keys(cluster.workers).forEach(function(id) {
    console.log(cluster.workers[id].process.pid);
  });
} else{

  // Create HTTP server.
  http.Server(function(req, res) {
    res.writeHead(200);
    res.end("This answer comes from the process " + process.pid);

    //that's just for example
    while(true){

    }

  }).listen(8080);
}

If you want to manage all the processes and to log some events, it could be helpful to track some events for each process and to send a message from the "worker" to the "master" or to check when a process dies.

To do that it's necessary to use message event on the worker, so here's the code:

var cluster = require('cluster');
var http = require('http');

if (cluster.isMaster) {

  console.log("Master pid: " + process.pid);

  var numberOfRequests = 0;

  var numCPUs = require('os').cpus().length;
  for (var i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  Object.keys(cluster.workers).forEach(function(id) {
    console.log('creating process with id = ' + cluster.workers[id].process.pid);

    //getting message
    cluster.workers[id].on('message', function messageHandler(msg) {
      if (msg.cmd && msg.cmd == 'notifyRequest') {
        numberOfRequests += 1;
      }

      console.log("Getting message from process : ", msg.procId);
    });

    //Getting worker online
    cluster.workers[id].on('online', function online()
    {
      console.log("Worker pid: " + cluster.workers[id].process.pid + " is online");
    });

    //printing the listening port
    cluster.workers[id].on('listening', function online(address)
    {
      console.log("Listening on port + " , address.port);
    });

    //Catching errors
    cluster.workers[id].on('exit', function(code, signal) {
      if( signal ) {
        console.log("worker was killed by signal: "+signal);
      } else if( code !== 0 ) {
        console.log("worker exited with error code: "+code);
      } else {
        console.log("worker success!");
      }
    });
  });

  //Printing number of requests
  setInterval(function(){
    console.log("Handled " + numberOfRequests + " requests");
  }, 3000);

} else {

  // Create HTTP server.
  http.Server(function(req, res) {
    res.writeHead(200);
    res.end("This answer comes from the process " + process.pid);

    console.log("Message sent from http server");

    // Notify master about the request
    process.send({ cmd: 'notifyRequest', procId : process.pid });


  }).listen(8080);
}

I've created a repository on github with some demos about Node.js (including this one). You can find the repository here.

Have fun.

Bye bye Wordpress, welcome Github pages

2014-05-21T00:00:00+00:00

During the last year I used Wordpress for my blog, but I never really liked it. I'm not in love with Wordpress and there are several reason that I try to explain here:

Maintenance;
Hosting;
Updates;
Backup;
Test environment;
Performance;

I'm not saying that Wordpress is not good, I'm saying that it doesn't match my requirements. From my point of view (now) a blog engine is something where I can write a post in an easy way.

Moreover, in the past years I created a blog engine (never completed) based on .NET technologies, its name is Dexter and it's available on Github here. IMHO it is/was better than Wordpress, but with many of the problems mentioned above (my mistake).

Some weeks ago, David Ebbo synthesised in this post my idea of blog engine (for a nerd of course)

So, everything has started from that post and I migrated first my italian blog, than this blog.

Why Jekyll?

It offers important advantages; the most important is that it doesn't require server side code :thumbsup:

Finally it's easy to use for a developer. The setup guide is available here (if you are running Windows I suggest to follow this guide.)

Basically it's built on ruby and it generates static files (simple .html files) with the correct folder structure for pagination, custom pages, permalinks and so on.

Of course you can't do some stuff like comments and search, but this is not a problem because there are several external services that offer for free search and comments (Facebook, Google and Disqus in my case).

Moreover there is another cool advantage of moving your blog to Jekyll, and it's Github Pages.

Github offers for all its users the opportunity to have a free hosting for static files creating a repository named yourgithubusername.github.io.

Once you have created the repository it's just necessary to push your static files into it and navigate to http://yourgithubusername.github.io

That's all!

Here the problem could be that Jekyll generates static files only after a compilation, so you should compile and then push. Fortunately there is a solution also for this, Github Pages offers the Jekyll compilation and you don't have to do that (here a complete guide).

So, now you have free hosting, amazing performance (your HTML is hosted on Github CDN), everything is managed by a Git repository (so you have the history of all posts (here an example)) and you can use your custom domain.

To be synthetic:

Create a new Markdown file into _posts folders;
Write the post;
Push on github repo

Github will compile the static files for you. Do you wanna know how fast & reliable is Github with Jekyll? Take a look to this report (remember that my skin is not optimised, lot of requests):

If I convinced you to use Github, below some advice:

To migrate your posts use this (it supports several sources like Wordpress, xml, rss and so on);
If you add the license on github, you can also create/modify/delete posts directly for Github website, so you don't have to setup your environment. Read this post;
Enable some cool Gems like I did here;
To render the emoji (the point above is mandatory) remember the right syntax;
Be careful with the redirect if you change the url permalink (take a look here).
If Atom is your favorite Markdown editor, install this package;
Good free editor for Windows available here;
If you wanna create your custom skin, I suggest to start with Jekyll Bootstrap available here.

If you want something with more features, but you like the speed and the idea of static files, take a look to Octopress.

Enjoy it!

Owin and Katana talk in Paris

2014-05-16T00:00:00+00:00

After coming back from my long day in Paris, I finally uploaded the slides and demos of my talk with Simone about Owin and Katana.

The code used during the speech is available on Github here.

You can find 5 demos:

01.OwinIIS: Demo of running Katana on IIS Host
02.OwinHost: Demo of running Katana on OwinHost.exe
03.OwinSelfHost: Demo of running Katana on self host and with custom error page
04.OwinWebAPI: Running WebAPI on top of Katana
05.OwinMiddleware: example of using 3 different middlewares in the Owin pipeline. The 3 middlewares are built using 3 different approaches.

As usual the slides are available on Slideshare here, but you can read them also from this post.

Finally I've to say thanks to all the people who come to the conference, and a special thanks to Rui, ncrafts conference was amazing!

Hope to see you next year!

Owin, Katana and NCrafts

2014-04-22T00:00:00+00:00

Recently I've been writing and reading lots of articles/tweets about OWIN and its implementation Katana.

The reason is pretty simple, I'm writing a book with Simone Chiaretta about OWIN for Syncfusion. The book is part of their “Succinctly” e-book series, so nothing big and complicated, just all you need to know about OWIN/Katana and how to use them in your application.

For this reason we are really focused on OWIN. In the meantime, our friend Rui Carvalho organized a super cool conference in Paris named NCrafts.

It is "dangerous" combo because the conference looks really amazing and I'll speak with Simone about OWIN :-)

All jokes aside, the conference will be really awesome (Web, Cloud, Data and so on) so, if you don't have anything planned for the 16 May, hurry up and come to Paris (all the conference info is here).

I'd like to finish the post with a quote from the NCrafts web site:

In other words, we love building software with art, passion and technology and share with everyone.

How to use CORS with ASP.NET Web API 2.0

2014-03-04T00:00:00+00:00

With the latest version of ASP.NET Web API, Microsoft introduced support for cross domain requests, usually called CORS (Cross-Origin Resource Sharing)

By default it's not possible to make HTTP requests using Javascript from a source domain that is different from the called endpoint. For example, this means that it's not possible to call the URL http://mysite.com/api/myrestendpoint from a domain http://yoursite.com

This limitation has been introduced for security reasons: in fact, without this protection, a malicious javascript code could get info from another site without noticing the user.

However, even if the reason of this limitation is clear, sometimes we need to call anway something that is not hosted in our site. The first solution is is to use JSONP. This approach is easy to use and it's supported by all browsers; the only problem is that the only HTTP VERB supported is GET, which has a limitation on the lenght of the string that can be passed as query parameter.

Otherwise, if you need to send lot of information we can't use this way, so the soulution could be to "proxy" the request locally and forward the data server side or to use CORS.

Basically CORS communication allow you to overtake the problem by defining some rules that makes the request more "secure". Of course the first thing we need is a browser that support CORS: fortunately all the latest browsers support it. Anyway, we have to consider that, looking at the real world, there are several clients that are still using Internet Explorer 8 which, among other things, doesn't support CORS.

The following table (http://caniuse.com/cors) shows which browsers offer CORS support.

there are several workaround that allows you to use CORS with IE8/9 but there are some limitations with the VERBS (more info here)

Now that it's clear what is CORS, it's time to configure it using one of the following browsers:

Internet Explorer 10/11
Chrome (all versions)
Firefox 3.5+
Safari 4.x

Now we need two different project, one for the client application and another one for the server, both hosted in different domains (in my esamply I used Azure Web Sites, so I've http://imperdemo.azurewebsite.net for the server and http://imperclient.azurewebsite.net for the client)

Server Application

Once the project has been created, it's important to enable CORS for our "trusted" domains, in my sample imperclient.azurewebsite.net

If you used the default Visual Studio 2013 template, your Global.asax.cs should look like this:

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Next, it's time to edit the file with the API configuration, "WebApiConfig.cs" into "App_Start".

N.B.: Before editing the file it's important to install the right NuGet Package; the default template included with Visual Studio doesn't have CORS package, so you have to install it manually.

PM> Install-Package Microsoft.AspNet.WebApi.Cors

Once all the "ingredients" are ready, it's time to enable CORS:

using System.Web.Http;

namespace imperugo.webapi.cors.server
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.EnableCors();

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Our API Controller looks like this:

using System.Collections.Generic;
using System.Web.Http;
using System.Web.Http.Cors;

namespace imperugo.webapi.cors.server.Controllers
{
    [EnableCors(origins: "http://imperclient.azurewebsites.net", headers: "*", methods: "*")]
    public class ValuesController : ApiController
    {
        // GET api/values/5
        public string Get()
        {
            return "This is my controller response";
        }
    }
}

The most important part of this code is EnableCors method and the namesake attribute (included the VERBS, Domain and HEADERS)

In case you don't want to completely "open" the controller to CORS requests, you can use the single attribute in the Action or leave the attribute in the controller and apply the DisableCors attribute to the actions you want to "close"

Client Application

At this time, the server is ready, it's time to work client side.

The code we'll see for the client is just plain Javascript, so you can use a simple .html page without any server side code.

The HTML Code:

<div class="jumbotron">
    <h2>Test CORS (Cross-origin resource sharing)</h2>
    <p class="lead">
        <a href="#" class="btn btn-primary btn-large" id="testButton">Test it now&raquo;</a></p>
    <p>
    <p id="response">
        NoResponse
    </p>
</div>

Javascript Code:

<script language="javascript">
    var feedbackArea = $('#response');
    $('#testButton')
        .click(function () {
            $.ajax({
                type: 'GET',
                url: 'http://imperdemo.azurewebsites.net/api/values'
            }).done(function (data) {
                feedbackArea.html(data);
            }).error(function (jqXHR, textStatus, errorThrown) {
                feedbackArea.html(jqXHR.responseText || textStatus);
            });
    });
</script>

If you did everything right, you can to deploy our apps (server and client) to test them.

When you click on the "Test It now" button the result should look like this:

Otherwise if something goes wrong, check the point above.

How does it work

CORS is a simple "check" based on HEADERS between the caller and the server.

The browser (client) adds the current domain into the hader of the request using the key Origin.

The server check that this value matches with the allowed domains specified in the attribute, answering with another HEADER information named Access-Control-Allow-Origin

If both keys have the same values, you have the data, otherwise you'll get an error.

The screenshot below shows the headers:

Here is, instead, the classic error in case the HEADERS doesn't match:

Conclusions

For me that I love to sperate the application using an API layer, CORS is absolutely cool. The onyl downside is that it's not supported by all the browser. Let's just hope that hope that all the IE8/9 installations will be replaced soon :-)

The demo is available here