Closed Bug 1214859 Opened 4 years ago Closed 3 years ago

Visual refresh of the Safe Browsing warning interstitial pages

Categories

(Toolkit :: Safe Browsing, defect, P1)

defect

Tracking

()

RESOLVED FIXED
Iteration:
48.3 - Apr 25

People

(Reporter: francois, Unassigned)

References

Details

(Whiteboard: [fxprivacy])

These warning pages (if you have Safe Browsing turned on) are old and look really dated:

  http://itisatrap.org/firefox/its-an-attack.html
  http://itisatrap.org/firefox/its-a-trap.html
  http://itisatrap.org/firefox/unwanted.html

They should be refreshed along the same lines as the TLS errors pages.
Bram wrote the following in https://bugzilla.mozilla.org/show_bug.cgi?id=1195242#c27:

"I’ve adapted the security error pages to handle warnings for attack sites and sites carrying unwanted software.

http://brampitoyo.github.io/fx-untrusted-connection/attack.xhtml
http://brampitoyo.github.io/fx-untrusted-connection/unwanted.xhtml

In each case, you’ll see that I’ve titled the page “Harmful Site” and wrote a strong warning that says “This site is trying to infect your computer”. Under the Advanced link, I’ve linked to the Google Safe Browsing diagnostic page so technical users can see it if they’re interested.

Lastly, there’s of course an unsafe link to go ahead and load the site in question.

Google Chrome uses an “x” padlock icon on a striking red background, and Safari uses a red text. How does this design fare in comparison? Thoughts?"
> In each case, you’ll see that I’ve titled the page “Harmful Site” and wrote
> a strong warning that says “This site is trying to infect your computer”.

CCing Matej on this because I usually defer to his wisdom when it comes to words :)

> Under the Advanced link, I’ve linked to the Google Safe Browsing diagnostic
> page so technical users can see it if they’re interested.

That works, but it may require extra work if we add new list providers at some point because we have no easy way of knowing which list a site came from at the moment. Can we leave this out of the first cut?

> Lastly, there’s of course an unsafe link to go ahead and load the site in
> question.

Right, we do need that, especially for "unwanted" software because there are false positives and users need to be able to get there.

> Google Chrome uses an “x” padlock icon on a striking red background, and
> Safari uses a red text. How does this design fare in comparison? Thoughts?"

This design feels a lot less scary than the original :) Given that users are about to install malware or get their personal information stolen, maybe the original threat level was appropriate?
(In reply to François Marier [:francois] from comment #2)
> > In each case, you’ll see that I’ve titled the page “Harmful Site” and wrote
> > a strong warning that says “This site is trying to infect your computer”.
> 
> CCing Matej on this because I usually defer to his wisdom when it comes to
> words :)

Looks OK to me. Thanks.
I’ve added a page for Suspected Forgery sites. It seems like I have missed it in the first iteration.

http://brampitoyo.github.io/fx-untrusted-connection/forgery.xhtml

Title: Harmful Site

Headline: This site is trying to steal your information

Body: [domain] may look like a legitimate site, but it’s trying to get you to give away your personal or financial information.

Looks okay?

I’ll cut the link to Google Safe Browsing and modify the design in the next revision. Thanks for the feedback!
I’ve removed the link to Google Safe Browsing, and am now exploring some possible visual design variations.

There are three variants to start out with:

1. White box on red background: http://cl.ly/image/450413363f2v
  * Doesn’t change current design; just add padding and change the body background color

2. Subtle red background: http://cl.ly/image/0d0j1g1s2l1P
  * Very simple to do, but might not be visually strong

3. Red background – similar to Chrome: http://cl.ly/image/1q3u340E1803
  * Hardest to do in terms of styling. We’ll need to turn the text on the page white, then figure out the right colour for the icon, link, infobox and button (the blue one looks alright, the white one looks out of place). Visually, it looks the nicest.

Thoughts?
I see that on Android we implement our own blocked site page:
http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/blockedSite.xhtml

We should coordinate to keep the desktop/mobile pages consistent.

I'm not sure why this page isn't in toolkit... it seems like if we made a responsive design we could share the same page.
Hi Margaret,

We’re also visually refreshing our certificate warning pages, as seen on:

* Bug 1188481: non severe error
* Bug 1202488: severe error
* Bug 1202489: RC4 error

In this project, I haven’t yet taken the mobile layout into account. I don’t know how close we are to desktop implementation, but it does sound like we should create a responsive design template for all our error pages. This will easily port to FxOS and iOS, too.

Let me first collect our mobile pages and give you a report. I have a sneaking suspicion that FxOS, iOS and Android might not share the same design, with FxOS more likely being the odd one out.
Depends on: 1217269
There are two possibilities of what to put on this “Lean more…” link:
* Google’s Transparency Report
* SUMO article

I’m in favour of option #2. It gives us a chance to educate users on why they’re seeing an error page, and is consistent to our “Learn More…” link on crypto/cert errors (it also links to SUMO).

We can then link to Google’s Transparency Report page under “Advanced”, as I had in the earlier iteration of the design.

What do you think?
(In reply to Bram Pitoyo [:bram] from comment #9)
> There are two possibilities of what to put on this “Lean more…” link:
> * Google’s Transparency Report
> * SUMO article
> 
> I’m in favour of option #2. It gives us a chance to educate users on why
> they’re seeing an error page, and is consistent to our “Learn More…” link on
> crypto/cert errors (it also links to SUMO).
 
I agree. It's also much better if we ever add a non-Google data source to the safe browsing lists.
Whiteboard: [fxprivacy][triage]
Priority: -- → P4
Whiteboard: [fxprivacy][triage] → [fxprivacy]
Blocks: 1216897
I'm tentatively marking this as P3 as it relates to the other error page bugs whose priorities were just bumped.
Priority: P4 → P3
Is there anything else to be done here now that bug 1220481 landed with the updated design?
Flags: needinfo?(francois)
(In reply to Panos Astithas [:past] from comment #12)
> Is there anything else to be done here now that bug 1220481 landed with the
> updated design?

The new pages look great!
Status: NEW → RESOLVED
Closed: 3 years ago
Flags: needinfo?(francois)
Resolution: --- → FIXED
Iteration: --- → 48.3 - Apr 25
Flags: qe-verify?
Priority: P3 → P1
You need to log in before you can comment on or make changes to this bug.