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]
我有一个 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]