ブラウザでユーザーのpasskeyを作成する際のエラー

自分のサイトでパスキーを作成しようとすると、以下のリマインダーが表示されます。

パスキーの登録プロセスがタイムアウトしたか、キャンセルされたか、または許可されていません。

しかし、同じブラウザ(Microsoft Edge)とプラグイン(Apple Passkey)でDiscourse Metaフォーラムではパスキーを作成できます。

Discourseを最新バージョンにアップグレードしましたが、この投稿のように機能しません。

はい、このメッセージがダイアログに表示されると、コンソールエラーが表示されるようです。

ブラウザのコンソールを開いて、表示される可能性のあるエラーを共有していただけますか?


ログにこのエラーに関するものは何も表示されていないようです

ブラウザのコンソールログを確認する必要があります。サイトの /logs ではありません。

これで合っていますか?

forum.beginner.center/:1  Mixed Content: https://forum.beginner.center/ で読み込まれたページはHTTPSで読み込まれましたが、安全でないフォント 'http://forum.beginner.center/fonts/JetBrainsMono-Regular.woff2?v=0.0.19' をリクエストしました。このリクエストはブロックされました。コンテンツはHTTPSで提供される必要があります。
forum.beginner.center/:1  Mixed Content: https://forum.beginner.center/ で読み込まれたページはHTTPSで読み込まれましたが、安全でないフォント 'http://forum.beginner.center/fonts/JetBrainsMono-Bold.woff2?v=0.0.19' をリクエストしました。このリクエストはブロックされました。コンテンツはHTTPSで提供される必要があります。
app.js:270 ℹ️ Discourse v3.5.0.beta9-dev — https://github.com/discourse/discourse/commits/33dfd7dba9 — Ember v5.12.0
[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-4YvvTZffYuqGaENC8DnQ7yeNg' 'strict-dynamic'".

analytics.eu.umami.is/script.js:1   リソースの読み込みに失敗しました: net::ERR_CONNECTION_CLOSED
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
Tracking Prevention blocked access to storage for <URL>.
deprecated.js:62  非推奨通知: user オブジェクトの timezone プロパティの設定は非推奨です。代わりに user_option オブジェクトを使用してください [非推奨 Discourse 2.9.0.beta12] [削除予定 Discourse 3.0.0.beta1] [非推奨 ID: discourse.user.userOptions]
a @ deprecated.js:62
security:1 Autofocus processing was blocked because a document already has a focused element.
completion_list.html:14   GET chrome-extension://mfbcdcnpokpoajjciilocoachedjkima/heuristicsRedefinitions.js net::ERR_FILE_NOT_FOUND
completion_list.html:13   GET chrome-extension://mfbcdcnpokpoajjciilocoachedjkima/extensionState.js net::ERR_FILE_NOT_FOUND
completion_list.html:12   GET chrome-extension://mfbcdcnpokpoajjciilocoachedjkima/utils.js net::ERR_FILE_NOT_FOUND
ajax.js:188   POST https://forum.beginner.center/u/register_passkey.json 401 (Unauthorized)
send @ jquery.js:9940
ajax @ jquery.js:9521
o @ ajax.js:188
(匿名) @ rsvp-DaQAFb0W.js:435
e @ rsvp-DaQAFb0W.js:451
A @ ajax.js:201
registerPasskey @ user.js:650
createPasskey @ user-passkeys.gjs:86
await in createPasskey
didConfirm @ user-passkeys.gjs:140
didConfirmWrapped @ dialog.js:134
_join @ index.js:788
join @ index.js:605
p @ index.js:152
(匿名) @ index.js:250
submit @ confirm-session.gjs:84
await in submit
(匿名) @ d-button.gjs:138
invoke @ index.js:264
flush @ index.js:180
flush @ index.js:334
_end @ index.js:762
end @ index.js:565
_runExpiredTimers @ index.js:869
setTimeout
setTimeout @ index.js:39
_installTimerTimeout @ index.js:912
_later @ index.js:823
later @ index.js:652
T @ index.js:562
_triggerAction @ d-button.gjs:135
click @ d-button.gjs:93
user-passkeys.gjs:104  {jqXHR: {…}, textStatus: 'error', errorThrown: ''}errorThrown: ""jqXHR: abort: ƒ (e)always: ƒ ()catch: ƒ (e)done: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (e)jqTextStatus: "error"overrideMimeType: ƒ (e)pipe: ƒ ()progress: ƒ ()promise: ƒ (e)readyState: 4requestedUrl: "/u/register_passkey.json"responseJSON: {errors: Array(1)}responseText: "{\"errors\":[\"The origin of the authentication request does not match the server origin.\"]}"setRequestHeader: ƒ (e,t)state: ƒ ()status: 401statusCode: ƒ (e)statusText: "error"then: ƒ (e,i,n)[[Prototype]]: ObjecttextStatus: "error"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
createPasskey @ user-passkeys.gjs:104
await in createPasskey
didConfirm @ user-passkeys.gjs:140
didConfirmWrapped @ dialog.js:134
_join @ index.js:788
join @ index.js:605
p @ index.js:152
(匿名) @ index.js:250
submit @ confirm-session.gjs:84
await in submit
(匿名) @ d-button.gjs:138
invoke @ index.js:264
flush @ index.js:180
flush @ index.js:334
_end @ index.js:762
end @ index.js:565
_runExpiredTimers @ index.js:869
setTimeout
setTimeout @ index.js:39
_installTimerTimeout @ index.js:912
_later @ index.js:823
later @ index.js:652
T @ index.js:562
_triggerAction @ d-button.gjs:135
click @ d-button.gjs:93
「いいね!」 1

おっと、これは役に立ちますが、401は無数の理由でトリガーされる可能性があります。パスキーの専門家に確認します。

「いいね!」 1

サイトがすべてHTTPSで提供されるように設定されていることを確認してください。パスキーチャレンジ検証では、すべてのリクエストがHTTPSを経由する必要があります。また、ブラウザとサーバー間のドメインは完全に一致する必要があります。どこかに不一致があると、検証は失敗します。

このための設定としてforce_httpsがあります。これを試してみてください。サーバーが正しく設定されていない場合、ロックアウトされる可能性もあるため注意してください。

「いいね!」 2

これは私の app.yml です。
OpenResty(nginxベース)でリバースプロキシを使用しています。

expose:
  - "6180:80"   # http
  - "6443:443" # https
  - "587:587"

HTTPSポート6443でサイトにアクセスできません。

そのため、HTTPのリバースプロキシのみを設定しました。

これは私のOpenRestyの設定です。

server {
    listen 80 ;
    listen 443 ssl http2 ;
    server_name forum.beginner.center;
    index index.php index.html index.htm default.php default.htm default.html;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    access_log /www/sites/forum.beginner.center/log/access.log main;
    error_log /www/sites/forum.beginner.center/log/error.log;
    location ^~ /.well-known/acme-challenge {
        allow all;
        root /usr/share/nginx/html;
    }
    if ($scheme = http) {
        return 301 https://$host$request_uri;
    }
    ssl_certificate /www/sites/forum.beginner.center/ssl/fullchain.pem;
    ssl_certificate_key /www/sites/forum.beginner.center/ssl/privkey.pem;
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1;
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DSS:!DES:!RC4:!3DES:!MD5:!PSK:!KRB5:!SRP:!CAMELLIA:!SEED;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    error_page 497 https://$host$request_uri;
    proxy_set_header X-Forwarded-Proto https;
    add_header Strict-Transport-Security "max-age=31536000";
    include /www/sites/forum.beginner.center/proxy/*.conf;
}

これはリバースプロキシの設定です。

location ^~ / {
    proxy_pass http://127.0.0.1:6180;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    add_header X-Cache $upstream_cache_status;
    add_header Cache-Control no-cache;
    proxy_ssl_server_name off;
    proxy_ssl_name $proxy_host;
    add_header Strict-Transport-Security "max-age=31536000";
}

こんにちは、どなたか手伝っていただけますか?

遅れて申し訳ありません。問題はまさにプロキシに関連しています。正確には言えませんが、ドメイン名、プロトコル(httpまたはhttps)、ポートのいずれかが障害となっています。

Passkeysは、フロントエンドとバックエンドが同じドメイン、プロトコル、ポートで実行されていることを確認します。いずれかが一致しない場合、このようなエラーが発生します。

Rails CLIで、以下を試していただけますか?

DiscourseWebauthn.origin

そして、ブラウザでサイトにアクセスするために使用するURLと比較してください。両者は一致するはずです。

ユーザーのパスキー機能は force https を有効にしたときに機能しました

参考

「いいね!」 2

Webauthn標準のパスキーに関する私の理解では、Relying Party(Discourse)とClient(ブラウザまたはモバイルデバイス)、そしてAuthenticator(例:YubiKey)間のセキュアな接続に依存しています。したがって、Discourseアプリケーションからの通信にはhttpsが必要です。httpsを強制することが解決策になるかもしれませんが、単にヘッダーで

proxy_set_header X-Forwarded-Proto https;

と設定するだけでも十分かもしれません。httpsの強制が役立つ場合(いずれにしても推奨されます)、すべて問題ありません。

「いいね!」 1

proxy_set_header X-Forwarded-Proto の設定方法がわかりません。

app.yaml での設定方法についてです。