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 containstrict-origin-when-cross-origin
-
Errors similar to this appear in the browser console:
CONFIG_TEXT: 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.
-
Go to Domains > example.com > Hosting & DNS > Apache & nginx
-
Insert the following rules into Additional nginx directives OR Additional Apache directives sections:
-
For nginx:
CONFIG_TEXT: add_header Content-Security-Policy upgrade-insecure-requests;
-
For Apache:
CONFIG_TEXT: Header always set Content-Security-Policy "upgrade-insecure-requests;"
-
Comments
0 comments
Please sign in to leave a comment.