1671060 - Outreachy contribution to HTTPS-Only: Onyeka

Status: RESOLVED INACTIVE

(Core :: DOM: Security, enhancement, P4)

Description

[onyi]

Attachment: https-only_enabled.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 Edg/86.0.622.38

Steps to reproduce:

I typed foo.com in the Firefox and Nightly, and in each of them the pages automatically returned an insecure(http) connection

Expected results:

An https or secure connection is expected for security reasons

Comment 1

[onyi]

Attachment: foo.com_entered_in_firefox.png

This is a general outcome which represents an insecure one

Comment 2

[onyi]

Attachment: foo.com_entered_in_nightly_https-only_enabled.png

This is the outcome when https-only mode is enabled in my Nightly Firefox build

Comment 3

[Christoph Kerschbaumer [:ckerschb]]

Your first contribution to HTTPS-Only

HTTPS-Only Mode upgrades every connection from http: to https:. If a web site does not support https:, then Firefox displays an error page. You can test this yourself when following these steps:

• Start Firefox
• Enable HTTPS-Only Mode (Enter about:preferences#privacy, scroll to the end of the page and "Enable HTTPS-Only Mode in all Windows")
• Visit http.rip (and wait for 3 seconds)
• The HTTPS-Only Error Page appears stating that the page http.rip does not support https.

In some cases however it's also possible that adding 'www' makes the https request succeed. To reproduce:

• Start Firefox
• Enable HTTPS-Only Mode
• Visit http://speedofanimals.com (and wait for 3 seconds)
• The HTTPS-Only Error Page appears stating that http://speedofanimals.com does not support https.
  However, if you enter http://www.speedofanimals.com (note the www) then the upgrading to https succeeds.

Here is the task: "Provide Suggestions in the HTTPS-Only error page what requests would succeed."
In detail, modify the HTML, CSS and JS in the HTTPS-Error Page ( errorpage.html, errorpage.js, aboutHttpsOnlyError.css ) by providing suggestions to the end user what request would succeed, e.g in that case adding 'www'.

In more detail, once the error page appears because upgrading to https does not succeed, you could query the URL from the page that HTTPS-Only Mode tried to upgrade (e.g. in our example from above http://speedofanimals.com).
Take that URL, add 'www' (e.g. http://www.speedofanimals.com) and perform a request (e.g. fetch request) to that page. If the server responds, then provide a link (e.g. a href="") in the error page which the end user could then click on.

Bonus points for making the newly added mechanism visually attractive to the end user.

Please upload your contribution in the form of a phabricator code patch to this Bug. To set up Phabricator please follow these instructions: https://wiki.mozilla.org/Phabricator

Good Luck!

Comment 4

[onyi]

Thanks so much Christoph, I have a couple of websites with the https-error page.

Comment 5

[onyi]

Attachment: senate.gov.ng_errorpage_redesigned.png

This webpage does not automatically redirect to HTTPS as expected. So, I tried a fetch request with 'WWW' appended and it worked.

In order to make the solution a bit innovative as suggested by my mentor(Christoph), I edited the HTML on console and added a button (Go HTTPS) with a code behind to redirect users to a secure link.

Comment 6

[onyi]

Attachment: senate.gov.ng_errorpage_https-served.png

This is the webpage correctly/securely served after appending 'WWW'

Comment 7

[onyi]

Attachment: senate.gov.ng_errorpage_redesigned.png

I had to re-attach the file, as it turns out that checking the patch button rendered it as a plaintext.

Comment 8

[onyi]

Attachment: senate.gov.ng_errorpage_https-served.png

Picture re-attached. I'm sorry about the mixed.

Comment 9

[onyi]

Attachment: errorpage.html

errorpage.html edited

Comment 10

[Christoph Kerschbaumer [:ckerschb]]

Closing as INACTIVE.