☰

Nginx 无法通过 https 加载 css/js/images - 阻止加载混合活动内容

tag-icon • tag-icon nginx ubuntu-14.04 ansible
Nginx 无法通过 https 加载 css/js/images - 阻止加载混合活动内容

我正在运行带有 Nginx 1.8.0 的 ubuntu 14.04。在 https 中打开网页时，页面似乎已损坏，因为 css/js/images 未加载。我收到此错误“ Blocked loading mixed active content”

这是我的nginx.conf：https://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/nginx.j2

这是我的虚拟主机文件： https://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/virtualhost_ssl.j2

有人可以指导我如何解决这个问题吗？

答案1

无法通过 nginx 配置修复

考虑以下 html 文件：

  <html>
    <head>
    </head>
    <body>
      <img src="http://example.com/some/image.png">
    </body>
  </html>

如果此 html 文件通过 https 提供 - 它将总是生成混合内容警告。尝试修复后续请求/some/image.png将不起作用，请求被浏览器阻止并且不会到达服务器。

修复 html

唯一有效的解决方案是修复主请求的 html 源，以便它https://也请求所有资产，即将 html 更改为以下内容：

  <html>
    <head>
    </head>
    <body>
      <img 
        src="/some/image.png" 
        alt="same domain and port as this html page please"
      />
    </body>
  </html>

或这个：

  <html>
    <head>
    </head>
    <body>
      <img 
        src="https://example.com/some/image.png" 
        alt="explicit https" 
      />
    </body>
  </html>

在评论中你提到了 wordpress 作为例子；对于 wordpress 安装，唯一需要做的（原则上，在实践中可能会有些混乱）是更改网站网址这样 wordpress 就将其视为https://example.com安装的根 url。

答案2

Firefox 23 及以上版本现在默认阻止混合活动内容。不确定其他浏览器是否如此

什么是混合内容？

当用户访问通过 HTTP 提供的页面时，他们的连接很容易受到窃听和中间人 (MITM) 攻击。当用户访问通过 HTTPS 提供的页面时，他们与 Web 服务器的连接会通过 SSL 进行身份验证和加密，因此可以防止窃听和中间人攻击。

但是，如果 HTTPS 页面包含 HTTP 内容，即使主页是通过 HTTPS 提供的，攻击者也可以读取或修改 HTTP 部分。当 HTTPS 页面包含 HTTP 内容时，我们将该内容称为“混合内容”。用户访问的网页仅部分加密，因为部分内容是通过 HTTP 未加密检索的。混合内容拦截器会拦截 HTTPS 页面上的某些 HTTP 请求。

听起来你正在链接非 SSL 静态内容。你应该像这样链接你的内容

<a href='//host.com/file.png>

如果您需要从另一个主机链接。

相关内容