CSS 上的图像未作为 HTTPS 提供

Question

我有一个 css 文件，我将一些图像称为背景。虽然我的网站有一个有效的证书，并且图片在同一个地址，但它不起作用。

我尝试将我的网址用作 //talesebner.com/images/logo.svg、https://talesebner.com/images/logo.svg，甚至是https://www.talesebner.com/images/logo.svg。但是 Chrome 和 Lighthouse 也一直说它们不是通过 HTTPS 加载的。

作为副作用（我相信）图像甚至没有被加载到 iPhone 上的 Safari 上。

我能做什么？

编辑：按照要求，这是我的 .htaccess 代码：

ErrorDocument 500 /errors/500.html
ErrorDocument 404 /errors/404.html
ErrorDocument 403 "Sorry, I can't allow your access today."

<IfModule mod_mime.c>
    AddDefaultCharset utf-8
    DefaultLanguage en-GB
</IfModule>

<IfModule mod_autoindex.c>
    Options -Indexes
</IfModule>

#Compress text files
<ifModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/bmp
    AddOutputFilterByType DEFLATE image/vnd.microsoft.icon
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rdf+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/ecmascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/ecmascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/ld+json
    AddOutputFilterByType DEFLATE application/manifest+json
    AddOutputFilterByType DEFLATE application/schema+json
    AddOutputFilterByType DEFLATE application/geo+json
    AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE font/truetype
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/eot
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE application/x-pointplus
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/wasm
    AddOutputFilterByType DEFLATE text/cache-manifest
    AddOutputFilterByType DEFLATE text/calendar
    AddOutputFilterByType DEFLATE text/markdown
    AddOutputFilterByType DEFLATE text/vcard
    AddOutputFilterByType DEFLATE text/vnd.rim.location.xloc
    AddOutputFilterByType DEFLATE text/vtt
    AddOutputFilterByType DEFLATE text/x-component
    AddOutputFilterByType DEFLATE text/x-cross-domain-policy
</IfModule>
<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

#Redirects
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteOptions inherit

    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^mail\/?$ "https\:\/\/sxb1plzcpnl453513\.prod\.sxb1\.secureserver\.net\:2096\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^cpanel\/?$ "https\:\/\/sxb1plzcpnl453513\.prod\.sxb1\.secureserver\.net\:2083\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^cv\/?$ "https\:\/\/talesebner\.com\/tales\-ebner\-cv\.pdf" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^portfolio\/?$ "https\:\/\/www\.figma\.com\/proto\/uAmDiShc6IahLeyhizKPQx\/\[Tales\-Ebner\]\?node\-id\=282\:15\&viewport\=\-1412\,635\,0\.3143424093723297\&scaling\=contain\&hotspot\-hints\=0\&hide\-ui\=1" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^vcard\/?$ "https\:\/\/talesebner\.com\/tales\-ebner\.vcf" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^regex\/?$ "https\:\/\/talesebner\.com\/regex\.html" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2013\/?$ "https\:\/\/web\.archive\.org\/web\/20140714190641\/http\:\/\/tales\.ebner\.com\.br\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2014\/?$ "https\:\/\/web\.archive\.org\/web\/20141218124503\/http\:\/\/ebner\.com\.br\/" [R=301,L]

    RewriteCond %{HTTP_HOST} ^talesebner\.com$
    RewriteRule ^old\/2016\/?$ "https\:\/\/web\.archive\.org\/web\/20161002001905\/http\:\/\/ebner\.com\.br\/" [R=301,L]
</IfModule>

#Expire headers
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch "\.(ttf|otf|woff|woff2)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

ExpiresActive On
ExpiresDefault "access plus 31536000 seconds"
ExpiresByType image/x-icon "access plus 31536000 seconds"
ExpiresByType image/jpeg "access plus 31536000 seconds"
ExpiresByType image/jpg "access plus 31536000 seconds"
ExpiresByType image/png "access plus 31536000 seconds"
ExpiresByType image/gif "access plus 31536000 seconds"
ExpiresByType image/webp "access plus 31536000 seconds"
ExpiresByType text/css "access plus 31536000 seconds"
ExpiresByType text/javascript "access plus 31536000 seconds"
ExpiresByType application/javascript "access plus 31536000 seconds"
ExpiresByType application/x-javascript "access plus 31536000 seconds"
ExpiresByType text/html "access plus 31536000 seconds"
ExpiresByType application/xhtml+xml "access plus 31536000 seconds"
ExpiresByType font/ttf "access plus 31536000 seconds"
ExpiresByType font/otf "access plus 31536000 seconds"
ExpiresByType font/woff "access plus 31536000 seconds"
ExpiresByType font/woff2 "access plus 31536000 seconds"

#Cache-Control Headers
<IfModule mod_headers.c>
    Header set X-Frame-Options SAMEORIGIN
    Header set X-Content-Type-Options nosniff
    Header set X-XSS-Protection "1"
    Header set Cache-Control "private, max-age=31536000, must-revalidate"
    Header set Content-Security-Policy "default-src 'self'; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
</IfModule>

#Turn ETags Off
Header unset Pragma
FileETag None
Header unset ETag

Answer 1

您的图像似乎可以通过https://example.com/（无 www）加载到我身上——所以也许您已经解决了这个问题？但是，您的 www 到非 www 重定向存在导致重定向循环的问题，因此如果您使用 www.example.com 引用您的任何图像，那么它们将无法加载。 （顺便说一句，由于这是一个 301（永久）重定向，因此您可能会看到错误的缓存响应。）

RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]

PROTO 环境变量似乎没有在您发布的代码中设置，这会导致 relative（格式错误）重定向到 https://www.example.com/<filepath-to-document-root>://example.com/foo，这自然会导致重定向循环.

您应该硬编码https 协议，就像在所有其他指令中一样：

:
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]

有可能这个 PROTO env var 打算在您继承自的 .htaccess 文件（或父配置）中设置（RewriteOptions inherit 指令的目的） - 如果有的话 - 但确实如此似乎不是这样。

---

此外，除非您计划实施HSTS，否则您应该将 HTTP 反转为 HTTPS，将 www 反转为非 www 规则，以避免在请求 http://www.example.com/（即 HTTP 和 www）时出现不必要的双重重定向。例如：

# 1. Redirect www to non-www (and HTTPS)
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]

# 2. Redirect HTTP to HTTPS (already non-www)
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]