QuestionWebsite 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:
add_header Content-Security-Policy upgrade-insecure-requests;
Header always set Content-Security-Policy "upgrade-insecure-requests;"