Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?

HttpSecurityFirefoxHttpsMixed Content

Http Problem Overview


This morning, upon upgrading my Firefox browser to the latest version (from 22 to 23), some of the key aspects of my back office (website) stopped working.

Looking at the Firebug log, the following errors were being reported:

Blocked loading mixed active content "http://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
Blocked loading mixed active content "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"`

among other errors caused by the latter of the two above not being loaded.

What does the above mean and how do I resolve it?

Http Solutions


Solution 1 - Http

I found this blog post which cleared up a few things. To quote the most relevant bit:

>Mixed Active Content is now blocked by default in Firefox 23! > >What is Mixed Content?
>When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks. > >However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.

The resolution, in my case, was to simply ensure the jquery includes were as follows (note the removal of the protocol):

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>

Note that the temporary 'fix' is to click on the 'shield' icon in the top-left corner of the address bar and select 'Disable Protection on This Page', although this is not recommended for obvious reasons.

UPDATE: This link from the Firefox (Mozilla) support pages is also useful in explaining what constitutes mixed content and, as given in the above paragraph, does actually provide details of how to display the page regardless:

>Most websites will continue to work normally without any action on your part. > >If you need to allow the mixed content to be displayed, you can do that easily: > >Click the shield icon Mixed Content Shield in the address bar and choose Disable Protection on This Page from the dropdown menu. > >The icon in the address bar will change to an orange warning triangle Warning Identity Icon to remind you that insecure content is being displayed. > >To revert the previous action (re-block mixed content), just reload the page.

Solution 2 - Http

It means you're calling http from https. You can use src="//url.to/script.js" in your script tag and it will auto-detect.

Alternately you can use use https in your src even if you will be publishing it to a http page. This will avoid the potential issue mentioned in the comments.

Solution 3 - Http

In absence of a white-list feature you have to make the "all" or "nothing" Choice. You can disable mixed content blocking completely.


The Nothing Choice

You will need to permanently disable mixed content blocking for the current active profile.

In the "Awesome Bar," type "about:config". If this is your first time you will get the "This might void your warranty!" message.

Yes you will be careful. Yes you promise!

Find security.mixed_content.block_active_content. Set its value to false.


The All Choice

[iDevelApp][1]'s answer is awesome.

[1]: https://stackoverflow.com/users/1578713/idevelapp "iDevelApp"

Solution 4 - Http

Put the below <meta> tag into the <head> section of your document to force the browser to replace unsecure connections (http) to secured connections (https). This can solve the mixed content problem if the connection is able to use https.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

If you want to block then add the below tag into the <head> tag:

<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

Solution 5 - Http

Its given the error because of security. for this please use "https" not "http" in the website url.

For example :

   "https://code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css"
   "https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"

Solution 6 - Http

In the relevant page which makes a mixed content https to http call which is not accessible we can add the following entry in the relevant and get rid of the mixed content error.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Solution 7 - Http

If you are consuming an internal service via AJAX, make sure the url points to https, this cleared up the error for me.

Initial AJAX URL: "http://XXXXXX.com/Core.svc/" + ApiName
Corrected AJAX URL: "https://XXXXXX.com/Core.svc/" + ApiName,

Solution 8 - Http

Simply changing HTTP to HTTPS solved this issue for me.

WRONG :

<script src="http://code.jquery.com/jquery-3.5.1.js"></script>

CORRECT :

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Solution 9 - Http

I had this same problem because I bought a CSS template and it grabbed a javascript an external javascript file through http://whatever.js.com/javascript.js. I went to that page in my browser and then changed it to https://whatever... using SSL and it worked, so in my HTML javascript tag I just changed the URL to use https instead of http and it worked.

Solution 10 - Http

To force redirect on https protocol, you can also add this directive in .htaccess on root folder

RewriteEngine on

RewriteCond %{REQUEST_SCHEME} =http

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Solution 11 - Http

@Blender Comment is the best approach. Never hard code the protocol anywhere in the code as it will be difficult to change if you move from http to https. Since you need to manually edit and update all the files.

This is always better as it automatically detect the protocol.

src="//code.jquery.com

Solution 12 - Http

I found if you have issues with including or mixing your page with something like http://www.example.com, you can fix that by putting //www.example.com instead

Solution 13 - Http

I have facing same problem when my site goes from http to https. We have added rule for all request to redirect http to https.

You needs to add the redirection rule for inter site request, but you have to remove the redirection rule for external js/css.

Solution 14 - Http

I just fixed this problem by adding the following code in header:

	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Solution 15 - Http

I've managed to fix this using these :

> For Firefox user

  1. Open a new TAB enter about:config in the address bar to go to the configuration page.
  2. Search for security.mixed_content.block_active_content
  3. Change TRUE to FALSE.

> For Chrome user

  1. Click the Not Secure Warning next to the URL

    Not secure warning

  2. Click Site Settings on the popup box

    Site Settings

  3. Change Insecure Content to Allow

    Insecure Content

  4. Close and refresh the page

Solution 16 - Http

If your app server is weblogic, then make sure WLProxySSL ON entry exists(and also make sure it should not be commented) in the weblogic.conf file in webserver's conf directory. then restart web server, it will work.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAppulusView Question on Stackoverflow
Solution 1 - HttpAppulusView Answer on Stackoverflow
Solution 2 - HttpAlain Jacomet ForteView Answer on Stackoverflow
Solution 3 - HttpDRaehalView Answer on Stackoverflow
Solution 4 - Httptapas talukderView Answer on Stackoverflow
Solution 5 - HttpAmit NaraniwalView Answer on Stackoverflow
Solution 6 - HttpsramayView Answer on Stackoverflow
Solution 7 - HttpBryan Cote-ChangView Answer on Stackoverflow
Solution 8 - HttpAlexander BorisovView Answer on Stackoverflow
Solution 9 - HttpbigpotatoView Answer on Stackoverflow
Solution 10 - HttpMassimilianoView Answer on Stackoverflow
Solution 11 - HttpKrishnadas PCView Answer on Stackoverflow
Solution 12 - Httpirene salomoView Answer on Stackoverflow
Solution 13 - Httptapas talukderView Answer on Stackoverflow
Solution 14 - HttpRKAISSI YoussefView Answer on Stackoverflow
Solution 15 - HttpSyafiqur__View Answer on Stackoverflow
Solution 16 - HttpPrasad ReddyView Answer on Stackoverflow