DEV Community: ashrafZolkopli

10 Steps to GitHub Pages Greatness

ashrafZolkopli — Tue, 17 May 2022 18:34:35 +0000

I honestly feel that Dev.to is perfect for blogging, however I do find it hard to share the various web project that I want to share to the public. Sure I can cut and paste all my project code and share the screen shot, but I can't exactly let reader go for a test run on my blog.

Facing with this dilemma, I could either start a new server ( cost money ) or I could use the various free static side offered to the public such as GitHub Pages, Netlify and etc..

Since I am using GitHub as my code repo, I think this is the perfect time to use GitHub Pages. Single build process, just by committing to GitHub Repo and it just work... well technically the pages update after roughly a few minutes.

To make this web page free, I just use the free tier by GitHub.

The following are the steps taken to start my own blog using GitHub Pages.

Step 1: Start your new repo.

you may start by going to your GitHub account page and located the green button with the text New

now pressing this button will redirect you to Create a new repository

Step 2: Name your repo.

What we are looking to do right now is what GitHub call user site.

the naming convention for the user site is as follow :

<username with all lowercase>.github.io

for example, my GitHub username is ashrafZolkopli
so my repo name should be

ashrafzolkopli.github.io

Step 3: Setting the repo to public.

Since we are using the free tier, we need to make sure that our repo is public and accessible. If you are using the paid tier, you may set the repo to private.

Step 4: Create repo.

You may now click on create repo button located at the bottom of the page

Step 5: Clone Repo to Localhost.

After you click on Create Repository button, GitHub will divert you to a new page

You may call me lazy, but I been using GitHub Desktop like forever.

Just a matter of a few click and you are done cloning.

Click on the set up in desktop button

on GitHub Desktop:

Click the Clone button

GitHub Desktop now will show us a new page.

Now again I am lazy, I just click on open in Visual Studio Code button

And my Visual Studio Code

Now your Repo have been clone in your localhost.

Step 6: Create index.html file

You now can choose either to use GitHub Jekyll for your build process and use index.md file with build in Github template or do it like me what uses pure html, css, js file.

For purpose of this tutorial, I would now use a Start Bootstrap admin page template,

SB Admin

you can download the app zip file from its Github repo,

Again for the purpose of this tutorial, I am using only the index.html, css, js and assets file only

We can verify that it works

Step 7: Commit to GitHub

if you notice on the side bar, there are 9 changes had been made to the localhost that have not been commit to our local git.

Open your source control bar,

find and click the "+" button beside the 9 in circle, that says "Stage All Changes"

now your Changes become Stage Changes

In your message bar, you can name the changes into what ever you one, I would name this as my Initial Commit

while your cursor is still in the message bar, Click "ctrl" + "enter" on windows, This will commit your changes on localhost git

look for the "..." button highlighted in green

now choose push

Allow some time for the push to your GitHub Account.

Now go to your GitHub account repo and verify the push is successful

Step 8: Set up GitHub Pages

On your GitHub repo, click on Settings

once Setting page is loaded, find the Pages button highlighted in green

Since I am publishing from main branch I do not have to change any configuration.

you may need to change the branch if you want to publish from a different branch

Step 10: Admire your Now Static Website,

now you can go to your page to admire your New Static Website

my URL : ashrafzolkopli.github.io

if you click on this page later, I may change the layout and such for my own project, I included the screen shot for reference.

Conclusion

I hope this step by step tutorial help you in deploying your own static website on GitHub Pages.

Please feel free to comment or like if you read till this far...
Comments are welcome and if you have any issue please feel free to comment here or contact me via WhatsApp.

Django: Allauth

ashrafZolkopli — Tue, 15 Jun 2021 10:29:23 +0000

Up until now we haven't created any registration/login form. We could or should roll our own for a very special business requirement or we could use a ready made and famous authentication packages call django-allauth. Django allauth will handle all your login/registration need, and include plugins for login using 3rd party Oauth such as google, facebook, twitter, github to name a few. For more 3rd party authentication that Allauth support please refer here.

Lets start will installation of Allauth

Installing Django-Allauth

Installing django Allauth with the following command in your terminal

pipenv install django-allauth
pipenv lock -r > requirement.txt

after the installation is done, We need to register django-allauth.

Settings Django-Allauth

Django-Allauth require a significant change to your settings.py file, Lets first check each part one by one ...

open your settings.py file, and first check your INSTALLED_APP, and include the following

INSTALLED_APPS = [
    #...
    # Make sure the following 3 is installed
    'django.contrib.auth',
    'django.contrib.messages',
    'django.contrib.sites',

    # Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    #...
]

then add the following in your settings.py file

AUTHENTICATION_BACKENDS = [
    # Needed to login by username in Django admin, regardless of `allauth`
    'django.contrib.auth.backends.ModelBackend',

    # Django-allauth
    # `allauth` specific authentication methods, such as login by e-mail
    # https://django-allauth.readthedocs.io/en/latest/installation.html
    'allauth.account.auth_backends.AuthenticationBackend',
]

SITE_ID = 1

once done, we should now update the urls.py file

Configuring urls.py

lets now open urls.py file and add the following

urlpatterns = [
    #...
    path('account/', include('allauth.urls')),
    #...
]

Optional Configuration

The following would be optional configuration that you could add to change the behavior of django_allauth, first open your settings.py file and add the following

# Common Django Settings
LOGIN_URL = "account/login"
LOGIN_REDIRECT_URL = "/"
LOGOUT_REDIRECT_URL = "/"


# Django-allauth
# https://django-allauth.readthedocs.io/en/latest/configuration.html
ACCOUNT_AUTHENTICATION_METHOD = "username_email"
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = "mandatory"
ACCOUNT_SIGNUP_EMAIL_ENTER_TWICE = True
ACCOUNT_SIGNUP_PASSWORD_ENTER_TWICE = True

since we also added email verification mandatory, we need djnago to have an email backend

Configuring Django Email Backend

for testing purposes, its often better to use the console backend like so

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

but for me, I prefer to use the file backend as it will create a proper html file for our emails

EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'
EMAIL_FILE_PATH = BASE_DIR.joinpath('test').joinpath('email')

and create a folder directory like so

test/email/

Migrate your database

Django allauth require that you migrate its files with the command

python manage.py migrate

you could now go to

End

Congratulation, now your are able to register, and login your user using django-allauth

Django : ReCaptha Everywhere

ashrafZolkopli — Tue, 15 Jun 2021 04:42:15 +0000

In the previous post in this series, I talk about how we can use django-recaptcha to make sure our forms are protected from bot spam submission, however it can be tedious to add them to each form and also does not make it hard to add the recaptcha field if the form are generated by a django package that you had installed previously.

Using the django-honeypot middleware method and knowledge on how django-recaptcha work, I had manage to roll my own middleware that inject the Google Recaptcha field into every page that have a form in a Django weebsite.

1) Start a new django app

We Can first start an django app called G_Recaptha, the name of the app can be anything you want but I'm going with this.

python manage.py startapp G_Recaptha

2) G_Recaptha middleware

We now should add a middleware.py file in G_Recaptha.

in this file, insert the following

import re
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string
from django.conf import settings
from django.utils.encoding import force_str
from .helpers import verify_recaptcha

_POST_FORM_RE = re.compile(
    r'(<form\W[^>]*\bmethod\s*=\s*(\'|"|)POST(\'|"|)\b[^>]*>)', re.IGNORECASE
)
_HTML_TYPES = ("text/html", "application/xhtml+xml")


class BaseRecapthaMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        return self.get_response(request)


class RecaptchaRequestMiddleware(BaseRecapthaMiddleware):
    def process_view(self, request, callback, callback_args, callback_kwargs):
        if request.is_ajax():
            return None

        return verify_recaptcha(request)


class RecaptchaResponseMiddleware(BaseRecapthaMiddleware):

    def __call__(self, request):
        response = self.get_response(request)

        try:
            content_type = response["Content-Type"].split(";")[0]

        except (KeyError, AttributeError):
            content_type = None

        if content_type in _HTML_TYPES:

            def add_recaptcha_field(match):
                return mark_safe(
                    match.group()
                    + render_to_string(
                        "G_Recaptcha/RecaptchaV3.html",
                        {'recaptcha_site_key': settings.RECAPTCHA_PUBLIC_KEY},
                    )
                )

            response.content = _POST_FORM_RE.sub(
                add_recaptcha_field, force_str(response.content)
            )

        return response


class RecaptchaMiddleware(
        RecaptchaRequestMiddleware,
        RecaptchaResponseMiddleware):
    pass

this middleware file is almost the exact copy of django-honeypot that have been customize to insert google recaptcha field into and pages in our website that have a form field in the HTML.

3) G_Recaptha helpers.py

In the middleware.py file on line 6 we call for verify_recaptcha from helpers.py file.

Lets now create a file called helpers.py file and insert the following lines into the file:

import requests
from django.conf import settings
from django.http import HttpResponseBadRequest
from django.template.loader import render_to_string


def verify_recaptcha(request):
    if request.method == "POST":
        recaptcha_response = request.POST.get('g-recaptcha-response')
        data = {
            'secret': settings.RECAPTCHA_PRIVATE_KEY,
            'response': recaptcha_response
        }
        r = requests.post(
            'https://www.google.com/recaptcha/api/siteverify', data=data)
        result = r.json()

        if result['success'] and \
                float(result['score']) > settings.RECAPTCHA_REQUIRED_SCORE:
            return None

        respond = render_to_string(
            'G_Recaptcha/ReCaptcha_error.html',
            {}
        )
        return HttpResponseBadRequest(respond)

4) G_Recaptha templates

In middleware.py file, we force insert a html string into all the pages at line 47. This template is located at

G_Recaptcha/templates/G_Recaptcha/RecaptchaV3.html.

the html for the template are

<script src='https://www.google.com/recaptcha/api.js?render={{recaptcha_site_key}}'></script>
<script>
    //global grecaptcha
    grecaptcha.ready(function() {
        grecaptcha.execute('{{recaptcha_site_key}}', {action: "form"}).then(function(token) {
        document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

In helpers.py file we also have a template that responds if the user failed the Google Recaptha test with the template name Recaptcha_error.html located at

G_Recaptcha/templates/G_Recaptcha/Recaptcha_error.html

the template in its barebone is as follow,

<H1>Google ReCaptha Error </H1>

you may want to change the design as required.

5) G_Recaptcha Settings configurations.

lets now open settings.py file and make the following changes as follows

INSTALLED_APPS = [
    #...
    # Custom Google ReCaptcha
    'G_Recaptcha',
    #...
]

MIDDLEWARE = [
    #...
    # Custom Google ReCaptcha
    'G_Recaptcha.middleware.RecaptchaMiddleware',
    #...
]

# Custom Google Recaptcha
RECAPTCHA_PUBLIC_KEY = config('RECAPTCHA_PUBLIC_KEY')
RECAPTCHA_PRIVATE_KEY = config('RECAPTCHA_PRIVATE_KEY')
RECAPTCHA_REQUIRED_SCORE = config('RECAPTCHA_REQUIRED_SCORE', cast=float)

6)Update .env files

Since we are using python-decouple, we should now update the .env file with the following fields

RECAPTCHA_PUBLIC_KEY = '<site_key>'
RECAPTCHA_PRIVATE_KEY = '<public_key>'
RECAPTCHA_REQUIRED_SCORE = <value between 0.00 to 1.00>

7) Testing

the easiest place to test is the admin login page

as you can see, the google recaptcha had been displayed located at the bottom of such form

now we should test if we failed the google recaptcha by setting the RECAPTCHA_REQUIRED_SCORE = 1.00 in the .env file

as you can see I had failed the recaptcha test.

now lower the RECAPTCHA_REQUIRED_SCORE = 1.00 to the value you are comfortable with such as 0.85

you should now be able to login as normal.

End

We now able to protect all the form in our project with google ReCaptcha. Hopefully this will slowdown or stop any attempt to attack our django webpage.

Django Defense Against Bot

ashrafZolkopli — Mon, 14 Jun 2021 05:05:44 +0000

In the previous post, I talked about how we could implement a simple trick to stop bot from continuing to submit a form in our web app. However like I told you, this might not be enough to keep all the bot from doing harm to our website. How to make it better? well another simple way is to implement a ReCaptcha. ReCaptcha is a relatively simple tool to identify if a web form in our site is being submitted by a human being or a robot. For this implementation ReCaptcha, a package called django-recaptcha.

Get Google ReCaptcha API keys

Before we can start using google ReCaptcha Api, first we need to register our application with google. I would propose to use Google ReCaptcha V3.

click on this link Google ReCaptcha Admin, and fill in the required information

click the submit button and copy your public and private api key

Installing django-recaptcha

You can start installing django-recaptcha with the following command in the terminal

pipenv install django-recaptcha
pipenv lock -r > requirements.txt

Registering django-recaptcha into your INSTALLED_APP

Open your settings.py and located the INSTALLED_APP list and register django-recaptcha like so

INSTALLED_APPS = [
    #...
    # Django-recaptcha
    # https://github.com/praekelt/django-recaptcha
    'captcha',
    #...
]

django-recaptcha configuration

In the settings.py file, add the following setting config anywhere:

# Django-recaptcha
# https://github.com/praekelt/django-recaptcha
RECAPTCHA_PUBLIC_KEY = '<site_key>'
RECAPTCHA_PRIVATE_KEY = '<public_key>'
RECAPTCHA_REQUIRED_SCORE = 0.75

replace site_key and public_key from the api key you copied from google recaptcha.

if you are using python-decouple, the config would be

# Django-recaptcha
# https://github.com/praekelt/django-recaptcha
RECAPTCHA_PUBLIC_KEY = config('RECAPTCHA_PUBLIC_KEY')
RECAPTCHA_PRIVATE_KEY = config('RECAPTCHA_PRIVATE_KEY')
RECAPTCHA_REQUIRED_SCORE = config('RECAPTCHA_REQUIRED_SCORE', cast=float)

and in your .env file you should add the following

RECAPTCHA_PUBLIC_KEY = '<site_key>'
RECAPTCHA_PRIVATE_KEY = '<public_key>'
RECAPTCHA_REQUIRED_SCORE = <value between 0.00 to 1.00>

How to use django-recaptcha

If you want to use a ReCaptcha field inside your form, in your forms.py

from django import forms
from captcha.fields import ReCaptchaField
from captcha.widgets import ReCaptchaV3

class FormWithCaptcha(forms.Form):
    captcha = ReCaptchaField(widget=ReCaptchaV3())

End

Now we are able to block user that fail the ReCaptcha test. This will stop most automated bot attack.

Django-Honeypot

ashrafZolkopli — Sun, 13 Jun 2021 10:40:07 +0000

We made it so we can catch bad guys that try to access our Admin site, but not how about we make so that all of our site form able to catch the bad guy? Sound like a cool proposal right.

Usually, attacker will use a bot to try and crack our web app. One solution is to also include a honeypot everywhere there is a form. This will not deter all of the bot but adding that extra layer of security will not hurt right. Honestly, so far we made it so that we have incremental security measure in place.

I think this is where I should say that, in security terms, there is nothing that is truly secure but we need to just slowdown the attack as much as we can to the point it doesn't make any sense for the attacker to continue.

Installing django-honeypot

pipenv install django-honeypot
pipenv lock -r > requirements.txt

Configuring django-honeypot

INSTALLED_APPS = [
    #...

    # django-honeypot
    'honeypot',
    #...
]

if you want to activate the honeypot web app wide, the easiest way was to use a middleware provided by django-honeypot

MIDDLEWARE = [
    #...

    # Django-honeypot
    # https://pypi.org/project/django-honeypot/
    'honeypot.middleware.HoneypotMiddleware',

    #...
]

lastly add this variable to your settings.py file

# Django-honeypot
# https://pypi.org/project/django-honeypot/
HONEYPOT_FIELD_NAME = "secret_key"

End

As of right now I feel that we made our web app a bit safer. I'm not gonna say that our code is safe from any bot attack but at least the normal to medium type bot.

Django Admin Honeypot

ashrafZolkopli — Sun, 13 Jun 2021 06:35:34 +0000

When talking about Web Application security, I think one of the main page we need to defend at all cost is the webpage admin page. Once a hacker is able to gain access to the admin page, the fear would be the hacker is able to exfiltrate all our user Personal Information (PI).

There are many propose solution to keep the web app admin pages safe. The propose solutions are:
1) Only allow Admin to access the admin site through Local network or VPN.
2) Separating the domain between normal user and admin user.

But you know what, no matter how you handle securing the web app admin site. There will always be someone who will try to gain access to your website. Why not have a little fun and set up a honeypot for them. What a honeypot you may ask? A simple way of explaining it in layman terms is that its a lure for our hacker to try and attack us.

One package we can use as a honeypot is called django-admin-honeypot. Its a simple package that will replace the real admin page with a face one and register all IP that try to access the page.

Installing django-admin-honeypot

Installing django-admin-honeypot is just a simple as :

pipenv install django-admin-honeypot
pipenv lock -r > requirements.txt

Configuring the django-admin-honeypot

add admin_honeypot in INSTALLED_APP located in settings.py

INSTALLED_APPS = [
    #...

    # Django-admin-honeypot
    'admin_honeypot',
    #...
]

Update Urls for django-admin-honeypot

urlpatterns = [
    path('admin/', include('admin_honeypot.urls', namespace='admin_honeypot')),
    path('secret/', admin.site.urls),
    #       ^-- Change this to anything you like eg:secret
    #...
]

End

With just 3 simple steps we are able to better protect our webapp. But this is not a fool proof method of protecting our app... It is one of the step to better secure our webapp.

User Control Django Session

ashrafZolkopli — Sun, 13 Jun 2021 01:22:55 +0000

Preface

In the last part of the Series, We made its so that our staff user can only have one user session at one time, however in the last series I decided not implement the session control towards normal user. For normal user I would prefer to display a list of all the session each user had, so that they can manually kill their session.

Going with this idea, I would now use a library called django-user-sessions. This library will display the list of user active session have the ability to kill all his/her session.

[courtesy of django-user-session]

Installation

Among all the post that I have been writing previously, most library are quick and easy in terms of installing and usage. However django-user-sessions package depends on GeoIP library. GeoIP library require a huge databased provided from Maxmind. You would need to navigate to a geolite2 page, register and download 2 files name GeoLite2-Country.mmdb.gz and GeoLite2-City.mmdb.gz as per instruction

Once your have the files, unzip the folder, copy and paste in your working environment like so

now lets install the GeoIP library and set the path directory

pipenv install geoip2
pipenv lock -r > requirements.txt

and in your settings add this line

# GeoIP2 settings
# https://docs.djangoproject.com/en/3.2/ref/contrib/gis/geoip2/
GEOIP_PATH = BASE_DIR.joinpath("GeoIP")

Now you should be able to use any package that require translation between IP to Geolocation

Installing django-user-session

lets now first install the library

pipenv install django-user-sessions
pipenv lock -r > requirements.txt

now for something a bit controversial:

1) Replacing 'django.contrib.sessions' with 'user_sessions' in your INSTALLED_APP in your settings.py file

INSTALLED_APPS = [
    # ...
    # 'django.contrib.sessions',

    # Django-user-sessions
    'user_sessions'
    # ...
]

2) Replacing your 'django.contrib.sessions.middleware.SessionMiddleware' with 'user_sessions.middleware.SessionMiddleware' in your MIDDLEWARE in your settings.py file

MIDDLEWARE = [
    # ...
    # 'django.contrib.sessions.middleware.SessionMiddleware',

    # Django-user-sessions
    'user_sessions.middleware.SessionMiddleware',
    # ...
]

3) Add UserSession url in your urls.py file

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('user_sessions.urls', 'user_sessions')),
]

4) Setting the LOGOUT_REDIRECT_URL in settings.py file

# Common Django Settings
LOGOUT_REDIRECT_URL = '/'

5) we can now do a make migrations and also migrate with the following command in your terminal:

python manage.py makemirgations 
python manage.py migrate

6) If step 5 cause you some issue such as migrations conflict add the following line in your settings.py

SILENCED_SYSTEM_CHECKS = ['admin.E410']

7) This step is optional if you are working from behind a reverse proxy such as Nginx,

a) install django-xforwardedfor-middleware

pipenv install django-xforwardedfor-middleware==2.0
pipenv lock -r > requirements.txt

2) In your settings.py file, in your MIDDLEWARE add the following

MIDDLEWARE = [
    # ...
    # django-xforwardedfor-middleware
    # https://github.com/allo-/django-xforwardedfor-middleware
    'x_forwarded_for.middleware.XForwardedForMiddleware',
    # ...
]

End

By completing the steps listed here, the user of your web app can now maintain on their own from which platform his/her have active session and kill the session if needed.

Preventing Multiple Login for a Single Django User

ashrafZolkopli — Sat, 12 Jun 2021 02:37:22 +0000

Sometime website or a simple app implement a one login at a time function, like snapchat, or whatapp ( I'm not sure how long the whatapp example will hold true since there are hints that whatapp might be able to use on 4 concurrent device at a time). Anyway it might be a business logic requirement or even from a security stand point.

I used to thing maybe it would be hard to implement such a behaviour until I found a package called django-preventconcurrentlogins. Yes the name is that long but you know what, it does its job so well that sometime while testing, Me and my colleague who are using the same ID kinda wonder why we kept having to login...

One thing to note about this application, this applies to all authenticated user to your site whether its just a normal user or staff. So in this post I will go through how I would implement the logic for all Authenticated User using the django-preventconcurrentlogins and also using the technique in the package that apply only for user with a staff status.

Installing django-preventconcurrentlogins

the library is simple enough that its only need this command :

pipenv install django-preventconcurrentlogins
pipenv lock -r > requirements.txt

Configure Setting.py for django-preventconcurrentlogins

open your settings.py file and add the following into the parts:

INSTALLED_APPS = {        
    #...
    'preventconcurrentlogins',
    #...
    }

MIDDLEWARE_CLASSES = {        
    #...
    'preentconcurrentlogins.middleware.PreventConcurrentLoginsMiddleware',
    #...
   }

this time you need to add a migrate since django-preventconcurrentlogins have some modal that needed to be migrated to your db

python manage.py makemigrations
python manage.py migrate

And your done.

Rolling our own library

The way I see it, I want my staff user to only have Session at a time due to the nature of their work and let the Customer ( normal user ) to have as many user session as they want without killing their previous session. I know it might not look like it sound good but honestly... I would rather have my staff which have a higher chance of messing things up to be bothered with this security implementation when letting things get mess up.

I'm not sure if I should work getting this become a package since I am gonna be using this a lot... maybe I would then... but for now lets just work on having this located in our User app.

Models.py

Lets start will our models.py in the User app.

from django.db import models
from django.utils.translation import gettext_lazy as _

class StaffLogin(models.Model):
    staff = models.ForeignKey(
        User,
        verbose_name=_("Staff"),
        on_delete=models.CASCADE,
        related_name='user_stafflogin',
        limit_choices_to={'is_staff': True},
    )

    session_key = models.CharField(
        max_length=40,
        verbose_name=_("Session Key"),
    )

now lets create a middleware.py file in User app

from .models import StaffLogin
from importlib import import_module
from django.conf import settings

SessionStore = import_module(settings.SESSION_ENGINE).SessionStore


class PreventConcurrentStaffLogin:

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request, *args, **kwargs):
        if not request.user.is_staff:
            return self.get_response(request)

        staff_session = request.session.session_key

        if not hasattr(request.user, 'staff_stafflogin'):
            StaffLogin.objects.create(
                staff=request.user,
                session_key=staff_session,
            )
            return self.get_response(request)

        staff_db_session = request.user.staff_stafflogin.session_key
        if staff_session != staff_db_session:
            SessionStore(staff_db_session).delete()
            request.user.staff_stafflogin.session_key = staff_session
            request.user.staff_stafflogin.save()

        return self.get_response(request)

Now we update our middleware in our settings.py file

MIDDLEWARE = [
    #... must be after 
    # django.contrib.auth.middleware.AuthenticationMiddleware

    #Custom Middleware Prevent Concurrent Staff Login
    'User.middleware.PreventConcurrentStaffLogin'
    #...
]

now we should make a make mirgations and migrate since we now have a new model that we need to register in our db.

python manage.py makemigrations
python manage.py migrate

Our web app should by now be able to make sure all our staff can only have one login session active at a time.

End

In simple terms, now we are able to keep our user from having a concurrent login while using our app. Hopefully this will make our user much more safe, in a sense if someone else had login into our user, our user just have to login again so that the old session ( someone else that log into our user account ) will be deleted.

Django Securing User Session

ashrafZolkopli — Fri, 11 Jun 2021 22:52:48 +0000

Preface

One of the common attack vector for Web App is called Session Hijacking. Session Hijacking means that an authenticated user session was able to be obtain by a hacker. This usually due to Man In The Middle (MITM) attack such as when user is using a public Wi-Fi/LAN that had been compromise by the hacker.

Using HTTPS connection will encrypt the all communication between browser and server and setting a HTTP Strict Transport Security (HSTS) will make sure that all communication subsequence to the first connection between the browser and server will using HTTPS connection only. The first communication is usually cause the browser will request to a HTTP site then got redirected to a HTTPS site. HSTS also specify something called a Secure HSTS duration. This means that after x second from first contact between browser and server that set the HSTS policy will expire.

In the small chance that, your user is logged in to your website, close the window and continue to not do anything with it for the duration of x second ( HSTS second relapse ), link to the internet through a ( compromise ) public Wi-Fi, go to google and connect to your website on a HTTP page which the "hacker" is able to sniff your user session cookie and later imitate the user as an authorize use on our site.

Like I said there, there is a small chance but you never know maybe its that time of the year where all 8 planets in the solar system align just right with the wind blown from the far east with a wind speed of 100km/h hitting a small butterfly with so much force that it cause a ripple effect that will basically bring down your entire website for a month and causing a massive 100 million lawsuit. Well what I'm trying to say here is, Its better be safe then sorry.

To further reduce this attack vector, I recommend using a Django package called django-restricted-sessions. Its not a one all be all solution to our problem however, in my opinion its better to add such a package, it is so simple to implement and well you know what, you will thanks yourself one day that you implement it and if any minute chance that one day you have to stand in front of a Information Security committee, stating that you had taken all the precaution possible to secure your web app this might be one of those you need to win the case.

Anyway django-restricted-sessions isn't a bullet proof, even in its documentation state that it not perfect but it does deter the wannabe hacker from getting in so easily...

I guess I been talking so much about this package that we should just install and configure it...

Installing django-restrict-sessions

Just 2 line of command in your terminal is what you need:

pipenv install django-restricted-sessions
pipenv lock -r > requirement.txt

Setting your middleware

Open the setting.py file and add a simple line:

'restrictedsessions.middleware.RestrictedSessionsMiddleware',

make sure the middleware is located after both

'django.contrib.sessions.middleware.SessionMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',

like so :

MIDDLEWARE_CLASSES = [
    ....
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'restrictedsessions.middleware.RestrictedSessionsMiddleware',
    ....
]

End

Thats it, simple as that, now your can feel a bit better about the fact that your webapp is a bit safer in the case of Session Hijacking.

Django Password Helper

ashrafZolkopli — Fri, 11 Jun 2021 18:55:05 +0000

Preface

In the previous post, we had implement a password validator system with some proper way to make sure our use a hard password to check in the user point of view. However, many would just reuse their own old password everywhere on the internet.. This poses a huge problem if lets say one say the user password was leaked from another website and open up his/her door to our website too?

A few years back, Dropbox introduce a zxcvbn, Its basically a quantitative way of measuring how strong the user password is. While I was working with Django, I came across this library call django-zxcvbn-password. Just to share, the name of zxcvbn came from.. and its not abbreviation of something with a deeper meaning. Well if you look at your normal keyboard, you could see that the name came from the letter located on the bottom row of your keyboard...

Why is it important for us as the developer to include such package in our library? well to be honest we don't, however why not we give the user a method that will share with the how strong is the password they are using and how hard the password is to be cracked.

Installation of django-zxcvbn-password

The command for installing django-zxcvbn-password are as follows

pipenv install django-zxcvbn-password
pipenv lock -r > requirements.txt

Configure django-zxcvbn-password

in the setting.py file add

INSTALLED_APPS = [
    #.... what ever you had registered 
    # Django-zxcvbn-password
    'zxcvbn_password',
    #.... 
]

AUTH_PASSWORD_VALIDATORS = [
    #... anything that have been registered before
    {
        'NAME': 'zxcvbn_password.ZXCVBNValidator',
        'OPTIONS': {
            'min_score': 3,
            'user_attributes': ('username', 'email', 'first_name', 'last_name')
        }
    },
]

How to use django-zxcvbn-password

The power of using django-zxcvbn-password come into play in 2 forms, one is the registration form and the other is the password change form.

a sample that is provided by django-zxcvbn-password as follows for the forms.py

from django import forms
from zxcvbn_password.fields import PasswordField, PasswordConfirmationField

class RegisterForm(forms.Form):
    password1 = PasswordField()
    password2 = PasswordConfirmationField(confirm_with=’password1’)

and inside the html for the form

<form role="form" action="my_url" method="post">
  {% csrf_token %}
  {{ form }}
</form>

{% block js %}
  {{ block.super }}
  {{ form.media }}
{% endblock %}

the important part is the {{ form.media }}, if using bootstrap4, the progress bar can work out of the box, because the JS for this app is using jQuery.

End

This package help our web app user create a password with some level of complexity that would be hard to crack by any standard. This and using Argon2 hash will make sure if ever our web app got compromise, at the very lease, our user information is not leaked due to fault in the password.

Django Enhance Password Policy

ashrafZolkopli — Fri, 11 Jun 2021 11:38:10 +0000

Preface

Django build in password policy are by itself provide a great basis toward making sure the password that the user choose is relatively strong enough that its hard to guess.

Build in Password Validators

however usually in a business setting, almost all company will have its own set of password policy that need fine grain control of what is acceptable and what is not.

Things like password require 1 uppercase, 1 lowercase, 1 digit, and 1 special character or thing such as no repeated password for the last x number password change require a special kinda of password validator so that we can make it better. My go to password validator would be django-password-validators.

Installing Django Password Validator

Installing django-password-validators with the command:

pipenv install django-password-validators
pipenv lock -r >requirements.txt

Configuring the settings

If you want to have only the password strength check, just use the following in your settings.py file

 INSTALLED_APPS = [
     ...
     'django_password_validators',
     ...
 ]

AUTH_PASSWORD_VALIDATORS = [
    ...
    {
        'NAME': 'django_password_validators.password_character_requirements.password_validation.PasswordCharacterValidator',
        'OPTIONS': {
             'min_length_digit': 1,
             'min_length_alpha': 2,
             'min_length_special': 3,
             'min_length_lower': 4,
             'min_length_upper': 5,
             'special_characters': "~!@#$%^&*()_+{}\":;'[]"
         }
    },
    ...
]

however if you need validator to check with the historical password

 INSTALLED_APPS = [
     ...
     'django_password_validators',
     'django_password_validators.password_history',
     ...
 ]

AUTH_PASSWORD_VALIDATORS = [
    ...
    {
        'NAME': 'django_password_validators.password_history.password_validation.UniquePasswordsValidator',
        'OPTIONS': {
             # How many recently entered passwords matter.
             # Passwords out of range are deleted.
             # Default: 0 - All passwords entered by the user. All password hashes are stored.
            'last_passwords': 5 # Only the last 5 passwords entered by the user
        }
    },
    ...
]

# If you want, you can change the default hasher for the password history.
DPV_DEFAULT_HISTORY_HASHER = 'django_password_validators.password_history.hashers.HistoryHasher'

End

I think with django-password-validators package, we are now able to make sure that the user would atleast have a much harder password to crack.

Better Django Hasher

ashrafZolkopli — Fri, 11 Jun 2021 03:34:23 +0000

Django support multiple password hash algorithm, however two hash that it support but not come out of the box are Argon2 and Bcrypt. This post will show how we can make for a better Django Password hasher our project.

Installing Argon2 Library

We can install the Argon2 library as follow

pipenv install django[argon2]
pipenv lock -r > requirements.txt

Update Settings

in your settings.py just add the following line

PASSWORD_HASHERS = [
    'django.contrib.auth.hashers.Argon2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2PasswordHasher',
    'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
    'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
]

That's it and now your password is being hash with a much better password hasher.

End

With just 2 simple steps, your user password is being hash with a better password hasher. Why not just implement this in your project, as you got nothing to loose and so many to gain.