Question

问题

我正在开发一个使用HTTP协议服务的网站。在开发中，我使用Webpack和它的webpack-dev-server，它在http://localhost:9090本地提供页面。

我很惊讶在Firefox 58控制台中看到有关加载字体文件的以下mixed content错误。这对我来说很奇怪，因为页面是使用HTTP而不是HTTPS提供的，我认为混合内容错误仅限于HTTPS页面。

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

我发现错误来源是嵌入在页面<iframe>上的YouTube视频（<iframe src="https://www.youtube.com/embed/...>）。我删除YouTube嵌入后，错误就会从控制台中消失。

我不明白这种行为，因为它不是嵌套的HTTPS iframe正在发出这个字体请求，而是外部HTTP页面（顶级浏览上下文）！

摘要

使用HTTP提供外部页面（顶级浏览上下文）。只有使用HTTPS获取嵌入式iframe。外部页面生成的字体文件的HTTP请求（不是嵌入式iframe）在Firefox 58控制台中产生混合内容错误。

代码示例

为了给出一个工作示例，我在Plunker上创建了2个笔，它通过HTTP和导入提供（Plunker站点本身，而不是我的代码）WOFF font Font Awesome over HTTP。

示例错误，其中嵌入了通过HTTPS嵌入的YouTube iframe，在Firefox 58控制台中产生以下错误：Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”。

示例无错误，与删除iframe的代码相同，不会产生错误。

问题

如何在使用HTTP协议加载的网站上添加混合内容？我认为混合内容只能存在于使用HTTPS加载的网站上。是否需要通过HTTPS提供任何资源（就像YouTube嵌入式网站所做的那样）会产生HTTP混合内容所需的所有内容？
如何修复错误？我不打算通过HTTPS提供网站服务，我希望我的字体能够在生产HTTP服务器上正确加载。

Answer 1

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

当我将Web应用程序部署到运行HTTPS的服务器时，我看到了字体真棒字体的问题，这是我在运行HTTP的本地服务器上开发的。请求远程站点Firefox报告时：

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

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

在您的示例中，字体由

加载

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

是url(../font/Font-Awesome-More.woff)

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

我对Firefox中实现的字体缓存策略一无所知 - 也许他们通过名称识别字体 - 但我找到的解决方案之一就是＆＃34;忘掉这个网站＆＃ 34; Firefox历史上的localhost。

针对您的案例的解决方案可能是切换到HTTPS

Answer 2

我有同样的问题。 我使用相对路径而不是绝对路径解决了这个问题。

由于我的字体是从这个CSS“/styles/my.css”调用的，我的字体位于“/ fonts / 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;
}

之后（没有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;
}

Answer 3

由于你在Firefox上遇到问题，请按照他们给出的文档， How to fix a website with blocked mixed content：

如何修复您的网站编辑

避免混合内容阻止的最佳策略是为所有人服务   内容为HTTPS而非HTTP。

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

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

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

Answer 4

由于我的活动和登台服务器是HTTPS，而我的本地/开发副本是HTTP，因此遇到了这个问题。

我通过动态生成CSS并在CSS中使用内联data:字体而不是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;
}

如果已经提供给浏览器的副本是最新的，我将304标头设置为插入。您不必一定要这样做，但是如果这样做的话，它将提高性能。字体定义很少更改，因此可以在人流量大的网站上延长此延迟。

Answer 5

那是因为您试图调用 http 链接，因为 https 网址，您只需要将它们更改为相同，或使用相对路径。 >

在HTTP网站上获得“阻止加载混合活动内容”

问题

摘要

代码示例

问题

5 个答案: