Friday, 31 July 2015

Setting up open vpn client on Ubuntu with two factor authentication Support


In this post we will see how to setup open vpn on ubuntu and then configure it to use Duo Two factor Authentication.

Installing openvpn

Installing openvpn is fairly simple. Just execute following command in command line

  •  sudo apt-get install openvpn
 This should install openvpn client in you Linux machine. You can verify the installation by checking the version.
  • openvpn --version

Connecting to VPN

 You can then connect to your vpn by executing command - 
  • sudo openvpn --config /path/to/config.ovpn
Next obvious question  -  What is this config.ovpn file? and where do I get it?

This is the file you would typically get from your vpn service provider. You can simply log on to your vpn with browser and download it from there. Note this file contains inline private keys and must be kept confidential.It will also have your vpn configuration like vpn address, ports , protocols etc.

Connecting to VPN with two factor Authentication like Duo

If two factor authentication is enabled on your server then your authentication will fail. 

You need to do some extra setup before you can start handling two factor authentications.

Configuring open VPN client
  1. Make sure you have following like in your OpenVPN client configuration file 
    • auth-user-pass    
  2. Next you should append you openvpn connect command with following - 
    • --auth-retry interact
And you should be all set for your vpn connection. You can run the command -

  • sudo openvpn --config /path/to/config.ovpn --auth-retry interact
You should not get a prompt to enter your dual auth password.

Simply enter your dual auth password and you should be good.

Related Links

Saturday, 4 July 2015

Understanding CSS Specificity


Life is good when you have a small web project with limited and simple CSS but as your project size grows and more CSS is to be applied complexity increases. 

In there are two or more conflicting CSS rules that point to the same element then your web browser will apply some rules to figure out which rule should be given higher precedence and be applied.

We term this rule weight as selectivity. More the selectivity more is the preference given to that rule.


Enough of the theory lets see an example. Consider following html

        <style type="text/css">
            .redbutton{color: red;}
            .bluebutton{color: blue;}
             #innerdiv input {color: green;}
        <script src="" type="text/javascript"></script>
            function changecolor()
    <title>Testing CSS Selectivity</title>
        <div id="ouderdiv">
            <div id ="innerdiv">
                <input id="colorbutton" type="button" class="redbutton" value="Click Me" onclick="changecolor()"/>

What do you expect will be the color of the button on page load and on click ? Well think a bit and then try it out. Paste above html in a file and open it in any browser. Observer the color, click on the button and then observer the color again. 

Before Cick

After Click

Whats happening?

Have questions? Will be answered soon. Lets take a step back and review our html code. We have a button. For this button we provided a class called redbutton (which should make the button red) and then on click we are dynamically changing the class to bluebutton (which should make the button blue). But none of these worked. It is still green. As you must have guessed correctly by now there is another css rule that is getting applied.

#innerdiv input {color: green;}

But why? Because CSS specificity of this rule is more than other class rules that we have defined. Next natural question - How is css specificity determined by the browser?

How is CSS specificity calculated?

There are some basic rules to determine specificity of a CSS rule.

Determination of specificity of a CSS rule depends on what type of selector is used
  • HTML selector (Eg input) has specificity 1
  • Class selector (Eg .redcolor) has specificity 10
  • ID selector (Eg. #innerdiv) has specificity 100
And if you have multiple such selectors in an CSS rule then their individual specificity just get added to form rule specificity that is used by the browser to determine precedence.

Here are few example
  • a - specificity 1 (1 HTML selector)
  • div a - specificity 2 (2 HTML selectors,  1+1)
  • div .someclass - specificty 11 (1 HTML selector and 1 class selector, 1 + 10)
  • div #someid - specificity 101  (1 HTML selector and 1 id selector, 1 + 100)  
  • div #someid .someclass - specificity 111  (1 HTML selector and 1 id selector and 1 class selector, 1 + 100 + 10)  

and so on.... Hope you got the point.

Note : If two conflicting rules have same selectivity then the one applied or parsed later is picked up.

So lets apply it to our rules.

  • .redbutton{color: red;} - specificity 10 (1 class selector)
  • .bluebutton{color: blue;} - specificity 10 (1 class selector)
  • #innerdiv input {color: green;} - specificity 101 (1 id selector and 1 html selector, 100+1)
So how can we leverage this information now? Lets increase the specificity of first two color rules now.

  • #innerdiv .redbutton{color: red;} - specificity 110 (1 id selector and 1 class selector,100+10)
  • #innerdiv .bluebutton{color: blue;} - specificity 110 (1 id selector and 1 class selector,100+10)
  • #innerdiv input {color: green;} - specificity 100 (1 id selector and 1 html selector,100+1)

With above rules now test our page again.

 Before Click

 After Click

That's all with CSS selectivity. Ideal scenario is when no two rules conflict but in my personal experience conflicting rules are bound to happen for a big web project. This is when this rules come handle. Let me know if you still have any questions :).
t> UA-39527780-1 back to top