Website running on Plesk has a broken layout when opening via HTTPS: blocked:mixed-content

Symptoms

• Website has a broken layout (CSS) when opening via HTTPS - some elements in the browser console (F12) contain status blocked:mixed-content while their headers contain strict-origin-when-cross-origin

• Errors similar to this appear in the browser console:

  Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/css/StyleSheet.css'. This request has been blocked; the content must be served over HTTPS.

• CSS styles can be accessed directly using HTTPS

• When accessed using HTTP the website works as expected

Cause

The website uses HTTP links inside its code. Since the website is accessed through HTTPS this causes what is known as "mixed content", which is not allowed by browsers as it is a bad practice for security.

Resolution

Adjust the website code or configure the following Content-Security-Policy header to force web server to upgrade HTTP requests to HTTPS.

1. Log into Plesk

2. Go to Domains > example.com > Hosting & DNS > Apache & nginx

3. Insert the following rules into Additional nginx directives OR Additional Apache directives sections:

   • For nginx:

     add_header Content-Security-Policy upgrade-insecure-requests;

   • For Apache:

     Header always set Content-Security-Policy "upgrade-insecure-requests;"