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

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

The gen­er­al push to use SSL/HTTPS for every web site is improv­ing secu­ri­ty and pri­va­cy on the Inter­net. How­ev­er, every request a web site makes will need to be secure, or browsers can remove the ‘Secure’ indi­ca­tor, show a warn­ing sym­bol, and some­times pop up errors.

You can add a sim­ple head­er that will tell browsers to report back to your serv­er if any inse­cure requests are made. I com­bined this with a sim­ple PHP script that logs to the server’s error log.  This alerts me to sites I host and devel­op that have inse­cure con­tent, 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 sim­ple PHP script as csp-report-endpoint.php:


Now, when a site attempts to load an inse­cure resource, you will get a mes­sage in your error log, and you can use this infor­ma­tion to fix your site.

Improving SSL/HTTPS Security to an A+

Improving SSL/HTTPS Security to an A+

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.


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 ""

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:

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

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

I had a try adding spa­tial audio to a VR video. In the­o­ry this should add real­ism to a 360 VR video by adding audio that can be processed to play back dif­fer­ent­ly depend­ing on the direc­tion of the viewer.

I updat­ed the Zoom H2n to firmware ver­sion 2.00 as described here, and set it to record to uncom­pressed WAV at 48KHz, 16-bit.

I attached the audio recorder to my Ricoh Theta S cam­era. I ori­en­tat­ed the cam­era so that the record but­ton was fac­ing toward me, and the Zoom H2n’s LCD dis­play was fac­ing away from me. I pressed record on the sound recorder and then the video cam­era. I then need­ed a sound and visu­al indi­ca­tor to be able to syn­chro­nize the two togeth­er in post pro­duc­tion, and click­ing my fin­gers worked perfectly.

I installed the I cre­at­ed a new project in Adobe Pre­miere, and a new sequence with Audio Mas­ter set to Mul­ti­chan­nel, and 4 adap­tive chan­nels. Next I import­ed the audio and video tracks, and cut them to syn­chro­nize to when I clicked my fin­gers together.

Export­ing was slight­ly more involved. I export­ed two files, one for video and one for audio.

For the video export, I used the fol­low­ing settings:

  • For­mat: H264
  • Width: 2048 Height: 1024
  • Frame Rate: 30
  • Field Order: Progressive
  • Aspect; Square Pix­els (1.0)
  • Pro­file: Main
  • Bitrate: CBR 40Mbps
  • Audio track disabled

For the audio export, I used the fol­low­ing settings:

  • For­mat: Wave­form Audio
  • Audio codec: Uncompressed
  • Sam­ple rate: 48000 Hz
  • Chan­nels: 4 channel
  • Sam­ple Size: 16 bit

I then used FFm­peg to com­bine the two files with the fol­low­ing command:

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

And final­ly inject­ed 360 meta­da­ta using the 360 Video Meta­da­ta app, mak­ing sure to tick both ‘My video is spher­i­cal (360)’ and ‘My video has spa­tial audio (ambiX ACN/SN3D format).

And final­ly uploaded it to YouTube. It took an extra five hours of wait­ing for the spa­tial audio track to be processed by YouTube. Both the web play­er and native Android and iOS apps appear to sup­port spa­tial audio.

If you have your sound recorder ori­en­tat­ed incor­rect­ly, you can cor­rect it using the plu­g­ins. In my case, I used the Z‑axis rota­tion to effec­tive­ly turn the recorder around.

There are a lot of fas­ci­nat­ing opti­miza­tions and expla­na­tions of ambison­ic and spa­tial audio pro­cess­ing avail­able to read at Wikipedia:

The orig­i­nal in-cam­era audio (Ricoh Theta S records in mono) to com­pare can be viewed here:

Sony Noise Cancelling Headphones as Binaural Microphones

Sony Noise Cancelling Headphones as Binaural Microphones

My Sony smart­phone has an unusu­al TRRRS (Tip-Ring-Ring-Ring-Seal) con­nec­tor, allow­ing it to use very rea­son­ably priced noise can­celling head­phones (Sony MDR-NC31EM) that have an extra micro­phone in each earphone.

I found that the Sony app Sound Recorder allows select­ing record­ing direct­ly from these two micro­phones, and are great for bin­au­r­al record­ing, and I gave it a go walk­ing along a few busy streets. You can lis­ten on YouTube and Soundcloud: