混合內容頁面：請求不安全的樣式表錯誤

Question

我有一個網站正在處理它。 當我使用 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 文件加載正確。

像這樣在 URL 中使用 https 加載到瀏覽器的頁面和 css 文件

<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]

Answer 1

如果您能夠通過 HTTPS 提供 CSS 等服務，最好的解決方案是使用//作為資產 URL的方案。

這意味着“使用相同的方案（有時稱為協議）作為父文檔”，即使用https如果頁面用途https 。 例如：

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

Answer 2

這是你的問題：

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

您不允許 SSL 請求（443 端口號用於 HTTPS 請求）。 嘗試刪除這些行。

Answer 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，但我想這是一個錯字......

Answer 4

在 Drupal 8.0.1 中遇到類似的錯誤

錯誤-混合內容：'' 處的頁面已通過 HTTPS 加載，但請求了不安全的樣式表 ''。 此請求已被阻止； 內容必須通過 HTTPS 提供。

解決方案- 打開 .htaccess 文件並添加以下行Header always set Content-Security-Policy "upgrade-insecure-requests;"

Answer 5

我使用CloudFlare的插件為指導中所描述這里。

Answer 6

您可能還需要在常規設置下檢查您的WordPress 地址 (URL)和站點地址 (URL) ，並確保您的 URL 為https://www.yourdomain.com