1725788 - The "insecure HTTPS" icon should be more noticeable (bring back the yellow warning icon or use the red struck-out-lock icon)

Status: UNCONFIRMED

(Firefox :: Security, defect, P3)

Description

[Ellie]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0

Steps to reproduce:

1. Visit a site with invalid certificate
2. Confirm an exception
3. Pretend you forgot you did that, and visit it later, and see if you're aware at all that something is not perfectly secured

I think this is quite the UX design flaw: the "insecure HTTPS" icon with the tiny white triangle on white lock (see how that is a problem) is way too unobtrusive and almost impossible NOT to miss. No yellow, no red, no flashy signal color of ANY kind, like I'm supposed to not notice. Isn't this kind of very important?

I suggest you just replace it with the http one with the super obvious red crossed through line. Insecure is insecure, this distinction is of no use to most end-users and the unsafe-https-icon is just not good enough, IMHO.

Actual results:

i missed the not-proper-https icon because it is almost impossibly the same as the regular https one

Expected results:

flashy yellow triangle (why is it just white??), red, whatever. or just use the very superior HTTP unsafe icon.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Security' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: warning.JPG

Hi,

Thanks for the report
Would this one work https://invalid-expected-sct.badssl.com/ to replicate your steps on my end?
Can you confirm the warning from my screenshot is what you're referring to?

Best,
Clara

Comment 3

[Ellie]

Click Advanced..., then to choose to ignore to go ahead, then look in the address bar. The "not secure" disappears, and the remaining icon next to the URL is basically almost indistinguishable from the regular HTTPS one, basically designed to make you forget you're using an unsafe connection. Also I'm quite sure the warning triangle used to be yellow (in the address bar!) which would make this a regression.

Comment 4

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi Ellie
I followed your steps. I'm trying to find a build in which the warning used to be yellow in the address bar, would you happen to remember one good build so I can provide a regression range?
Best,
Clara

Comment 5

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: icon.JPG

Comment 6

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: yellow.JPG

Nevermind, found it. I'll provide the range asap.

Thanks!

Comment 7

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Last good build 04-08
First bad build 04-09
https://bugzilla.mozilla.org/show_bug.cgi?id=1702289 seems to be the regressor, not sure if this was an intended update @Gijs.
pushlog_url: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=bfc4564739af31f55d7c7370af45551b35722e0c&tochange=101dbdd0b5e512687bebdcce23c9f44fa46a9948
repo_name: autoland
repo_url: https://hg.mozilla.org/integration/autoland

Best
Clara

Comment 8

[:Gijs (he/him)]

Sam, was dropping the yellow from the warning icon in bug 1702289 (for 89, not our recent "not secure" change for the cert error page itself) a deliberate thing?

As for changing it to the red http lock icon, for that we'd need a conversation between the UX and security teams. Johann, do you know where that's at?

Comment 9

[Sam Foster [:sfoster] (he/him)]

(In reply to :Gijs (out; back Aug 31st; he/him) from comment #8)

Sam, was dropping the yellow from the warning icon in bug 1702289 (for 89, not our recent "not secure" change for the cert error page itself) a deliberate thing?

It was deliberate to remove the color from the icon's SVG file, but in this case we should have added the fill color back into the relevant stylesheet. So, I think that means the answer to your question is "no".

Comment 10

[Johann Hofmann [:johannh]]

(In reply to :Gijs (out; back Aug 31st; he/him) from comment #8)

As for changing it to the red http lock icon, for that we'd need a conversation between the UX and security teams. Johann, do you know where that's at?

Wait, aren’t folks working on updating error pages as part of MR1.2/2? I was recently asked to review a few things. Maybe we can strike up a conversation from that.

Comment 11

[:Gijs (he/him)]

Attachment: Screenshot with light yellow fill for warning icon

(In reply to Johann Hofmann [:johannh] from comment #10)

(In reply to :Gijs (out; back Aug 31st; he/him) from comment #8)

As for changing it to the red http lock icon, for that we'd need a conversation between the UX and security teams. Johann, do you know where that's at?

Wait, aren’t folks working on updating error pages as part of MR1.2/2? I was recently asked to review a few things. Maybe we can strike up a conversation from that.
(In reply to Sam Foster [:sfoster] (he/him) from comment #9)
(In reply to :Gijs (out; back Aug 31st; he/him) from comment #8)

Sam, was dropping the yellow from the warning icon in bug 1702289 (for 89, not our recent "not secure" change for the cert error page itself) a deliberate thing?

It was deliberate to remove the color from the icon's SVG file, but in this case we should have added the fill color back into the relevant stylesheet. So, I think that means the answer to your question is "no".

This isn't quite as straightforward as that, as there are now just 2 paths in this SVG and making them both yellow isn't what we want...

... but even fixing that is not really enough because the inner yellow that we used before is too light, and the border yellow that was providing a stroke on the triangle is too dark/ugly.

Janice, can you take a look and suggest what we want to do with this icon? From talking to Johann, we don't really want to swap it out for the struck-through lock icon as suggested earlier, as that would give https connections a worse security status than http ones, which sends the wrong message. So I think we're looking for a way to make the existing lock-with-warning-triangle icon a little more noticeable. Can you help?

Comment 12

[Janice Cramer]

I'll look into this and will circle back.

Comment 13

[Ellie]

we don't really want to swap it out for the struck-through lock icon as suggested earlier, as that would give https connections a worse security status than http ones,

Wouldn't it be the same security status? This is the icon I am already seeing for http here (which I think is appropriate in 2021). And I think https with completely untrusted certificate isn't worth much more than http, especially to the naive end-user, so that seems good to me.

Comment 14

[:Gijs (he/him)]

(In reply to Ellie from comment #13)

we don't really want to swap it out for the struck-through lock icon as suggested earlier, as that would give https connections a worse security status than http ones,

Wouldn't it be the same security status? This is the icon I am already seeing for http here (which I think is appropriate in 2021). And I think https with completely untrusted certificate isn't worth much more than http, especially to the naive end-user, so that seems good to me.

302 Johann. I think I got this confused with the explicit "not secure" text for http (which isn't enabled atm). If both UX and the security team think we are OK to use the struck-out lock icon here that wfm...

Comment 15

[Janice Cramer]

Ellie points out that the "not secure" text should not be removed if/when a user proceeds to the site w/ invalid certificate.

@gijs We need to make sure that the "chiclet" with the warning lock icon + "Not secure" text persists if/when a user proceeds to that site w/ invalid certificate.

I will inquire whether, if a user proceeds to that site w/ invalid certificate, color would be added to any part of the chiclet.

Comment 16

[Janice Cramer]

Following up to confirm that currently the chiclet—with icon and text—will be implemented without color. The user will get to this page only after seeing the warning page, which has the "loud" visual/written warning, and clicking Advanced to proactively proceed to the insecure site.

Comment 17

[Ellie]

The user will get to this page only after seeing the warning page, which has the "loud" visual/written warning, and clicking Advanced to proactively proceed to the insecure site.

... and then possibly do what i did, which is suspend the computer, go to sleep, awake it again with all tabs open, and completely forget they added an exception to one and first think everything is fine & secure with the connection. (This is what happened to me, and which is why I made this ticket.) I think the no-color icon just doesn't cut it. It may look sleek, but this is the wrong spot to simplify just to make it look 5% sleeker at the expense of such an important visual signal.

Comment 18

[Ellie]

Oh, my apologies, I thought the "to confirm" meant that was decided upon as the final outcome. But you're just asking if that is the current state, my bad. Please ignore my above comment, I was just confused. (And yes, I think you summed up the current state correctly as far as I can tell as an end-user.)

Comment 19

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Updated whiteboard accordingly

Comment 20

[Ellie]

This is still broken in Firefox 103.0b3. Maybe it's just me but I find it almost impossible to notice the warning triangle in the address bar, basically guaranteeing I'll forget insecure connection exceptions I maybe meant to set temporarily that might be months or years old.

The icon for HTTP pages does NOT have this problem, it has a nice red dash that sticks out. You should just use that one for HTTPS-but-connection-not-secure too, since both might easily have spying in the middle I see no use in using such an easy to miss one for the former.

Comment 21

[Ellie]

Sorry, when I said former I meant the latter, my apologies for comment spam. Anyway, I think you should just use red strike icon always. The triangle exclamation one doesn't seem any good, I don't know why you'd want to keep it around separately when it doesn't really seem to do its job.

Comment 22

[Ellie]

Attachment: firefoxinsecureicon_actual_vs_expected.png