I built an image resize script to resize the requested image and return it with PHP. However I would like to cache the requested images.
I tried to built some .htaccess rules and realized cache-control is not working in safari for me. Safari caches .css files, etc. automatically but does not cache images. I do not have any website specific developer tools active, and tested this in a blank environment with an extra subdomain with only a .htaccess and a .jpeg file.
My .htaccess code looks like:
Header set Cache-Control "max-age=10800,private"
With nothing else in it which should force all files to be cached for 3 hours. With Chrome however this works as expected and caches the files. Server returns a http header 304 telling the client to load the file from the cache.
Taking a look at the safari file informations in the developer menu, I can see the Cache-Control settings are received well (Cache-Control: max-age=10800,private) but on each reload safari shows a http 200 response without any cached files and loads the image again.
Are there any known issues with safari cache control? I searched the web but did not find anything and my web hosting provider told me caching is nothing browser specific on server side.
Related
I have a very weird problem with Safari opening my web app.
The setup: I am running an Vuejs application stored in a S3 Bucket on AWS. The app is exposed by an API Gateway.
The Problem: When opening the app only index.html and the favicon are loaded but not the other assets. Sometimes they occur inside the Network tab in dev tools with the message "Failed to load resource" but sometimes not.
"Solution": When I open the app with http (which doesn't work) and then with https again, the resources can be loaded somehow and the app will work fine even when reloading with cache clearing.
Does anyone know how to overcome this problem? 🤷♂️
I have a similar problem (not related to vue.js and amazon, but just to Subject: Safari selectively loads resources):
Mac OS Safari 14 (desktop version, I don't know for a mobile one) doesn't load all referred css, js, and image files.
Safari 13 performed well. Other browsers (Chrome, Firefox) perform well. All files are referred the same way, using relative URLs.
When using Safari 14, some of them are loaded, some are not. Caching is not an issue (I use "empty caches" before loading a page).
It looks like successfully loaded files are randomly chosen (the same file is sometimes loaded, sometimes it isn't).
In the Network tab of Develop menu, for not loaded files Preview says: "An error occurred trying to load the resource",
and in Headers, section "Request", there are only: Accept, Referer, and User-Agent lines, while:
GET, Cookie, Accept-Encoding, Host, Accept-Language, and Connection lines are missing.
Response says: "No response headers".
In the server's access log, there are no lines related to not loaded files.
EDIT:
The cause: TLS 1.0
The solution: TLS 1.2
I am facing weird issue with file uploads. When I upload a new file to publicly visible folder, I can see it instantly in anonymous mode. But if i try to access it in non-anonymous mode, the server responds with 404 unless I do hard refresh (ie ctrl + F5 for Mozzila).
I have already disabled cache control headers for that folder in apache, but that did not seem to resolve the issue. It seems to me that the apache is storing information that "there is actually no file at requested url" and serves it to user unless user clears cache even if the file is uploaded at that location. Anyone ran into similar issue in the past?
By default, most browsers cache images, styles and scripts automatically. The easiest way to bypass this for development environments is to set the caching headers detailed here
Another common way to bypass caching is to set a random query parameter (usually ?v=<random value here>).
Chromium based browsers also have a disable cache option in the dev tools
I have a flask app running on an apache HTTP server on ubuntu 14.04. Everything works great, but I'm now trying to make things secure and get HTTPS up and running. The content still renders properly when requesting the HTTP URLs, but static CSS files are not loading when changing the prefix to HTTPS.
Some useful details and previous attempts:
I have the CSS files in the usual static/css location.
This answer was helpful, and got javascript rendering properly, but using AddType for CSS isn't working for some reason.
I tried sudo a2enmod mime to make sure that Apache module was enabled, and it was.
I tried forcing the type for css (similar to what was suggested here, but with css instead of js and javascript), but that didn't work either.
I've tried adding the AddType declaration to my configuration file located in /etc/apache/sites-available/FlaskApp.conf (that's where the successful AddType text/javascript .js declaration is located), and I've also tried putting the AddType declaration in a .htaccess file located in the root directory of my FlaskApp, but both attempts were unsuccessful.
Everything loads fine when accessing the site with the http:// prefix, just not the https:// prefix. I've tried accessing it from Chrome and Firefox.
Chrome Response
Looking at the console when loading the page in Chrome is shows the following for all CSS files:
Resource interpreted as Stylesheet but transferred with MIME type application/x-gzip
Looking at the network tab, everything looks similar between the http request and the https request, except that the https request is completely missing the Response Headers section.
When attempting to load just the /static/css/styles.css file in Chrome, it attempts to download the file instead of displaying it in the browser.
Firefox Response
When attempting to load just the /static/css/styles.css file in Firefox, it loads in the browser. However, it's not ascii text but rather jumbled characters as though it's loading a binary file. Here's the console error message in Firefox:
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.
So my question is, how do I get my HTTPS/Flask/Apache/Ubuntu setup to properly return static css files so that my pages render properly?
This suggestion and this suggestion look promising, but I'm not sure how to make it so that any request that hits /static/css/*.css returns the proper css file with the "Content Type" or "mimetype" set correctly.
I am trying to setup my HTTPs website with Apache 2.2 and Firefox 33.
On the first load Firefox shows that warning.
But on the next page load (i.e. F5, another tab, etc until firefox restarts) everything on this URL is secure.
The page is just plain HTML, no javascripts, no images. I put robots.txt and favicon.ico into the /var/www/site/htdocs/ (I thought firefox loads them from http:// instead of https://). But this did not helped.
So, why firefox shows this warning on the first view after launch and don't does that later?
(I tried to ask this question on server fault, but don't have enough reputation to upload pictures)
UPD: Tools -> Web Development -> WebConsole says
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mc.yandex.ru/webvisor/26570853?rn=493111185&page-url=http%3A%2F%2Fstart.calculate-linux.ru%2F&wmode=0&wv-type=0&wv-hit=372504783&wv-part=1&wv-check=34794&browser-info=z%3A240%3Ai%3A20141022210348%3Arqnl%3A1%3Ast%3A1413997437. This can be fixed by moving the resource to the same domain or enabling CORS. 26570853
Everything becomes ok, when I set about:blank as homepage.
But the question remains - how (in this scenario) scripts from previous page can affect next page?
I installed an SSL Certificate which required me to switch all HTTP Links over to HTTPs links. I did this by downloading all site files (including the database) and did a find/replace, thus replacing all http:// with https:// then I uploaded the new site files (and .sql file) to the server. And everything appeared to be working. Except that .png images wont load in any browser.
I can't even pull up the image by typing in the direct link in the address bar (with or without the https). Previously the images worked fine, they now just show the red X.
Any ideas on what's going on and how can I fix it?
The site is built with Joomla 2.5. You can see it here: https://www.detourjournal.com/ (Note the two .png images in the footer that are not loading)
It's not your Joomla! setup, for starters it doesn't appear to be Joomla! redirecting calls to SSL in normal pages and it doesn't affect direct file URL for images this way.
You appear to have configured your server to force https (possibly via .htaccess).
It's also not specific to PNG files as your logo, /images/stories/logo2.png is being served without a problem. The same goes for the PNG's in VirtueMart e.g. the close label.
Looking at the header for those images the sizes don't match what is being returned... so it's most likely corrupt images cause Apache to bork.