“Blocked loading mixed active content” in Firefox

Question

I am getting an error in Firefox for my codepen project.

Blocked loading mixed active content “http://localhost:8888/static/components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0”

It works fine in Chrome and Safari but in Firefox the layout seems to be wrong and I can't drag&drop objects. I checked for solutions online which mention that the use of HTTP resources might cause this error but the only external resource I'm using is this:

<head>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="styles/index.css">
</head>

Any idea what else could be wrong?

You include d3js directly from their website. This can cause this error. Use a CDN like cdnjs instead. The reason is that d3 is not delivered as Javascript file but as plain text. So Firefox complains — Fuzzyma

MattSidor MattSidor · Accepted Answer · 2018-04-02T23:50:26

I just had this problem too.

Were you by chance running a local web server on port 8888 at the same time you were trying to test a project on codepen.io? And, was your local web server using the same font-awesome package as your codepen project?

In my case, I was trying to test a project deployed on our staging server on the web at the same time that I was also testing the project on my localhost.

For some reason, Firefox was giving the "mixed active content" warning about my font assets at localhost, even though I was looking at the console for our project on the web, on a completely different server and in a different browser tab.

When I shut down my localhost server, closed the tab that had it open, and refreshed the project on the web, the warnings disappeared.

I have a feeling that this might be a Firefox bug where it is mixing up font assets that have been stored in local cache and are being used across different tabs at the same time.

“Blocked loading mixed active content” in Firefox

1 Answers