From 2039d3aa45f5bb013160328476499415630f767c Mon Sep 17 00:00:00 2001
From: Ben Thorner <ben.thorner@digital.cabinet-office.gov.uk>
Date: Thu, 13 May 2021 14:52:32 +0100
Subject: [PATCH] Prevent registration if WebAuthn is not supported

This hides the "Register" button and shows an error that's specific
to one of two ways a browser may not support WebAuthn:

- JavaScript is disabled (there's no possible fallback for this).
- WebAuthn API is not supported (e.g. on Internet Explorer).

We could add a similar check for the API in the JS code to handle
the button click, but hiding it seems like enough protection.

In order to avoid elements flashing when the page loads, this uses
a view macro to embed a script at the start of the body element,
which is the same approach used for the "js-enabled" class flag [1].

Tested with Chrome and IE 11.

[1]: https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/template.njk#L31
---
 app/assets/stylesheets/main.scss              |  1 +
 app/assets/stylesheets/views/webauthn.scss    | 25 +++++++++++++++++++
 app/templates/admin_template.html             |  5 ++++
 .../components/webauthn-api-check.html        |  7 ++++++
 .../views/user-profile/security-keys.html     | 13 +++++++++-
 5 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/views/webauthn.scss
 create mode 100644 app/templates/components/webauthn-api-check.html

diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 062888810..4331c416f 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -83,6 +83,7 @@ $path: '/static/images/';
 @import 'views/get_started';
 @import 'views/history';
 @import 'views/cookies';
+@import 'views/webauthn';
 
 // TODO: break this up
 @import 'app';
diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss
new file mode 100644
index 000000000..3e0de527e
--- /dev/null
+++ b/app/assets/stylesheets/views/webauthn.scss
@@ -0,0 +1,25 @@
+.webauthn__no-js {
+  .js-enabled & {
+    display: none;
+  }
+}
+
+.webauthn__api-missing {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+  }
+
+  .js-enabled.webauthn-api-enabled & {
+    display: none;
+  }
+}
+
+.webauthn__api-required {
+  display: none;
+
+  .webauthn-api-enabled & {
+    display: block;
+  }
+}
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index f8de636a8..814ea7c54 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -1,6 +1,7 @@
 {% extends "template.njk" %}
 {% from "components/banner.html" import banner %}
 {% from "components/cookie-banner.html" import cookie_banner %}
+{% from "components/webauthn-api-check.html" import webauthn_api_check %}
 
 {% block headIcons %}
   <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
@@ -38,6 +39,10 @@
 {% endblock %}
 
 {% block bodyStart %}
+  {% block webauthn_api %}
+    {{ webauthn_api_check() }}
+  {% endblock %}
+
   {% block cookie_message %}
     {{ cookie_banner() }}
   {% endblock %}
diff --git a/app/templates/components/webauthn-api-check.html b/app/templates/components/webauthn-api-check.html
new file mode 100644
index 000000000..19bc56bc5
--- /dev/null
+++ b/app/templates/components/webauthn-api-check.html
@@ -0,0 +1,7 @@
+{% macro webauthn_api_check() %}
+  <script>
+    if ('credentials' in window.navigator) {
+      document.body.className = ((document.body.className) ? document.body.className + ' webauthn-api-enabled' : 'webauthn-api-enabled');
+    }
+  </script>
+{% endmacro %}
diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html
index 625b98ce1..b30e79d16 100644
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -3,6 +3,7 @@
 {% from "components/button/macro.njk" import govukButton %}
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/table.html" import mapping_table, row, field, row_heading %}
+{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}
 
 {% set page_title = 'Security keys' %}
 {% set credentials = current_user.webauthn_credentials %}
@@ -45,10 +46,20 @@
 
       {% endif %}
 
+      {{ govukErrorMessage({
+        "classes": "webauthn__api-missing",
+        "text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
+      }) }}
+
+      {{ govukErrorMessage({
+        "classes": "webauthn__no-js",
+        "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
+      }) }}
+
       {{ govukButton({
         "element": "button",
         "text": "Register a key",
-        "classes": "govuk-button--secondary",
+        "classes": "govuk-button--secondary webauthn__api-required",
         "attributes": {
           "data-module": "register-security-key",
           "data-csrf-token": csrf_token(),