A padlock problem
There's a difference between what the browser 🔒 means to users, vs what it means to browsers. To users, it means "the page is secure", but to the browser:
…it means the "connection" is secure.
This is because the security check happens as part of setting up the connection, before any HTTP communication happens. Then, many HTTP responses can be received through that connection.
What's the problem?
Things get tricky when the browser displays content without needing a connection at all. This can happen when content comes from the HTTP cache, or a service worker.
Soooo what do browsers do?
Firefox and Chrome cache the service worker's certificate. When you visit a page served by a service worker, they show a 🔒, and if you click on it, you get details about that cached certificate.
Safari on the other hand doesn't display a 🔒. It doesn't say the page is "not secure", but it doesn't explicitly say it's secure either. However, Safari is moving to the same model as Firefox and Chrome.
When it comes to the HTTP cache, all browsers behave the same. Responses are cached along with their certificate, and the 🔒 is displayed using information from that cached certificate.
Is that a problem?
Cache-Control, and we already have clear-site-data to use as a panic button. The certificate is only used to verify data as it crosses from the internet to the user's local machine.
The current Safari model doesn't make a claim about the connection, since it doesn't exist, which makes sense. But the absence of the 🔒 might be a red flag to users that are trained to spot it as a signal of safety.
I'm not sure what the right answer is. Maybe we should show the 🔒, but when it's clicked we could say something along the lines of "this content was served securely without a connection". It's a tricky problem.