在 HTTPS 中加载 Google 字体，内容被阻止

Question

有一个 WordPress 主题，可以自动提取所选的选项字体并从 google 字体请求它。当某些选定页面需要 ssl 时，字体变为

missing

查看控制台日志：

[已阻止]“https://www.example.com/”页面已通过 HTTPS 加载，但运行来自“http://fonts.googleapis.com/css?family=Alegreya+Sans”的不安全内容:300,400,500,700,800'：此内容也应该通过 HTTPS 加载。

进入代码并使来自谷歌字体的 https 中的所有请求都有效吗？有解决办法吗？

找到了源代码...但似乎已经在这样做...if逻辑中是否有错误？

$prefix = "http";
            if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') $prefix = "https";

            if($get_google_font){

            if(!in_array($rule_split[0], $this->used_fonts))
            {
                $this->extra_output .= "\n<!-- google webfont font replacement -->\n";
                $this->extra_output .= '<link id="google_webfont_'.$this->webfont_count.'" rel="stylesheet" type="text/css" href="'.$prefix.'s://fonts.googleapis.com/css?family='.str_replace(' ','+',$rule_split[0]).$font_weight.'" />';
            }

Answer 1

编辑您的主题，将每次出现的

http://fonts.googleapis.com/...

替换为

https://fonts.googleapis.com/...

（注意 s）。

当在安全页面的上下文中请求时，可能会带来安全风险的资源（例如脚本和字体）必须通过安全连接加载，原因很明显：它们可能在此过程中被操纵。

Answer 2

使用协议相对URI

只需使用

//

前缀。 (

instead of http[s]://

)

• 在 https 页面上，将加载安全版本。
• 在纯 http 页面上，将加载纯 http 版本。

编辑您的主题，将每次出现的

http://fonts.googleapis.com/...

替换为

//fonts.googleapis.com/...

Answer 3

让浏览器处理所有事情，只需从您的引用中删除“http”即可。

同样，如果您遇到与其他库相同的问题，您也必须为它们做同样的事情 例如

https://fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

到

//fonts.googleapis.com/css?family=Open+Sans:700,600,800,400

同样适用于

http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

到

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

Answer 4

我在使用google cdn链接时遇到了这个问题，并且无法访问（例如像中国这样的国家），请尝试使用本地文件代替cdns