From 06d195b9b942bd75654322e658497c32a806e2a6 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:47:51 +0900 Subject: [PATCH 01/10] start From 3312c6ea2418f4b0008498fdcc801bd20a0fae92 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:48:58 +0900 Subject: [PATCH 02/10] =?UTF-8?q?PEPC=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8?= =?UTF-8?q?=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 12 ++++++++- package.json | 3 ++- pepc/package.json | 14 +++++++++++ pepc/setup/mermaid.ts | 12 +++++++++ pepc/slides.md | 58 +++++++++++++++++++++++++++++++++++++++++++ pepc/styles/index.ts | 2 ++ pepc/styles/mod.css | 3 +++ 7 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 pepc/package.json create mode 100644 pepc/setup/mermaid.ts create mode 100644 pepc/slides.md create mode 100644 pepc/styles/index.ts create mode 100644 pepc/styles/mod.css diff --git a/package-lock.json b/package-lock.json index e9bdaac..f95374d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,8 @@ "is-seo-everything", "hooks-testing", "frontend-conf-hokkaido", - "ts-overload-function" + "ts-overload-function", + "pepc" ], "dependencies": { "@iconify-json/mdi": "^1.2.0", @@ -2049,6 +2050,10 @@ "resolved": "is-seo-everything", "link": true }, + "node_modules/@slide/pepc": { + "resolved": "pepc", + "link": true + }, "node_modules/@slide/reuse": { "resolved": "reuse", "link": true @@ -13575,6 +13580,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "pepc": { + "version": "1.0.0", + "license": "MIT", + "devDependencies": {} + }, "reuse": { "name": "@slide/reuse", "version": "1.0.0", diff --git a/package.json b/package.json index 26edcc2..dd114fa 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "is-seo-everything", "hooks-testing", "frontend-conf-hokkaido", - "ts-overload-function" + "ts-overload-function", + "pepc" ], "devDependencies": { "@slidev/cli": "^0.49.29", diff --git a/pepc/package.json b/pepc/package.json new file mode 100644 index 0000000..c4ddf7a --- /dev/null +++ b/pepc/package.json @@ -0,0 +1,14 @@ +{ + "name": "@slide/pepc", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "slidev", + "build": "slidev build" + }, + "keywords": [], + "author": "ken7253 ", + "license": "MIT" +} diff --git a/pepc/setup/mermaid.ts b/pepc/setup/mermaid.ts new file mode 100644 index 0000000..63ca71b --- /dev/null +++ b/pepc/setup/mermaid.ts @@ -0,0 +1,12 @@ +import { defineMermaidSetup } from "@slidev/types"; + +export default defineMermaidSetup(() => { + return { + fontFamily: "BIZ UDPGothic", + fontSize: 20, + sequence: { + width: 550, + messageFontWeight: 900, + }, + }; +}); diff --git a/pepc/slides.md b/pepc/slides.md new file mode 100644 index 0000000..371ded8 --- /dev/null +++ b/pepc/slides.md @@ -0,0 +1,58 @@ +--- +theme: default +titleTemplate: '%s - ken7253' +colorSchema: 'dark' +fonts: + sans: 'M PLUS 2' + mono: 'M PLUS 1 Code' +--- + +# PEPCは何を変えようとしているのか + +--- +src: "../reuse/me.md" +--- + +--- +layout: center +--- + +## 権限のリクエスト方式 + +--- + +## 現在のパーミッションリクエスト + +```mermaid +sequenceDiagram + participant Application + participant Browser + Actor User + Application--)Browser: 権限のリクエスト + Browser--)User: プロンプトを表示 + + alt 許可 + User--)Browser:権限を許可 + Browser--)Application: アクセスの許可 + Application->>User: 機能の提供 + else 拒否 + User--)Browser:権限を拒否 + Browser--)Application: アクセスの拒否 + Application--xBrowser: 権限のリクエスト + Note over Browser: 同じ権限は再度リクエストできない + end +``` + +--- + +## PEPCでは + +```mermaid +sequenceDiagram + participant Application + participant Browser + Actor User + User->>Browser: Permission要素をクリック + Browser->>Application: アクセスの許可 + Application->>User: 機能の提供 +``` diff --git a/pepc/styles/index.ts b/pepc/styles/index.ts new file mode 100644 index 0000000..f1c9f2c --- /dev/null +++ b/pepc/styles/index.ts @@ -0,0 +1,2 @@ +import "./mod.css" +import "@slide/reuse/styles"; \ No newline at end of file diff --git a/pepc/styles/mod.css b/pepc/styles/mod.css new file mode 100644 index 0000000..a802b79 --- /dev/null +++ b/pepc/styles/mod.css @@ -0,0 +1,3 @@ +#app h1 { + font-size: 2.75rem; +} From ea5b0de27b36ac7b552dd0a2ef19482afc3d1002 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 03/10] =?UTF-8?q?mermaid=E3=81=AE=E5=9B=B3=E3=81=8C?= =?UTF-8?q?=E8=A6=8B=E3=81=88=E3=81=A5=E3=82=89=E3=81=84=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- reuse/styles/base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/reuse/styles/base.css b/reuse/styles/base.css index 67c801e..06201f9 100644 --- a/reuse/styles/base.css +++ b/reuse/styles/base.css @@ -147,6 +147,10 @@ deepl-inline-trigger { font-weight: bolder; } +#app .mermaid { + background-color: var(--c-main); +} + /* strong */ #app strong { margin: 0 4px; From 6d1da174bbaf0c47f37fd3450a123e3165d1700e Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 04/10] =?UTF-8?q?=E7=8F=BE=E5=9C=A8=E3=81=AE=E3=83=91?= =?UTF-8?q?=E3=83=BC=E3=83=9F=E3=83=83=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=A2?= =?UTF-8?q?=E3=83=87=E3=83=AB=E3=81=AB=E9=96=A2=E3=81=97=E3=81=A6=E3=81=AE?= =?UTF-8?q?=E8=A8=98=E8=BF=B0=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/pepc/slides.md b/pepc/slides.md index 371ded8..8c27fee 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -14,7 +14,30 @@ src: "../reuse/me.md" --- --- -layout: center +layout: section +--- + +## 現在のブラウザにおける権限管理 + +--- + +## 現在のブラウザにおける権限管理 + +Google Mapでの例画面右下にある位置情報のボタンをクリックすると反対側でプロンプトが起動している画面をスクリーンショットで表している +Chromeの場合、権限が必要なAPIが呼ばれるとオムニボックスの下にプロンプトが現れユーザーに許可を求める。 + +--- + +## 現在のブラウザにおける権限管理 + +> Many user agents implement a "permanent deny" policy, and other user agents offer it as an option in the permission prompt. This means that a site will not be able to ask for permission again after the user has blocked it. + +ユーザーが許可するまでプロンプトを出し続けるというスパムができないように、一度拒否した権限リクエストはアプリケーション側から再度リクエストができないようになっている。 + +https://github.com/WICG/PEPC/blob/main/explainer.md#user-agent-abuse-mitigations + +--- +layout: section --- ## 権限のリクエスト方式 @@ -56,3 +79,5 @@ sequenceDiagram Browser->>Application: アクセスの許可 Application->>User: 機能の提供 ``` + +--- From efadb840a98b92e3ff6681c30d73cf6005528f30 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 05/10] =?UTF-8?q?=E5=88=86=E3=81=8B=E3=82=8A=E3=81=A5?= =?UTF-8?q?=E3=82=89=E3=81=84=E9=83=A8=E5=88=86=E3=82=92=E3=83=86=E3=82=AD?= =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=A7=E8=A3=9C=E8=B6=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 1 + 1 file changed, 1 insertion(+) diff --git a/pepc/slides.md b/pepc/slides.md index 8c27fee..4cf2c99 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -76,6 +76,7 @@ sequenceDiagram participant Browser Actor User User->>Browser: Permission要素をクリック + Note over User,Browser: ユーザー側から事前に許可を与える Browser->>Application: アクセスの許可 Application->>User: 機能の提供 ``` From ad64d69785d84a2efa2834d7c194f68a2367db00 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 06/10] =?UTF-8?q?=E8=AA=B2=E9=A1=8C=E3=81=AB=E3=81=A4?= =?UTF-8?q?=E3=81=84=E3=81=A6=E3=80=81=E3=81=BE=E3=81=A8=E3=82=81=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 74 insertions(+), 2 deletions(-) diff --git a/pepc/slides.md b/pepc/slides.md index 4cf2c99..a8ebf3b 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -28,7 +28,7 @@ layout: section --- -## 現在のブラウザにおける権限管理 +### "permanent deny" policy > Many user agents implement a "permanent deny" policy, and other user agents offer it as an option in the permission prompt. This means that a site will not be able to ask for permission again after the user has blocked it. @@ -68,7 +68,20 @@ sequenceDiagram --- -## PEPCでは +## 現在のパーミッションリクエスト + +現在のパーミッションリクエストはセキュリティ面では安全であるが + +- 間違って拒否してしまった場合、再度許可を行うのが難しい +- プロンプトの表示とユーザーが起こすアクションが必ずしも合致しない +- プロンプトの表示をトリガーした要素とプロンプトの位置が離れていること +- 権限の要求がトリガーされるということがセマンティックとして明らかでない + +のような問題もある。 + +--- + +## PEPCでのパーミッションリクエスト ```mermaid sequenceDiagram @@ -82,3 +95,62 @@ sequenceDiagram ``` --- + +## PEPCでのパーミッションリクエスト + +> A permission model designed to be initiated by the user would solve these issues. + +従来のパーミッションリクエストはアプリケーション（JavaScript）が起点となっているのに対して、PEPCでは**ユーザーのアクションを起点としている**ことが異なる。 + +--- +layout: section +--- + +## 課題がめちゃくちゃ多いのも事実 + +--- + +### PEPCの課題 + +Webkit,MozillaともにStandard positionはNegative寄り。 + +- 仕様の複雑性 +- セキュリティ面でのリスク +- i18n +- ブラウザ互換性 + +などが問題になっている + +--- + +### なぜ複雑な仕様になってしまうのか + +素直に実装してしまうと + +- 画面全体に透明なpermission要素を設置できてしまう +- アプリケーション側からEventをdispatchできてしまう +- ユーザーが別の要素をクリックする直前に前面にpermission要素を表示する + +などなどユーザーの意図しない状況での権限許可が行われてしまう + +--- +layout: center +--- + +### さらに + +--- + +自分が読んでいて面白かったissue + +[Styling button text-transform (capitalize/uppercase/lowercase) #28](https://github.com/WICG/PEPC/issues/28) + +現状はボタンのテキストもユーザーエージェントが提供する想定になっているがCSSでupper caseに指定した場合にテキストの意味が変わってしまう言語はあるのか。 + +CSSの適用がホワイトリスト形式になっているので考慮することが多くなっている。 + +--- + +## まとめ + +大変そうだけど課題意識とかには共感できるので長期的な目線では応援したい。 From 94a6b3cbed4c814364298c98e4232e161ad8f7d9 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=E5=95=8F=E9=A1=8C=E6=84=8F=E8=AD=98?= =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=81=AE=E7=AB=A0=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/pepc/slides.md b/pepc/slides.md index a8ebf3b..eddd06e 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -17,6 +17,23 @@ src: "../reuse/me.md" layout: section --- +## 権限が必要な機能の実装 + +通知、メディアデバイスアクセス、位置情報などなど + +--- + +## 権限が必要な機能の実装 + +- アプリケーションの実装としては非同期処理として素直に実装すればいいだけ +- `then...catch`とかでエラーハンドリング + +実装としてはそれでいいが、本当に使いやすいのか？ + +--- +layout: section +--- + ## 現在のブラウザにおける権限管理 --- @@ -119,7 +136,12 @@ Webkit,MozillaともにStandard positionはNegative寄り。 - i18n - ブラウザ互換性 -などが問題になっている +などが問題になっている。 + +#### Standard position + +- https://github.com/WebKit/standards-positions/issues/270 +- https://github.com/mozilla/standards-positions/issues/908 --- @@ -134,12 +156,8 @@ Webkit,MozillaともにStandard positionはNegative寄り。 などなどユーザーの意図しない状況での権限許可が行われてしまう --- -layout: center ---- - -### さらに ---- +### なぜ複雑な仕様になってしまうのか 自分が読んでいて面白かったissue @@ -153,4 +171,5 @@ CSSの適用がホワイトリスト形式になっているので考慮する ## まとめ -大変そうだけど課題意識とかには共感できるので長期的な目線では応援したい。 +- 大変そうだけど課題意識とかには共感できるので長期的な目線では応援したい。 +- 仕様は意図が分かると面白い From 0e037179ca16cbc3f81d41e64309a8d15a13c2a2 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 08/10] =?UTF-8?q?permission=E3=81=AE=E5=AE=9F=E8=A3=85?= =?UTF-8?q?=E4=BE=8B=E3=82=92=E8=A8=98=E8=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/pepc/slides.md b/pepc/slides.md index eddd06e..ab1bdf1 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -28,6 +28,17 @@ layout: section - アプリケーションの実装としては非同期処理として素直に実装すればいいだけ - `then...catch`とかでエラーハンドリング +```ts +try { + await navigator.getUserMedia({ + audio: true, + video: true, + }, () => {}, () => {}); +} catch (e) { + // ... +} +``` + 実装としてはそれでいいが、本当に使いやすいのか？ --- @@ -43,6 +54,12 @@ layout: section Google Mapでの例画面右下にある位置情報のボタンをクリックすると反対側でプロンプトが起動している画面をスクリーンショットで表している Chromeの場合、権限が必要なAPIが呼ばれるとオムニボックスの下にプロンプトが現れユーザーに許可を求める。 +--- +layout: section +--- + +### "permanent deny" policy + --- ### "permanent deny" policy From 717ace955c42db73a02e6fd5573e41ae52b00379 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 09/10] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E3=81=AE=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 4 ++-- reuse/styles/base.css | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/pepc/slides.md b/pepc/slides.md index ab1bdf1..775c387 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -64,10 +64,10 @@ layout: section ### "permanent deny" policy -> Many user agents implement a "permanent deny" policy, and other user agents offer it as an option in the permission prompt. This means that a site will not be able to ask for permission again after the user has blocked it. - ユーザーが許可するまでプロンプトを出し続けるというスパムができないように、一度拒否した権限リクエストはアプリケーション側から再度リクエストができないようになっている。 +> Many user agents implement a "permanent deny" policy, and other user agents offer it as an option in the permission prompt. This means that a site will not be able to ask for permission again after the user has blocked it. + https://github.com/WICG/PEPC/blob/main/explainer.md#user-agent-abuse-mitigations --- diff --git a/reuse/styles/base.css b/reuse/styles/base.css index 06201f9..a1387ed 100644 --- a/reuse/styles/base.css +++ b/reuse/styles/base.css @@ -202,7 +202,6 @@ deepl-inline-trigger { /* blockquote */ #app blockquote { - font-family: monospace; position: relative; padding: 8px 1rem 4px 1rem; border: none; From 3a9e832e56e47f7756e90c74e35e6e19139c51ec Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 14 Nov 2024 11:49:20 +0900 Subject: [PATCH 10/10] =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pepc/slides.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/pepc/slides.md b/pepc/slides.md index 775c387..63046a1 100644 --- a/pepc/slides.md +++ b/pepc/slides.md @@ -102,19 +102,6 @@ sequenceDiagram --- -## 現在のパーミッションリクエスト - -現在のパーミッションリクエストはセキュリティ面では安全であるが - -- 間違って拒否してしまった場合、再度許可を行うのが難しい -- プロンプトの表示とユーザーが起こすアクションが必ずしも合致しない -- プロンプトの表示をトリガーした要素とプロンプトの位置が離れていること -- 権限の要求がトリガーされるということがセマンティックとして明らかでない - -のような問題もある。 - ---- - ## PEPCでのパーミッションリクエスト ```mermaid @@ -130,7 +117,20 @@ sequenceDiagram --- -## PEPCでのパーミッションリクエスト +## 現在のパーミッションリクエストの問題点 + +現在のパーミッションリクエストはセキュリティ面では安全であるが + +- 間違って拒否してしまった場合、再度許可を行うのが難しい +- プロンプトの表示とユーザーが起こすアクションが必ずしも合致しない +- プロンプトの表示をトリガーした要素とプロンプトの位置が離れていること +- 権限の要求がトリガーされるということがセマンティックとして明らかでない + +のような問題もある。 + +--- + +## PEPCでのパーミッションリクエストで変わること > A permission model designed to be initiated by the user would solve these issues.