SSL/HTTPS Mixed Content Warnings – How to Automatically Report Errors

The general push to use SSL/HTTPS for every web site is improving security and privacy on the Internet. However, every request a web site makes will need to be secure, or browsers can remove the ‘Secure’ indicator, show a warning symbol, and sometimes pop up errors.

You can add a simple header that will tell browsers to report back to your server if any insecure requests are made. I combined this with a simple PHP script that logs to the server’s error log.  This alerts me to sites I host and develop that have insecure content, so I can fix them.

Step 1 – Add the Content Security Policy reporting header

add_header Content-Security-Policy-Report-Only "report-uri /csp-report-endpoint.php";

Step 2 – Add PHP Script

Add this simple PHP script as csp-report-endpoint.php:

<?php
error_log(file_get_contents("php://input"));

Now, when a site attempts to load an insecure resource, you will get a message in your error log, and you can use this information to fix your site.

How to watch the NTU Falcon Cam on PC, Mac, iOS and Android

Like many people I enjoy watching the live streaming cameras set up at Nottingham Trent University which show live footage of a family of peregrine falcons.

Unfortunately the university streams as RTMP, which generally requires Flash to stream in a web browser. As Flash is now generally disabled on browsers like Mozilla Firefox and Google Chrome, I’ve noticed many people having problems watching the cameras, so I wrote this short guide on a way to play the cameras:

For PC and Mac

  1. Download and install VLC Player
  2. Download this file (right click and Save As): https://www.jonhassall.com/downloads/ntufalconcams.m3u
  3. Open VLC Player, Media -> Open File, and open the file you downloaded
  4. Press the track skip buttons to change cameras

For Android smartphone

  1. Install the VLC Player app from Google Play
  2. Open the VLC Player app
  3. Press ‘Open MRL’ from the left menu, and type:
    https://www.jonhassall.com/downloads/ntufalconcams.m3u
  4. I find it can take a good 30 seconds for the stream to open. Play controls appear if you swipe up from the bottom of the screen. It isn’t very intuitive

iPhone/iPad

  1. Install the VLC for Mobile app from the App Store
  2. Open the VLC Player app
  3. Press ‘Network Stream’ from the left menu
  4. Type this URL into the box at the top:
    https://www.jonhassall.com/downloads/ntufalconcams.m3u
  5. Press ‘Open Network Stream’
  6. Press ‘ntucalconcams.m3u’ which should now be added to the list
  7. The camera streams should now show. It can take 30 seconds to start. Use the track skip buttons to change between the three cameras.

 

Hopefully in the future NTU will either stream directly to a HTML5 compatible format, or set up a live streaming conversion server.

Hope this helps people enjoy watching the falcons.

 

  

Improving SSL/HTTPS Security to an A+

These simple 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 rating started as a B with a reasonably good setup:

Step 2: Improving Ciphers List

SSL v2 is insecure, so it needed to be disabled, and SSLv3 also needed to be disabled as TLS 1.0 suffers a downgrade attack, allowing an attacker to force SSLv3 disabling forward secrecy. I updated my nginx config to use:

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

I opted to configure this in the main nginx.conf file, rather than each domain, as I saw now reason I would make individual 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 maintains maximum backwards compatibility. Although I’m using SNI which isn’t supported by IE6, I prefer my sites to be as backwards compatible 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 retested the site, and improved to an A rating:

Step 3: Deffie Hellman Ephemeral Parameters

Diffie-Hellman ensures that pre-master keys cannot be intercepted by Man In The Middle attacks, and it is easy to enable in Nginx.

First generate a stronger DHE parameter… be prepared to wait around 15 minutes for OpenSSL to generate this certificate:

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

Then configure Nginx to use it:

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

On retesting, I achieved the A+ grade!

Step 4: Add a DNS CAA record

The Certification Authority Authorization (CAA) DNS record allows you to use your DNS records as a mechanism to whitelist certificate authorities that are allowed to issue certificates for their hostnames.

To implement this, I had to change from Amazon AWS Route 53, to Google Cloud DNS, as AWS shamefully doesn’t provide CAA report.

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

0 issue "letsencrypt.org"

Currently this is optional, but it will be mandatory from September 2017.

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

A header can be sent from your server which will inform browsers to only make HTTPS requests. Browsers will no longer make HTTP requests until the header expires. This has two main benefits: a spoofed site without your SSL certificate will not be effective, and subsequent visits to your site will go straight to your HTTPS version without a redirect, making page loading faster.

Be sure to use a low expiry time while developing your site, as once a browser caches the header, it is not possible to clear it. Once you’ve sent this header, 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 development, use this shorter time:

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

There is a push to have browsers have a preloaded list of HTTPS/HSTS enabled sites, but the strict requirements for submission require several sub-domain redirects, which in my opinion would reduce overall performance. I don’t see the harm in still sending the ‘preload’ parameter.

 

Further reading:

BioCity’s Discovery Building with Corona display – 360 Video and Photographs

BioCity’s new Discovery building was unveiled a few days ago, with a unique solar installation, titled Corona, designed by Nottingham artist Wolfgang Buttress in partnership with Nottingham Trent University physicist Dr Martin Bencsik. Fibre-optic lights and aluminum tubes use real-time solar data from NASA, creating a light display which is always unique.

My 360 video with spatial audio:

360 still images:

360 Image of BioCity Discovery Building

360 Image of BioCity Discovery Building

 

Spatial Audio for VR with a Ricoh Theta S Camera and Zoom H2n Audio Recorder

I had a try adding spatial audio to a VR video. In theory this should add realism to a 360 VR video by adding audio that can be processed to play back differently depending on the direction of the viewer.

I updated the Zoom H2n to firmware version 2.00 as described here https://www.zoom.co.jp/H2n-update-v2, and set it to record to uncompressed WAV at 48KHz, 16-bit.

I attached the audio recorder to my Ricoh Theta S camera. I orientated the camera so that the record button was facing toward me, and the Zoom H2n’s LCD display was facing away from me. I pressed record on the sound recorder and then the video camera. I then needed a sound and visual indicator to be able to synchronize the two together in post production, and clicking my fingers worked perfectly.

I installed the http://www.matthiaskronlachner.com/?p=2015. I created a new project in Adobe Premiere, and a new sequence with Audio Master set to Multichannel, and 4 adaptive channels. Next I imported the audio and video tracks, and cut them to synchronize to when I clicked my fingers together.

Exporting was slightly more involved. I exported two files, one for video and one for audio.

For the video export, I used the following settings:

  • Format: H264
  • Width: 2048 Height: 1024
  • Frame Rate: 30
  • Field Order: Progressive
  • Aspect; Square Pixels (1.0)
  • Profile: Main
  • Bitrate: CBR 40Mbps
  • Audio track disabled

For the audio export, I used the following settings:

  • Format: Waveform Audio
  • Audio codec: Uncompressed
  • Sample rate: 48000 Hz
  • Channels: 4 channel
  • Sample Size: 16 bit

I then used FFmpeg to combine the two files with the following command:

ffmpeg -i ambisonic_video.mp4 -i ambisonic_audio.wav -channel_layout 4.0 -c:v copy -c:a copy final_video.mov

And finally injected 360 metadata using the 360 Video Metadata app, making sure to tick both ‘My video is spherical (360)’ and ‘My video has spatial audio (ambiX ACN/SN3D format).

And finally uploaded it to YouTube. It took an extra five hours of waiting for the spatial audio track to be processed by YouTube. Both the web player and native Android and iOS apps appear to support spatial audio.

If you have your sound recorder orientated incorrectly, you can correct it using the plugins. In my case, I used the Z-axis rotation to effectively turn the recorder around.

There are a lot of fascinating optimizations and explanations of ambisonic and spatial audio processing available to read at Wikipedia:

The original in-camera audio (Ricoh Theta S records in mono) to compare can be viewed here:

Jonathan Hassall