All posts in Web Technology

Improving SSL/HTTPS Security to an A+

Improving SSL/HTTPS Security to an A+

By Jonathan Hassall on

These sim­ple steps can improve your Qualys SSL Report to an A+:

Step 1: Getting my initial report (B):

You can get a Qualys SSL Report on any site. My rat­ing start­ed as a B with a rea­son­ably good setup:

Step 2: Improving Ciphers List

SSL v2 is inse­cure, so it need­ed to be dis­abled, and SSLv3 also need­ed to be dis­abled as TLS 1.0 suf­fers a down­grade attack, allow­ing an attack­er to force SSLv3 dis­abling for­ward secre­cy. I updat­ed my nginx con­fig to use:

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

I opt­ed to con­fig­ure this in the main nginx.conf file, rather than each domain, as I saw now rea­son I would make indi­vid­ual changes on a domain basis.

I also enabled ssl_prefer_server_ciphers and ssl_session_cache:

ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;

And used this cipher suite which main­tains max­i­mum back­wards com­pat­i­bil­i­ty. Although I’m using SNI which isn’t sup­port­ed by IE6, I pre­fer my sites to be as back­wards com­pat­i­ble as possible.

ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:ECDHE-RSA-AES128-GCM-SHA256:AES256+EECDH:DHE-RSA-AES128-GCM-SHA256:AES256+EDH:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4";

I also added these lines:

ssl_prefer_server_ciphers on;
 ssl_session_cache shared:SSL:10m;

I retest­ed the site, and improved to an A rating:

Step 3: Deffie Hellman Ephemeral Parameters

Diffie-Hell­man ensures that pre-mas­ter keys can­not be inter­cept­ed by Man In The Mid­dle attacks, and it is easy to enable in Nginx.

First gen­er­ate a stronger DHE para­me­ter… be pre­pared to wait around 15 min­utes for OpenSSL to gen­er­ate this certificate:

cd /etc/ssl/certs
openssl dhparam -out dhparam.pem 4096

Then con­fig­ure Nginx to use it:

ssl_dhparam /etc/ssl/certs/dhparam.pem;

On retest­ing, I achieved the A+ grade!

Step 4: Add a DNS CAA record

The Cer­ti­fi­ca­tion Author­i­ty Autho­riza­tion (CAA) DNS record allows you to use your DNS records as a mech­a­nism to whitelist cer­tifi­cate author­i­ties that are allowed to issue cer­tifi­cates for their hostnames.

To imple­ment this, I had to change from Ama­zon AWS Route 53, to Google Cloud DNS, as AWS shame­ful­ly does­n’t pro­vide CAA report.

I use Let’s Encrypt, and added this DNS record:

0 issue "letsencrypt.org"

Cur­rent­ly this is option­al, but it will be manda­to­ry from Sep­tem­ber 2017.

Step 5: Add HTTP Strict Transport Security (HSTS) Header

A head­er can be sent from your serv­er which will inform browsers to only make HTTPS requests. Browsers will no longer make HTTP requests until the head­er expires. This has two main ben­e­fits: a spoofed site with­out your SSL cer­tifi­cate will not be effec­tive, and sub­se­quent vis­its to your site will go straight to your HTTPS ver­sion with­out a redi­rect, mak­ing page load­ing faster.

Be sure to use a low expiry time while devel­op­ing your site, as once a brows­er caches the head­er, it is not pos­si­ble to clear it. Once you’ve sent this head­er, expect your site to be HTTPS in the long term, with no going back.

add_header Strict-Transport-Security "max-age=31536000; preload" always;

For devel­op­ment, use this short­er time:

add_header Strict-Transport-Security "max-age=360;" always;

There is a push to have browsers have a pre­loaded list of HTTPS/HSTS enabled sites, but the strict require­ments for sub­mis­sion require sev­er­al sub-domain redi­rects, which in my opin­ion would reduce over­all per­for­mance. I don’t see the harm in still send­ing the ‘pre­load’ parameter.

 

Further reading:

JavaScript ES6 Transpiling with Webpack and Babel

JavaScript ES6 Transpiling with Webpack and Babel

By Jonathan Hassall on

Awe­some to final­ly get to use Web­pack and Babel to tran­spile some ES6 code to vanil­la JavaScript that even Inter­net Explor­er can use:

ES6:

1
2
3
4
5
6
7
8
9
10
11
export func­tion arrowTest() {
var mate­ri­als = [
‘Hydro­gen’,
‘Heli­um’,
‘Lithi­um’,
‘Beryl­li­um’
];

// expect­ed out­put: Array [8, 6, 7, 9]
return mate­ri­als.map(mate­r­i­al => mate­r­i­al.length);
}

Tran­spiled:

1
2
3
4
5
6
7
func­tion arrowTest() {
var mate­ri­als = [‘Hydro­gen’, ‘Heli­um’, ‘Lithi­um’, ‘Beryl­li­um’]; // expect­ed out­put: Array [8, 6, 7, 9]

return mate­ri­als.map(func­tion (mate­r­i­al) {
return mate­r­i­al.length;
});
}

Use­ful links: 

A Droplet for KRPano for Publishing 360 Videos

A Droplet for KRPano for Publishing 360 Videos

By Jonathan Hassall on

Here is the first ver­sion of a sim­ple droplet for con­vert­ing and pub­lish­ing 360 panoram­ic videos. It is intend­ed to be used for the processed out­put file from a Ricoh Theta S that has the stan­dard 1920x960 res­o­lu­tion. It is easy to do man­u­al­ly, but many peo­ple asked for an auto­mat­ic droplet.

It con­ve­nient­ly includes 32-bit and 64-bit ver­sions of FFMPEG for per­form­ing video conversion.

Instruc­tions:

  1. Extract to your KRPano folder.
  2. Drag your MP4 video file to the ‘MAKE PANO (VIDEO FAST) droplet’.
  3. Be patient while your video is encod­ed to var­i­ous formats.
  4. Rename the fin­ished ‘video_x’ fold­er to a name of your choice.

You can down­load the droplet here:

Recent improve­ments include:

  • Adding three vari­a­tions of qual­i­ty, which can be accessed by the view­er in Settings.
  • Improv­ing the qual­i­ty of the default play­back setting.
  • Auto­mat­i­cal­ly switch­ing to the low­est qual­i­ty when used on a mobile device.
  • Using a sin­gle .webm video, as the for­mat is very rarely used, and very time con­sum­ing to encode.
  • Out­puts to a named folder.
Removing JavaScript Debugging in Production with Laravel Elixir

Removing JavaScript Debugging in Production with Laravel Elixir

By Jonathan Hassall on

While using Gulp with Lar­avel’s Elixir, I found while it minifies/uglifies JavaScript on a pro­duc­tion build, it does­n’t strip JavaScript debug­ging. It was also far more time con­sum­ing to imple­ment this as a cus­tom Task or Extension.

Strip­ping debug­ging allows you to freely use Console.debug() and sim­i­lar debug­ging calls in devel­op­ment, which oth­er­wise will reduce the per­for­mance of your JavaScript appli­ca­tion, and in some cas­es make them com­plete­ly unus­able to cer­tain browsers.

So I did it myself, and made a Pull request (Github) with the offi­cial Lar­avel Elixir repos­i­to­ry, which was approved. Nice to give back.

Github Pull Request for Laravel Elixir

Just got a thankyou

Just got a thankyou

By Jonathan Hassall on

Just got a nice email in response to some code I sub­mit­ted publicly:

“jon -

just a quick ‘thank you’ for the code you post­ed re: pars­ing csv files.

i have a gi-nor­mous excel csv file with indi­vid­ual records span­ning mul­ti­ple lines because of mul­ti-para­graph ‘notes’
fields in each record.

your solu­tion of count­ing the fields and then pars­ing sub­se­quent data based on the num­ber of columns is so com­mon sen­si­cal it makes me embar­rassed that i did­n’t think of it.

thanks again,
bruce.”

Years spent a month by website users

Years spent a month by website users

By Jonathan Hassall on

Tak­ing last month as an exam­ple (Sep­tem­ber 1st — Octo­ber 1st), one of my more pop­u­lar web appli­ca­tions was used by 332,174 unique vis­i­tors, spend­ing an aver­age of 6 mins 37 secs.

Work­ing from that fig­ure, 3.971 years are spent  using the appli­ca­tions per month!

Where did your disk space go? Space Disk Analyser

Where did your disk space go? Space Disk Analyser

By Jonathan Hassall on

If you’ve ever run out of disk space and faced the dif­fi­cult deci­sion of what files to delete or offload to DVDs or an exter­nal hard dri­ve, this pro­gram may help you.

Space from AndyH Software

This soft­ware cre­ates a visu­al­i­sa­tion of your hard dri­ve so you can see how much space files and fold­ers are using. Click on the screen­shot to view an example.

For exam­ple, you may find that your tem­po­rary files are very large and delet­ing them would free up space. Or per­haps your pho­to gallery is so large that it is time to archive last year’s pho­tographs to DVDs or an exter­nal hard drive.

Space showing block mode with treeIt works with hard dri­ves, CD/DVD dri­ves, mapped net­work dri­ves and FTP accounts.

You can try it out in full by down­load­ing it from here. After 30 days you can decide to pur­chase it. The instal­la­tion is very min­i­mal and not bloated.

Download Space disk space visualisation software for free Down­load for Windows

 

**Note that this pro­gram has now been discontinued**