Firefox 得到；“阻止加载混合活性内容”；在HTTP网站上 问题

我正在开发一个使用HTTP协议的网站。在开发中，我将Webpack与它的Webpack开发服务器一起使用，它在

http://localhost:9090

我很惊讶地看到Firefox58控制台在加载字体文件时出现了以下错误。这对我来说很奇怪，因为页面是使用HTTP而不是HTTPS提供的，我认为混合内容错误仅限于HTTPS页面

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

---

我发现错误的来源是嵌入页面上

中的YouTube视频（

），因为Firefox端有问题，请遵循他们提供的文档，
:

如何修复网站编辑

避免混合内容阻塞的最佳策略是为所有
将内容转换为HTTPS而不是HTTP

对于您自己的域，将所有内容作为HTTPS提供，并修复您的链接。
通常，内容的HTTPS版本已经存在，而这只是
需要在链接中添加“s”-http://到https://

但是，在某些情况下，路径可能不正确
问题。有在线和离线工具（取决于您的
操作系统），如linkchecker，以帮助解决此问题

对于其他域，如果可用，请使用站点的HTTPS版本
不可用，您可以尝试联系域并询问他们是否
他们可以通过HTTPS提供内容

Firefox似乎缓存字体，并尝试使用字体最初从的URL执行对缓存字体的请求。
这导致了混合内容错误

当我在运行HTTP的本地服务器上开发的运行HTTPS的服务器上部署一个web应用程序时，我看到了字体可怕字体的问题。请求远程站点Firefox报告时：

阻止加载混合活动内容”http://localhost:8080/fontawesome-webfont.woff2“

这给我留下了深刻的印象，因为在该web应用程序中没有对localhost的请求

在您的示例中，字体是由


这是
url（../font/font-Awesome.woff）

iframe加载的其中一个CSS或脚本必须再次尝试加载该字体，可能使用动态构造的URL

我对Firefox中实现的字体缓存策略一无所知——也许他们通过名称来识别字体——但我为我的案例找到的解决方案之一是在Firefox的历史中“忘记这个站点”localhost

您的案例的解决方案可能是切换到
我也有同样的问题。我通过使用相对路径而不是绝对路径来解决它。

由于正在从此CSS“/styles/my.CSS”调用我的字体，
我的字体位于“/font/Open_Sans…”

之前（有FF错误）：

@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;
}

@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;
}

之后（无FF错误）：

@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;
}

@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;
}

我遇到这个问题的原因是我的实时和临时服务器是HTTPS，而我的本地/开发人员副本是HTTP

我通过动态生成CSS，并在CSS中使用内联
数据：
字体，而不是URL引用来解决这个问题。这将删除与字体相关的URL信息，从而避免任何可能的跨站点缓存污染

在我的例子中，我使用了PHP，但这可以更改为任何服务器端语言

<?php
// Declare this as a CSS file for the browser
header('Content-type: text/css');

/*
 * Respond with 304 if the content was served recently
 *
 * The logic here is:
 *
 * We get a IMS date in the request e.g. 21:00 (Then)
 * We look at the current time e.g. 21:30 (Now)
 *
 * So (Now - Then) must be < 60 * 60
 */
if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
    $thenTime = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if(time() - $thenTime < 60 * 60)
    {
        header('HTTP/1.1 304 Not Modified');
        exit;
    }
}

// Tell the client the resource was modified on the last hour
$modifiedDate = gmdate('D, d M Y H:00:00 T', time());
header('Last-Modified: ' . $modifiedDate);

?>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
       url(data:application/x-font-woff;charset=utf-8;base64,<?php echo base64font('open-sans-light.woff') ?>) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'),
       local('OpenSans'),
        url(data:application/x-font-woff;charset=utf-8;base64,<?php echo base64font('open-sans-normal.woff') ?>) format('woff');
}

<?php

function base64font($file)
{
    $fontFolder = realpath(__DIR__ . '/../fonts');
    $data = file_get_contents($fontFolder . '/' . $file);
    $base64 = base64_encode($data);

    return $base64;
}


@字体{
字体系列：“开放式SAN”；
字体风格：普通；
字体大小：300；
src:local（‘开放式无光’），
本地（'OpenSans-Light'），
url（数据：application/x-font-woff；charset=utf-8；base64，）格式（'woff'）；
}
@字体{
字体系列：“开放式SAN”；
字体风格：普通；
字体大小：400；
src:local（'opensans'），
本地（'OpenSans'），
url（数据：application/x-font-woff；charset=utf-8；base64，）格式（'woff'）；
}
这是因为您试图调用http链接，因为httpsurl，您只需将它们更改为相同的，或使用相对路径。
sideshowbarker不，这是合理的，但错误是关于从我的主HTML文件发出的请求-从我的“本地”请求的字体文件样式表。我读过那篇文章，但我不想将我的整个网站配置为HTTPS，因为有一个资源（YouTube iframe）使用HTTPS。我理解您在HTTPS网站上尝试通过HTTP访问资源时创建的漏洞，但我的网站是使用HTTP服务的（因此它不会声称它是完全安全的）整个屏蔽问题在我看来似乎很可笑。此外，没有混合内容，这是一个简单的HTTP站点。没有HTTPS。不幸的是，在我的情况下，切换到HTTPS是不可能的。我不认为这是一个真正的解决方案-切换到HTTPS仅仅是因为你在加载完全合法的字体文件时遇到问题，这听起来像是一个巨大的滥杀。我在Firefox 58.0.2中也看到了同样的情况。在我的情况下，我的页面上甚至没有引用有问题的字体。我的站点位于
https://
后面，所有外部引用（包括字体）都在后面。如果我打开开发者工具网络控制台，我会看到“混合内容”在完全不相关的选项卡中加载字体时出错。一旦我关闭该选项卡并重新加载我自己的网站，错误就会消失。如图所示。无论如何，Webconsole包含所有详细信息。如果错误不可见，请检查web控制台中的过滤器（如果幸运的话，甚至还有一个清除过滤器的链接）.有一点非常错误，因为我看到的字体来自完全不相关的来源…我也看到来自看似不相关的来源的字体，但肯定只有在访问我的历史页面时才会看到。