I am having a weird mixed content request blocking issue from my web site and trust me I have beeing googling to resolve this issue for more than couple of months already.
I am using AngularJS1 as front-end and Spring boot as back-end.
When I access my website, sometimes randomly I got the below error:
Mixed Content: The page at http://mywebsite was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://mywebsite.com/'. This request has been blocked; the content must be served over HTTPS.
But this problem goes away when I refresh or reload the page. After that, everything is working perfectly as expected because I am not using any HTTP ajax call but only internal HTTPS ajax call.
I even checked whether my website has some request using "http" using third-party tool and my website was clean.
This issue does not happen all the time. It happens randomly but it will always go away if I refresh the page.
Please please help me solve this issue.
============== Updated status as of 27th of March, 2018 =================
I am still suffering from the same issue although I did a workaround. I added errorCallBack that catches all errors except HTTP 500 error for the Ajax call that reloads the page only once so that the page gets reloaded which resolved the issue.
But this should not be a solution. Please help me anyone.
You can try this:-
Or
Paste it in
<head>...</head>tags.The HTTP
Content-Security-Policy(CSP)block-all-mixed-contentdirective prevents loading any assets using HTTP when the page is loaded using HTTPS.All mixed content resource requests are blocked, including both active and passive mixed content. This also applies to
<iframe>documents, ensuring the entire page is mixed content free.The
upgrade-insecure-requestsdirective is evaluated beforeblock-all-mixed-contentand If the former is set, the latter is effectively a no-op. It is recommended to set one directive or the other – not both.