混合内容页面：请求不安全的样式表错误

Posted 2023-02-22

【中文标题】混合内容页面：请求不安全的样式表错误

【英文标题】：Mixed Content Page: requested an insecure stylesheet error

【发布时间】：2015-08-06 17:23:36

【问题描述】：

我正在开发一个网站。当我使用 http:// 协议打开任何页面时，所有内容都正确加载，但是当我尝试使用 https 协议加载页面时，页面加载但没有 css 和 javascript 文件。 控制台显示以下错误。

混合内容：页面位于 'https://www.example.com/index.php?main_page=login' 已加载 通过 HTTPS，但请求了不安全的样式表 'http://www.example.com/site_map.html'。该请求已 受阻；内容必须通过 HTTPS 提供。

我认为问题是浏览器在 https 协议请求时无法加载任何 css 文件。 问题出在 htaccess 文件上，因为当我删除它时，css 文件正确加载。

页面和 css 文件加载到浏览器，其 url 中带有 https，如下所示

<link rel="stylesheet" type="text/css" href="https://www.example.com/includes/templates/classic/css/style1.css">
<link rel="stylesheet" type="text/css" href="https://www.example.com/includes/templates/classic/css/style2.css">

当浏览器尝试加载 css 文件时，它会被重定向到

http://www.example.com/site_map.html  

如何让 htaccess 允许 https 打开特定文件夹中的 css 和 js 文件？ 谢谢

更新 htaccess 文件内容

RewriteEngine On
RewriteCond %SERVER_PORT ^443$
RewriteRule (.*) http://www.example.com/$1 
###############################################################################
# Common directives
###############################################################################
# NOTE: Replace /shop/ with the relative web path of your catalog in the "Rewrite Base" line below:

Options +FollowSymLinks
RewriteEngine on

RewriteCond %HTTP_HOST ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

RewriteCond %THE_REQUEST ^[A-Z]3,9\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://www.example.com/ [R=301,L]

#RewriteBase /

###############################################################################
# Start Ultimate SEO URLs
###############################################################################

# Original (unchanged) URL formats
RewriteRule ^(.*)-p-([0-9]+)(.*)$ index\.php?main_page=product_info&products_id=$2&%QUERY_STRING [L]
RewriteRule ^(.*)-c-(.*)-p(.*)\.html$ /index.php?main_page=$4&cPath=$2&sort=$5&page=$3
RewriteRule ^(.*)-c-([0-9_]+)(.*)$ index\.php?main_page=index&cPath=$2&%QUERY_STRING [L]
RewriteRule ^(.*)-ez-(.*).html$ index.php?main_page=page&id=$2 [L]

# All other pages
# Don't rewrite real files or directories
RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteRule ^(.*)$ index\.php?main_page=$1&%QUERY_STRING [L]


# Block out any script trying to base64_encode data within the URL.
RewriteCond %QUERY_STRING base64_encode[^(]*\([^)]*\) [OR]
# Block out any script that includes a <script> tag in URL.
RewriteCond %QUERY_STRING (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]
# Block out any script trying to set a PHP GLOBALS variable via URL.
RewriteCond %QUERY_STRING GLOBALS(=|\[|\%[0-9A-Z]0,2) [OR]
# Block out any script trying to modify a _REQUEST variable via URL.
RewriteCond %QUERY_STRING _REQUEST(=|\[|\%[0-9A-Z]0,2)
RewriteRule   index.html$  index.php [QSA] 


# 480 weeks
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

# 2 DAYS
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

# 2 HOURS
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

RewriteEngine on
RewriteBase /

ErrorDocument 404 /index.php
RewriteRule   index.html$  index.php [QSA]

【问题讨论】：

可以发.htaccess的内容吗？

我更新了问题

【参考方案1】：

如果您能够通过 HTTPS 提供 CSS 等服务，最好的解决方案是使用 use // as the scheme 获取资产 URL。

这意味着“使用与父文档相同的方案（有时称为协议）”，即如果页面使用https，则使用https。例如：

<link rel="stylesheet" href="//mysite.com/styles.css">
<script src="//mysite.com/app.js"></script>

【讨论】：

你错过了 URL 的域

" 即如果页面使用 https，则使用 https" 让我困惑了一秒钟，但您的示例成功了：只需将所有 http:// 替换为 //

//导致找不到文件。

【参考方案2】：

这是你的问题：

RewriteCond %SERVER_PORT ^443$
RewriteRule (.*) http://www.example.com/$1 

您不允许 SSL 请求（443 端口号用于 HTTPS 请求）。尝试删除这些行。

【参考方案3】：

很可能在您的 html 代码中，您有类似

的内容

<link href="http://someSite.com/css/someStyle.css" rel="stylesheet" type="text/css" />

你应该把它改成

<link href="https://someSite.com/css/someStyle.css" rel="stylesheet" type="text/css" />

您所指的页面也是 .html 而不是 css，但我想这是一个错字...

【讨论】：

当页面加载了 https 和 css 文件时，url 也使用了 https。当浏览器打开它时，服务器响应重定向页面在我的情况下是'example.com/site_map.html'

我的 css 文件中有一个 http。更改为 tpps 也有效。谢谢！

@loannis Loukeris，“http”和“hhtps”应该是动态的。用户可以使用任何一种浏览。谢谢

这正是问题所在。它还使页面加载速度更快。所以这有助于我用一块石头杀死两只鸟。

最佳实践表明您永远不应该将域放在代码中。

【参考方案4】：

在 Drupal 8.0.1 中遇到类似错误

错误 - 混合内容：'' 处的页面是通过 HTTPS 加载的，但请求了不安全的样式表 ''。此请求已被阻止；内容必须通过 HTTPS 提供。

解决方案 - 打开 .htaccess 文件并添加以下行 标头始终设置 Content-Security-Policy "upgrade-insecure-requests;"

【讨论】：

您帮助解决这个问题来自 AWS beanstalk 环境中托管的 laravel 应用程序。我刚刚将文本添加到我的 public/.htaccess 文件中。谢谢

【参考方案5】：

我使用了 cloudflare 的插件，如他们的指南 here 中所述。

【参考方案6】：

您可能还需要检查您的 WordPress 地址 (URL) 和 站点地址 (URL) 在常规设置下，并确保您的 URL 是 https://www.yourdomain.com