Problem: I'm developing a Symfony website on http and check it in Chrome, but need to verify styles are ok in Firefox and Safari too. But Safari keeps giving errors trying to load assets from https. Because it does not exist.
Tried so many solutions now.. remove HSTS cookies, downloaded Safari Technology Preview, ran several commands to delete anything ssl related, removed all Safari cookies..
I hardcoded the base_url for assets in Symfony and printed the generated urls, they are all http. I do not see redirect headers in the request. I'm pretty sure it is Safari doing this and not a webserver/site configuration. Also, this does not occur on Chrome or Firefox.
How can I stop Safari from requesting these assets from https? I tried using https with selfsigned certs also, but that also gives me hell but then in all browsers..
UPDATE
- chrome and firefox do not have this behaviour and load everything over http
example of printed url: http://localhost:8075/bundles/....../css/style.css
request seen in safari:
URL: https://localhost:8075/bundles/....../css/style.cssRequestAccept: text/css,*/*;q=0.1Referer: http://localhost:8075/Sec-Fetch-Dest: styleSec-Fetch-Mode: no-corsSec-Fetch-Site: cross-siteUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15ResponseNo response headersHere's the full monty:
Dockerfile for apache container
FROM php:8.0.30-apache-bullseyeEXPOSE 80RUN apt-get update && apt-get install -y --no-install-recommends \ vim \ ssh \ git \ zip \ unzip \ wget \ zlib1g-dev \ libssl-dev \ libreadline-dev \ libgdbm-dev \ openssl \ libfreetype6-dev \ libpng-dev \ libjpeg-dev \ zlib1g-dev \ libicu-dev \ g++ \ ruby \ ruby-dev \ rubygems \&& rm -rf /var/lib/apt/lists/*RUN docker-php-ext-configure intl && docker-php-ext-install intl && docker-php-ext-install pdo_mysqlRUN docker-php-ext-configure gd --with-freetype --with-jpeg && docker-php-ext-install gdRUN docker-php-ext-install opcacheRUN gem install compassENV APACHE_DOCUMENT_ROOT /var/www/symfony_project/webCOPY ./build/container/000-default.conf /etc/apache2/sites-availableCOPY ./build/container/php.ini /usr/local/etc/php/COPY ./build/container/docker-php-entrypoint /usr/local/bin/RUN ["chmod", "+x", "/usr/local/bin/docker-php-entrypoint"]RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf && sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.confRUN a2enmod rewriteWORKDIR /etc/apache2/sites-availableRUN a2ensite 000-default.confRUN service apache2 restartWORKDIR /var/www/symfony_projectENTRYPOINT ["docker-php-entrypoint"]CMD ["apache2-foreground"]vhost file
<VirtualHost *:80> ServerAdmin webmaster@localhost DocumentRoot ${APACHE_DOCUMENT_ROOT} ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined</VirtualHost>.htaccess
# .htaccess.dev<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.+)\.(ccb\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] RewriteCond %{REQUEST_URI} "widget" [NC] RewriteRule ^(widget)/([^/]+)/([^/]+)/([a-z]*)$ widget_cache/$1.$2.$3.$4.%{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR}.cache.html [QSA,L] RewriteRule ^(widget)/([^/]+)/([^/]+)$ widget_cache/$1.$2.$3.nl.%{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR}.cache.html [QSA,L] RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ app.php [QSA,L]</IfModule># ----------------------------------------------------------------------# Better website experience for IE users# ----------------------------------------------------------------------# Force the latest IE version, in various cases when it may fall back to IE7 mode# github.com/rails/rails/commit/123eb25#commitcomment-118920# Use ChromeFrame if it's installed for a better experience for the poor IE folk<IfModule mod_headers.c> Header set X-UA-Compatible "IE=Edge,chrome=1" # mod_headers can't match by content-type, but we don't want to send this header on *everything*...<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svg|svgz|ttf|vcf|webm|webp|woff|xml|xpi)$"> Header unset X-UA-Compatible</FilesMatch></IfModule># ----------------------------------------------------------------------# CORS-enabled images (@crossorigin)# ----------------------------------------------------------------------# Send CORS headers if browsers request them; enabled by default for images.# developer.mozilla.org/en/CORS_Enabled_Image# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/# wiki.mozilla.org/Security/Reviews/crossoriginAttribute<IfModule mod_setenvif.c><IfModule mod_headers.c> # mod_headers, y u no match by Content-Type?!<FilesMatch "\.(gif|ico|jpe?g|png|svg|svgz|webp)$"> SetEnvIf Origin ":" IS_CORS Header set Access-Control-Allow-Origin "*" env=IS_CORS</FilesMatch></IfModule></IfModule># ----------------------------------------------------------------------# Webfont access# ----------------------------------------------------------------------# Allow access from all domains for webfonts.# Alternatively you could only whitelist your# subdomains like "subdomain.example.com".<IfModule mod_headers.c><FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$"> Header set Access-Control-Allow-Origin "*"</FilesMatch></IfModule># ----------------------------------------------------------------------# Proper MIME type for all files# ----------------------------------------------------------------------# JavaScript# Normalize to standard type (it's sniffed in IE anyways)# tools.ietf.org/html/rfc4329#section-7.2AddType application/javascript js jsonpAddType application/json json# AudioAddType audio/mp4 m4a f4a f4bAddType audio/ogg oga ogg# VideoAddType video/mp4 mp4 m4v f4v f4pAddType video/ogg ogvAddType video/webm webmAddType video/x-flv flv# SVG# Required for svg webfonts on iPad# twitter.com/FontSquirrel/status/14855840545AddType image/svg+xml svg svgzAddEncoding gzip svgz# WebfontsAddType application/vnd.ms-fontobject eotAddType application/x-font-ttf ttf ttcAddType application/x-font-woff woffAddType font/opentype otf# Assorted typesAddType application/octet-stream safariextzAddType application/x-chrome-extension crxAddType application/x-opera-extension oexAddType application/x-shockwave-flash swfAddType application/x-web-app-manifest+json webappAddType application/x-xpinstall xpiAddType application/xml rss atom xml rdfAddType image/webp webpAddType image/x-icon icoAddType text/cache-manifest appcache manifestAddType text/vtt vttAddType text/x-component htcAddType text/x-vcard vcf# ----------------------------------------------------------------------# Gzip compression# ----------------------------------------------------------------------<IfModule mod_deflate.c> # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/<IfModule mod_setenvif.c><IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding</IfModule></IfModule> # Compress all output labeled with one of the following MIME-types # (for Apache versions below 2.3.7, you don't need to enable `mod_filter` # and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as # `AddOutputFilterByType` is still in the core directives)<IfModule mod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \ text/css \ text/html \ text/plain \ text/x-component \ text/xml</IfModule></IfModule># ----------------------------------------------------------------------# ETag removal# ----------------------------------------------------------------------# FileETag None is not enough for every server.<IfModule mod_headers.c> Header unset ETag</IfModule># Since we're sending far-future expires, we don't need ETags for# static content.# developer.yahoo.com/performance/rules.html#etagsFileETag None# ----------------------------------------------------------------------# Expires headers (for better cache control)# ----------------------------------------------------------------------# These are pretty far-future expires headers.# They assume you control versioning with filename-based cache busting# Additionally, consider that outdated proxies may miscache# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/# If you don't use filenames to version, lower the CSS and JS to something like# "access plus 1 week".<IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Feed ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" # CSS and JavaScript ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType text/plain "access plus 1 year"</IfModule># ----------------------------------------------------------------------# Prevent mobile network providers from modifying your site# ----------------------------------------------------------------------# The following header prevents modification of your code over 3G on some# European providers.# This is the official 'bypass' suggested by O2 in the UK.<IfModule mod_headers.c> Header set Cache-Control "no-transform"</IfModule># ----------------------------------------------------------------------# Stop screen flicker in IE on CSS rollovers# ----------------------------------------------------------------------# The following directives stop screen flicker in IE on CSS rollovers - in# combination with the "ExpiresByType" rules for images (see above).BrowserMatch "MSIE" brokenvary=1BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1BrowserMatch "Opera" !brokenvarySetEnvIf brokenvary 1 force-no-vary# ----------------------------------------------------------------------# UTF-8 encoding# ----------------------------------------------------------------------# Use UTF-8 encoding for anything served text/plain or text/htmlAddDefaultCharset utf-8# Force UTF-8 for a number of file formatsAddCharset utf-8 .atom .css .js .json .rss .vtt .xml