Got "Blocked loading mixed active content" on HTTP website

17,869

Solution 1

It seems that Firefox caches fonts and tries to execute a request to the cached font by use of the URL the font was originally delivered from. That leads to the mixed content error.

I saw that problem with font awesome fonts when I deployed a web application to the server running HTTPS which I had developed on a local server running HTTP. When requesting the remote site Firefox reports:

Blocked loading mixed active content “http://localhost:8080/fontawesome-webfont.woff2”

That impressed me because there is no request to localhost coded in that web application.

In your example the font is loaded by

http://plnkr.co/css/apps/editor-1.6.1.css

which is url(../font/Font-Awesome-More.woff)

One of the CSS or scripts loaded by the iframe must then try to load that font again maybe using a dynamically constructed URL.

I don't know anything about the font caching strategy implemented in Firefox - maybe they identify the font by its name - but one of the solutions I found for my case is to "Forget About This Site" localhost in the history of Firefox.

A solution for your case could be to switch to HTTPS

Solution 2

I had the same issue. I resolved it by using a relative path instead of an absolute path.

Since my fonts are being called from this CSS "/styles/my.css", and my fonts were located in "/fonts/Open_Sans..."

Before (with FF errors):

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/Open_Sans/OpenSans-Light.woff2") format("woff2"),
  url("/fonts/Open_Sans/OpenSans-Light.woff") format("woff");
  font-weight: 300;
}

After (without FF errors):

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-Light.woff2") format("woff2"),
  url("../fonts/Open_Sans/OpenSans-Light.woff") format("woff");
  font-weight: 300;
}
Share:
17,869

Related videos on Youtube

Robert Kusznier
Author by

Robert Kusznier

Programmer, web developer, vegan. Born in 1989 in Poland. My profiles: GitHub | LeetCode What I like: Creating things, which are useful and solve real problems that our world faces, Learning and trying new things, both in programming and other fields, Clean code, good architecture, good design, JavaScript, Python, Haskell, Vim, People and other creatures, Cooking, David Lynch, Béla Tarr, Tom Waits and other cinema and music, Honesty. What I don't like: Writing and working on crappy code, Things that don't work as they should, Laziness, Wasting things.

Updated on June 04, 2022

Comments

  • Robert Kusznier
    Robert Kusznier over 1 year

    Problem

    I'm developing a website served using HTTP protocol. In development I use Webpack with it's webpack-dev-server, which serves the page locally on http://localhost:9090.

    I was surprised to see in Firefox 58 console the following mixed content error about loading the font file. It's weird to me, cause the page is served using HTTP not HTTPS and I thought mixed content errors are limited only to HTTPS pages.

    `Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”
    

    I found out that the source of the error is YouTube video embedded in an <iframe> on the page (<iframe src="https://www.youtube.com/embed/...>). As soon as I remove the YouTube embed, the error disappears from the console.

    I don't understand this behavior, cause it's not nested HTTPS iframe which is making this font request, but the outer HTTP page (top-level browsing context)!

    Summary

    The outer page (top-level browsing context) is served using HTTP. Only it's embedded iframe is fetched using HTTPS. The HTTP request for a font file that the outer page makes (not the embedded iframe) produces mixed content error in Firefox 58 console.

    Code Examples

    To give a working example I created 2 pens on Plunker, which is served over HTTP and imports (the Plunker site itself, not my code) WOFF font Font Awesome over HTTP.

    The example With error, which has YouTube iframe embedded over HTTPS, produces the following error in Firefox 58 console: Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”.

    The example Without error, which is the same code just having the iframe removed, produces no error.

    Questions

    • How can you have a mixed content on a website loaded using HTTP protocol? I thought mixed content can only exist on websites loaded using HTTPS. Does requiring any resource over HTTPS (like it's done by YouTube embed) makes all the content required over HTTP mixed content?
    • How can I fix the error? I don't plan to serve website over HTTPS and I want my fonts to load properly on the production HTTP server.
  • Robert Kusznier
    Robert Kusznier almost 6 years
    I've read that article, but I wouldn't like to configure my whole site for HTTPS, just because one resource (YouTube iframe) uses HTTPS. I understand the vulnerability you create when you try to access resources by HTTP on HTTPS website, but my website is served using HTTP (so it don't make claims that it's totally secure) and the whole blocking issue seems ridiculous to me.
  • Tyler Durden
    Tyler Durden almost 6 years
    Also, there is no mixed content, it is a plain HTTP site. There is no HTTPS.