Give HTTP a scarier (more obvious) icon

[bsclifton]

Did you search for similar issues before submitting this one?
yes

Describe the issue you encountered:
The icon for regular HTTP in the url bar was recently changed from blue to gray with the following: #2160

If users are visiting a site using HTTP, it would be great if it was painfully obvious they are not on a secure site (even if https everywhere is used behind the scenes).

Expected behavior:
The icon should not be a lock. I personally believe change is too subtle for many folks to notice. The gray helps for sure, but it would be better to see a different icon.

Here's an example with an icon I think is appropriate:

two good candidates I saw are:
fa-exclamation-triangle (pictured)
fa-times-circle

cc: @bradleyrichter @diracdeltas @luixxiul

• Any related issues:
  'Block all HTTP' mode #1576

[luixxiul]

Nice to see the combination of the gray and the exclamation :-)

[diracdeltas]

The warning triangle is pretty similar to an icon that either Chrome or FX used at one point for mixed content or SHA-1 certs (can't remember). Still I think it's overall better than the unlock icon.

[bradleyrichter]

I think the triangle-! is a bit "too scary" and would be useful to get attention for another purpose.

The "other " browsers seem to use a simple page icon VS a lock icon (green) for http vs https. Or NO icon vs lock icon.

Based on muscle memory from other browsers, copying this seems to be the safest route.

(thus, unlocked icon goes away in favor of a page icon, and Lock icon can turn green.)

[diracdeltas]

@bradleyrichter other browsers are considering scarier icons for HTTP too, so we would be ahead of the curve. see for instance https://www.chromium.org/Home/chromium-security/marking-http-as-non-secure

[bradleyrichter]

(it's good to be ahead of the curve)

Ok, I will work up some options and propose something really scary.

[bradleyrichter]

Ok...clean and scary.

HTTP (non-secure) will use the alert triangle as suggested above, but colored. (new SVG icon)

HTTPS (normal cert) will use a dark-grey padlock icon. (new SVG icon)

HTTPS (extended valuation cert) will use a green padlock icon. (new SVG icon)

[diracdeltas]

Note that we aren't committed to showing any UX differences for extended validation yet: #791

[bsclifton]

Nice- I like that! Like @diracdeltas said, the EV cert status is TBD, but to close this issue we can update HTTP to be yellow per the spec image 😄

[bradleyrichter]

and create SVG files, and convert the current icons to use those instead of fontawesome.

[bsclifton]

SVGs would be perfect! Is that something you can create and commit to master @bradleyrichter?

[bradleyrichter]

sure

[bradleyrichter]

@bsclifton pushed

[diracdeltas]

the yellow icon has been added, so i'm closing this in favor of #5695

[luixxiul]

When, on which page, will the yellow icon appear? It seems it does no longer appear on HTTP site.

I think this should be mentioned, because someone has mentioned on twitter that brave was the 1st browser which gave a warning on HTTP site.

[bsclifton]

@luixxiul this was recently updated from a yellow triangle to a red lock icon. The yellow triangle was too similar to Firefox's mixed content icon

[Narven]

Even that I'm late, I just wanted to give my opinion, specially on the grey icon for https.

I think HTTPS it should be green with (padlock closed or for example fa-certificate), but never grey. Grey means that something is not enabled (disabled).

Thanks