mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix webauthn regression and improve code (#25113)

Browse Source 
Follow:

* #22697

There are some bugs in #22697:

* https://github.com/go-gitea/gitea/pull/22697#issuecomment-1577957966
* the webauthn failure message is never shown and causes console error
* The `document.getElementById('register-button')` and
`document.getElementById('login-button')` is wrong
    * there is no such element in code
    * it causes JS error when a browser doesn't provide webauthn
    * the end user can't see the real error message

These bugs are fixed in this PR.

Other changes:

* Use simple HTML/CSS layouts, no need to use too many `gt-` patches
* Make the webauthn page have correct "page-content" layout
* The "data-webauthn-error-msg" elements are only used to provide locale
texts, so move them into a single "gt-hidden", then no need to repeat a
lot of "gt-hidden" in code
* The `{{.CsrfTokenHtml}}`  is a no-op because there is no form
* Many `hideElem('#webauthn-error')` in code is no-op because the
`webauthn-error` already has "gt-hidden" by default
* Make the tests for "URLEncodedBase64" really test with concrete cases.


Screenshots:

* Error message when webauthn fails (before, there is no error message):

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/93cf9559-d93b-4f06-9d98-0f7032d9c65b)

</details>

* Error message when webauthn is unavailable 

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/ffc0fcd9-b93b-4418-979c-c89bb627aaf2)

</details>
pull/25110/head^2
wxiaoguang 1 year ago committed by GitHub
parent 58536093b3
commit 027014d7de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 66 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 33
      templates/user/auth/webauthn.tmpl
  2. 22
      templates/user/auth/webauthn_error.tmpl
  3. 6
      templates/user/settings/security/webauthn.tmpl
  4. 4
      web_src/css/form.css
  5. 43
      web_src/js/features/user-auth-webauthn.js
  6. 15
      web_src/js/utils.test.js

33
templates/user/auth/webauthn.tmpl
Unescape View File

@ -1,21 +1,22 @@
{{template "base/head" .}}
<div class="user signin webauthn-prompt">
<div class="ui middle centered very relaxed page grid">
<div role="main" aria-label="{{.Title}}" class="page-content user signin webauthn-prompt">
<div class="ui page grid">
<div class="column center aligned">
<h3 class="ui top attached header">
{{.locale.Tr "twofa"}}
</h3>
{{template "user/auth/webauthn_error" .}}
<div class="ui attached segment">
{{svg "octicon-key" 56}}
<h3>{{.locale.Tr "webauthn_insert_key"}}</h3>
{{template "base/alert" .}}
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
</div>
<div class="ui attached segment"><div class="ui active indeterminate inline loader"></div> {{.locale.Tr "webauthn_press_button"}} </div>
<div class="ui attached segment">
<a href="{{AppSubUrl}}/user/two_factor">{{.locale.Tr "webauthn_use_twofa"}}</a>
</div>
{{template "user/auth/webauthn_error" .}}
<h3 class="ui top attached header">{{.locale.Tr "twofa"}}</h3>
<div class="ui attached segment">
{{svg "octicon-key" 56}}
<h3>{{.locale.Tr "webauthn_insert_key"}}</h3>
{{template "base/alert" .}}
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
</div>
<div class="ui attached segment">
<div class="ui active indeterminate inline loader"></div>
{{.locale.Tr "webauthn_press_button"}}
</div>
<div class="ui attached segment">
<a href="{{AppSubUrl}}/user/two_factor">{{.locale.Tr "webauthn_use_twofa"}}</a>
</div>
</div>
</div>
</div>

22
templates/user/auth/webauthn_error.tmpl
Unescape View File

@ -1,13 +1,13 @@
<div id="webauthn-error" class="ui small gt-hidden">
<div class="content ui negative message gt-df gt-fc gt-gap-3">
<div class="header">{{.locale.Tr "webauthn_error"}}</div>
<div id="webauthn-error-msg"></div>
<div class="gt-hidden" data-webauthn-error-msg="browser">{{.locale.Tr "webauthn_unsupported_browser"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="unknown">{{.locale.Tr "webauthn_error_unknown"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="insecure">{{.locale.Tr "webauthn_error_insecure"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="unable-to-process">{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="duplicated">{{.locale.Tr "webauthn_error_duplicated"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="empty">{{.locale.Tr "webauthn_error_empty"}}</div>
<div class="gt-hidden" data-webauthn-error-msg="timeout">{{.locale.Tr "webauthn_error_timeout"}}</div>
<div id="webauthn-error" class="ui negative message gt-hidden">
<div class="header">{{.locale.Tr "webauthn_error"}}</div>
<div id="webauthn-error-msg" class="gt-pt-3"></div>
<div class="gt-hidden">
<div data-webauthn-error-msg="browser">{{.locale.Tr "webauthn_unsupported_browser"}}</div>
<div data-webauthn-error-msg="unknown">{{.locale.Tr "webauthn_error_unknown"}}</div>
<div data-webauthn-error-msg="insecure">{{.locale.Tr "webauthn_error_insecure"}}</div>
<div data-webauthn-error-msg="unable-to-process">{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
<div data-webauthn-error-msg="duplicated">{{.locale.Tr "webauthn_error_duplicated"}}</div>
<div data-webauthn-error-msg="empty">{{.locale.Tr "webauthn_error_empty"}}</div>
<div data-webauthn-error-msg="timeout">{{.locale.Tr "webauthn_error_timeout"}}</div>
</div>
</div>

6
templates/user/settings/security/webauthn.tmpl
Unescape View File

@ -1,6 +1,4 @@
<h4 class="ui top attached header">
{{.locale.Tr "settings.webauthn"}}
</h4>
<h4 class="ui top attached header">{{.locale.Tr "settings.webauthn"}}</h4>
<div class="ui attached segment">
<p>{{.locale.Tr "settings.webauthn_desc" | Str2html}}</p>
{{template "user/auth/webauthn_error" .}}
@ -20,7 +18,6 @@
{{end}}
</div>
<div class="ui form">
{{.CsrfTokenHtml}}
<div class="required field">
<label for="nickname">{{.locale.Tr "settings.webauthn_nickname"}}</label>
<input id="nickname" name="nickname" type="text" required>
@ -29,7 +26,6 @@
</div>
</div>
<div class="ui g-modal-confirm delete modal" id="delete-registration">
<div class="header">
{{svg "octicon-trash"}}

4
web_src/css/form.css
Unescape View File

@ -394,10 +394,6 @@ textarea:focus,
margin: 0;
}
.user.signin.webauthn-prompt {
margin-top: 15px;
}
.repository.new.repo form,
.repository.new.migrate form,
.repository.new.fork form {

43
web_src/js/features/user-auth-webauthn.js
Unescape View File

@ -1,11 +1,9 @@
import {encodeURLEncodedBase64, decodeURLEncodedBase64} from '../utils.js';
import {showElem, hideElem} from '../utils/dom.js';
import {showElem} from '../utils/dom.js';
const {appSubUrl, csrfToken} = window.config;
export async function initUserAuthWebAuthn() {
hideElem('#webauthn-error');
const elPrompt = document.querySelector('.user.signin.webauthn-prompt');
if (!elPrompt) {
return;
@ -25,10 +23,10 @@ export async function initUserAuthWebAuthn() {
for (const cred of options.publicKey.allowCredentials) {
cred.id = decodeURLEncodedBase64(cred.id);
}
const credential = await navigator.credentials.get({
publicKey: options.publicKey
});
try {
const credential = await navigator.credentials.get({
publicKey: options.publicKey
});
await verifyAssertion(credential);
} catch (err) {
if (!options.publicKey.extensions?.appid) {
@ -36,10 +34,10 @@ export async function initUserAuthWebAuthn() {
return;
}
delete options.publicKey.extensions.appid;
const credential = await navigator.credentials.get({
publicKey: options.publicKey
});
try {
const credential = await navigator.credentials.get({
publicKey: options.publicKey
});
await verifyAssertion(credential);
} catch (err) {
webAuthnError('general', err.message);
@ -48,7 +46,7 @@ export async function initUserAuthWebAuthn() {
}
async function verifyAssertion(assertedCredential) {
// Move data into Arrays incase it is super long
// Move data into Arrays in case it is super long
const authData = new Uint8Array(assertedCredential.response.authenticatorData);
const clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON);
const rawId = new Uint8Array(assertedCredential.rawId);
@ -137,15 +135,11 @@ function webAuthnError(errorType, message) {
function detectWebAuthnSupport() {
if (!window.isSecureContext) {
document.getElementById('register-button').disabled = true;
document.getElementById('login-button').disabled = true;
webAuthnError('insecure');
return false;
}
if (typeof window.PublicKeyCredential !== 'function') {
document.getElementById('register-button').disabled = true;
document.getElementById('login-button').disabled = true;
webAuthnError('browser');
return false;
}
@ -158,15 +152,13 @@ export function initUserAuthWebAuthnRegister() {
if (!elRegister) {
return;
}
hideElem('#webauthn-error');
elRegister.addEventListener('click', (e) => {
if (!detectWebAuthnSupport()) {
elRegister.disabled = true;
return;
}
elRegister.addEventListener('click', async (e) => {
e.preventDefault();
if (!detectWebAuthnSupport()) {
return;
}
webAuthnRegisterRequest();
await webAuthnRegisterRequest();
});
}
@ -203,15 +195,12 @@ async function webAuthnRegisterRequest() {
}
}
let credential;
try {
credential = await navigator.credentials.create({
const credential = await navigator.credentials.create({
publicKey: options.publicKey
});
await webauthnRegistered(credential);
} catch (err) {
webAuthnError('unknown', err);
return;
}
webauthnRegistered(credential);
}

15
web_src/js/utils.test.js
Unescape View File

@ -133,8 +133,17 @@ test('toAbsoluteUrl', () => {
expect(() => toAbsoluteUrl('path')).toThrowError('unsupported');
});
const uint8array = (s) => new TextEncoder().encode(s);
test('encodeURLEncodedBase64, decodeURLEncodedBase64', () => {
expect(encodeURLEncodedBase64(decodeURLEncodedBase64('foo'))).toEqual('foo'); // No = padding
expect(encodeURLEncodedBase64(decodeURLEncodedBase64('a-minus'))).toEqual('a-minus');
expect(encodeURLEncodedBase64(decodeURLEncodedBase64('_underscorc'))).toEqual('_underscorc');
expect(encodeURLEncodedBase64(uint8array('AA?'))).toEqual('QUE_'); // standard base64: "QUE/"
expect(encodeURLEncodedBase64(uint8array('AA~'))).toEqual('QUF-'); // standard base64: "QUF+"
expect(decodeURLEncodedBase64('QUE/')).toEqual(uint8array('AA?'));
expect(decodeURLEncodedBase64('QUF+')).toEqual(uint8array('AA~'));
expect(decodeURLEncodedBase64('QUE_')).toEqual(uint8array('AA?'));
expect(decodeURLEncodedBase64('QUF-')).toEqual(uint8array('AA~'));
expect(encodeURLEncodedBase64(uint8array('a'))).toEqual('YQ'); // standard base64: "YQ=="
expect(decodeURLEncodedBase64('YQ')).toEqual(uint8array('a'));
expect(decodeURLEncodedBase64('YQ==')).toEqual(uint8array('a'));
});

Write Preview
Loading…
Cancel
Save