Free SSL For Azure Website

In this post, I will show you how to get free SSL from Comodo for your personal Azure website.

Appsolultly, you can found so many articles about the SSL for Azure website on the internet. So In this post, I just want to show you the alternative way to get a free SSL from Comodo using window Internet Information Service (IIS). You may ask a question Why IIS and What’s related? Actually, I’m a lazy developer and prefer to use some tool instead of command line.

Before starting with SSL generation, just highlight that the custom SSL is for the custom domain only. Please check here if your Azure website doesn’t have a custom domain yet.

Note that, if you want to apply the SSL for the Production environment you should buy an SSL certificate that suits to your company. The free Certificate just for the testing purpose should be used for development environment only.

In the below steps, I will use my drunkcoding.net domain for the demonstration.

I. Generate CSR

  1. Open IIS and go to Server Certificate
  2. Click Create Certificate Request fill up your domain information in the pop-up window. By default, the cryptographic service provider will be Microsoft RSA SChannel Cryptographic Provider and Bit Length should be greater than or equals 2048.
  3. Save the CSR request into a text file.

    IIS Screenshots
  4. Go to Comodo website and paste the contain of CSR file into the first textbox and select the Microsoft IIS 7.x and later in the second one then click next.
  5. In the Domain Control Validation part 1 select HTTP CSR Hash in the Alternative Methods of Domain Control ValidationYou shall have 2 hash values names MD5 and SHA-1 at the end of this section.
  6. Create a text file with the name is MD5 value and contain is SHA-1 value and then comodoca.com in a separate line as the screenshot below.
  7. Upload the file into the wwwroot folder of your Azure website. You also can use the Kudo tool of Azure website to create a text file on the host directly.

    The SSL validation file.
  8. Click next and fill up all the require fields and finished the validation.

    The domain control had been validated.
  9. After then, you can use registered account to log in and download your the certificate. It may take 2 minutes to generate your SSL.

    SSL Certificate download.

II. Conver .crt to .pfx

After download and unzipped the certificate file you will have a folder with 4 .crt files. Now go back to the IIS and click Complete Certificate Request and provides required info into the popup window as below:

  • Filename is the location path of yourdomain.crt
  • Friendly name is your domain name
  • Certificate store is Web Hosting
Import certificate to IIS

Now, you shall have a certificate in the Server Certificate. Right-click on it and select export, specify the pfx file path and password then click ok to export the certificate back to the pfx file because Azure website only allows importing the pfx file.

III. Upload and Binding SSL to custom domain on Azure website

Open your website on the Azure portal and go to SSL Certificate setting upload your certificate and add a binding to the corresponding domain.

Binding SSL to the domain name.

Now, open your website with https and verify the Secure flag on your browser.

The free SSL certificate will valid in 3 months. So just remember to renew your certificate every 90 days.

Beside of Comodo there is the other website here also provide the free sll you may want to take a look as well. Both of them are using LetsEncrypt Certificate Authority.

If you would like to have an auto re-new SSL Sertificate function on your website then the post here will help you on that.

Apply custom domain for Azure website

If you are hosting a application on Azure and want to add an custom domain for your app then this post had been published for you. The custom domain feature will be supported from Basic B1 app service plan. So you have to ensure that your app service plan supports the custom domain before to buy a new domain for your app. you also can scale up your plan if current one is not supported custom domain.

App service plan

I. Domain configuration

  1. Note down your Azure website URL and IP address. The Azure site IP address and URL you found it on Custom domain setting.
  2. Login to your domain management and config your domain properties as below screenshot.
    App service plan

II. Azure Website Setting

  1. Now, go back to Custom domain setting of your Azure website, click add hostname then key in your domain name, validate and then add the hostname into your website.
  2. Congratulation, now you can access your website with the custom domain.
Custom domain setting

Anti Forgery Token and Machine Key

If working on Asp.Net MVC, you will know the anti-forgery token that helps to protect our website against cross-site request forgery.

To use this feature, call the AntiForgeryToken method from a form and add the ValidateAntiForgeryToken attribute to the action method that you want to protect.

  • Call AntiForgeryToken from a form

  • Add ValidateAntiForgeryToken attribute to the post action

How does it work?

When calling the AntiForgeryToken method inside a form, the AspNet will generate an encrypted AntiForgeryToken, pub into a hidden field and then send to the browser. When the browser submits the form back to the server, the token will be decrypted and validated to ensure that the request is genuine before execute the destination action method as long as the action method had been marked by ValidateAntiForgeryTokenAttribute.

The generated token looks like this:

What is the issue?

When deploy the website into an environment that has multi servers are load balancing together (web farm) you may facing with below issue when click the submit button.

The anti-forgery token could not be decrypted. If this application is hosted by a Web Farm or cluster, ensure that all machines are running the same version of ASP.NET Web Pages and that the configuration specifies explicit encryption and validation keys. AutoGenerate cannot be used in a cluster.

Why did this issue happen?

Assume that the environment has two servers are load balancing as the below diagram:

Farm servers diagram

Internally, the AspNet will use two keys (decryptionKey and validationKey) for token encryption/description and validation token. By default, these keys will be generated randomly when website start.

So, looks at the diagram above there are two instances of the website are hosting on different web servers in the single web farm. So that when both of them start a set of keys will be generated for each instance are differently.

Now, a request from user A had been redirected to the server 1 by the load balancer, the website in will response a view with an encrypted AntiForgeryToken. Later on, user A submits back the form to the load balancer and hopefully that the form will be captured and to be processed by the server 1.

Unfortunately, the load balancer now redirects that request to the server 2 instead and definitely, the token that had been encrypted by the server 1 can’t be decrypted on the server 2 because the keys are different. So the error was thrown.

The idea to fix this issue is ensuring all instances of the website using the same set of keys for the encryption/description and validation in the single web farm.

  • The keys should be different on each website on the same server. So if you have multi websites are hosting on the same server they keys should be unique.
  • The keys should be different on each environment for the same website. So if your website is hosting in multi-environments ensure that the keys on each environment are differently as well.

The solution for IIS

The idea is how to share the set of keys across the servers in the farm. So that the encrypt and decrypt process can happen on any server successfully.

Fortunately, When hosted an AspNet MVC website on IIS you can generate a set of keys by below steps

  1. Click on the website on IIS.
  2. Double click on Machine Key
  3. Uncheck all checkboxes and click Generate button at the right side and then click apply.
  4. The keys will be saved into the web.config file of the website.
  5. Open the web.config file, copy that keys and apply across to all website instances on the single farm.

Now, try the submit your website again. The issue should be resolved.

How to disable compatible view mode at the web application level

The Issue

As many companies had applied a global policy to enable the compatible view in IE for all intranet sites on all PCs. So that the old web application can be display properly.

Compatible view mode had been enabled in IE

However the new web application, especially using Asp.Net MVC and Bootstrap is not working fine with compatible view mode and definitely, we can’t ask our infrastructure to changes the policy of the company to disable the compatible view mode in app IE of all PCs. So how to disable the compatible view mode at the application level?

The website is not displayed property in the compatible view mode.

The Solution

Lucky to us is from IE11 Microsoft had supported to disable the compatible view mode by using metadata in the header of the page. So we can disable the compatible view mode in the application level by add below tag into the shared view of the application by default the shared view will be _Layout.cshtml in Views/Shared folder of the MVC application.

The website will display property in the compatible view mode.

For more information, you can find in here

Iphone App and Azure Web Api

In this post, I would like to share with you How to develop a native cross platform mobile application that interacts with Azure Web service.

I. Requirement.

As an account manager, I would like to request a mobile application that allows connecting to Azure web service to add, update, delete and view user accounts remotely.

The user account information need be captured as below:

  • First name: the first name of user
  • Last name: the last name of user
  • Account: the account of the user that can be used to login to our systems.
  • Description

II. Build Azure service

1. Configuration Azure Web app and SQL Database.

  • First, I will create an Azure SQL Database named AzureMobileDemo with Basic pricing tier because this is just a sample database for demonstration purpose so no need a powerful one.
  • And then create new Web App + SQL named HBDMobileService in Azure with App server plan is F1 Free and lets it connect to AzureMobileDemo database that created in the previous step.

    Until now, we shall have an HBDMobileServer that connecting to AzureMobileDemo SQL database on the Azure portal. The Application Settings should be shown as below. Please ensure that the connection name is DefaultConnection if not just click on the connection string and rename it. Because we will config this name into the WebApi project later on next section.

2. Develop Web API

Below are tool and libraries I’m using for this project.

  • Tool: Visual Studio 2017
  • Framework: .NetCore 1.1
  • Libraries: EntityFrameworkCore
  • Project Type: Web API

A new Web API project named AzureMobileService had been implemented as the class diagram below.

There is a UserController had been created which exposed all needed actions:

  • Get all users in the database.
  • Get user by primary key.
  • Add new user.
  • Update the existing user.
  • Delete the existing user by primary.

This controller will user MobileDbContect to interact with Database. MobileDbContext is an instance of DbContext in EntityFrameWorkCore that’s using User as data model to transfer the information.

Please note that the name of connection string needs to be provided in the Startup class as below.

As I’m using code first in this project and wishing to execute the database migration automatically when applicate start in the Staging or Production environment. So, I updated the Startup.Configure method as below.

3. Deploy AzureMobileService to Azure.

Before deploying AzureMobileService to Azure we need config the publish profile for this project. The publish setting can be downloaded from HBDMobileService as screenshot bellow.

Right click on the AzureMobileService and click on publish, select import profile and then click create profile button to import the publish profile file. After imported, the Publish configuration should be shown as bellow.

Now, click the Publish button to deploy the web service to your Azure portal. After deployed you can use Postman to verify the Web API to ensure it’s working properly.

Take note the Site URL in the screen shot above we will need it for the iPhone application on next section.

III. Build iPhone application

As the Visual studio 2017 already interested with Xamarin and able to develop a cross-flat form application that can be run on IOS, Android and Window Phone. However, if you want to build an IOS app on Window you still need to link Visual Studio with a Mac that installed XCode and Xamarin. So for simply, I will using Visual Studio for Mac to develop it instead and below is tool and libraries were used to develop this project.

  • Tool: Visual Studio for Mac
  • Framework: .NetCore 1.1
  • Libraries: Xamarin Forms
  • Project Type: Multiplatform – Connected App (Forms)
Open visual studio and create a new solution named AzureDemo the visual studio will create 4 projects:
  • AzureDemo: this is the main project we will implement the views and the logic of the app.
  • AzureDemo.Droid: this project will port the AzureDemo to Android application.
  • AzureDemo.iOS: similar with Droid project, this project will be port the AzureDemo to an iOS application.
  • AzureDemo.Service: this project can be removed as we already develop the Azure service above. The reason I’m using Window to develop the Azure service because Visual Studio for Mac is still previewed version and it is not fully supported Azure deployment.

The implementation of AzureDemo as below:

 There are 3 Views had been implemented:
  • UsersPage: Display the list of users.
  • UserDetailPage: Display details information of Use.
  • NewUserPage: Allow to add new or Edit User information.

The screenshots on iOS

The screenshots on Android

Before running the source code you should update the AzureMobileAppUrl in App class with your Azure service url mentioned above.

IV. Source code

  • Download source code here
  • Report issue here

As you see in the current Web Api source code all APIs are opening for everyone without any restriction. This is bad idea that any application can access your production data. So the recommendation is using Filtering to secure your Web Api? I will post a separate topic to discusing How to secure the Web Api soon.

In these projects, I’m trying to keep the source code as simple as possible for those who want to start learning Azure and Mobile development can catch up easily.

Please feel free to comment your opinion or email to me via [email protected]