【问题标题】：google tag manager gives "mixed content" error谷歌标签管理器给出“混合内容”错误
【发布时间】：2014-11-12 15:43:39
【问题描述】：

我正在使用谷歌标签管理器：

<script>
(function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
        'gtm.start': new Date().getTime(),
        event: 'gtm.js'
    });
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != 'dataLayer' ? '&l=' + l : '';
    j.async = true;
    j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');
</script>

但是当我使用https:// 调用页面时，它给了我混合内容错误： 1) .... 已通过 HTTPS 加载，但运行来自“http://www.youtube.com/iframe_api”的不安全内容：此内容也应通过 HTTPS 加载。 2) .... 已通过 HTTPS 加载，但运行来自“http://s.ytimg.com/yts/jsbin/www-widgetapi-vflFaZyew/www-widgetapi.js”的不安全内容：此内容也应通过 HTTPS 加载。

我不知道为什么或如何解决这个问题，你能帮忙吗？谢谢。

【问题讨论】：

最明显的检查是您是否有（自定义）标签运行在非安全网址上。即使您自己没有将它们放在那里，检查这一点也是值得的，来自显示发布商的基于 javascript 的标签可能包含不安全的内容（不过，在您的情况下，您似乎试图通过标签管理器嵌入 youtube 视频）。

标签： google-tag-manager youtube-iframe-api mixed-content

【解决方案1】：

您可能需要确保您的标签（尤其是自定义标签）没有指定 http 协议。您可以通过不使用 URL 的协议部分使 URL 同时在 http 和 https 上工作。例如：

//www.google.com/

【讨论】：

只有在相关服务器安装了 ssl 证书时才如此。
这是由谷歌标签管理器中的客户脚本调用youbube.com而不是//www.youtube.com引起的，现在它已修复。

【解决方案2】：

如果您使用的是 scully，请在 here 讨论此问题。

Scully 使用 http 生成渲染。因此，标题中的 google 标签管理器脚本将在所有页面中包含 http 请求。

解决方案 1

正如 SanderElias 在 issue 中指出的那样，

A quick solution would be a plugin that scans your results, and replaces http with https,
However, we are already looking into supporting https during development, which will solve your issue too.

所以我在这个设置中使用了这个plugin。

const RegexPlugin = getRegexPlugin();
setPluginConfig(RegexPlugin, {
    replacements: [{
        from: 'http:',
        to: 'https:'
    }]
});

这确实会将所有 http 替换为 https。

警告：如果您的链接仅适用于 http，则会破坏所有链接。因此，我不得不在 scully 后期渲染后手动将其改回 http。

解决方案 2

在 SSL 模式下运行 scully。

【讨论】：