CSS 上的图像未作为 HTTPS 提供

Images on CSS are not being served as HTTPS

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

我试过将我的网址用作 //talesebner.com/images/logo.svg, https://talesebner.com/images/logo.svg, and even 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

你的图片在 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]