Apollo Sandbox における認証トークンの自動適用

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2025 Wantedly, Inc. Wantedly Hire アプリケーションについて 7 7 次世代型採用管理システム採用プロセスの悩みを解決途中辞退を防ぐための業務を効率化 ● 繰り返しフローで候補者管理を自動化 ● 複数名の自動日程調整で 80%時間を削減多様化する採用プロセスに対応 ● 最適な選考プロセスを自由自在に構築 ● 多様なメンバーに適した権限構造化面接で高精度の見極め可能 ● 採用基準の標準化・カスタマイズ ● 各項目の評価を定量化

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© 2025 Wantedly, Inc. サブドメイン Cookie 共有 Cookie の送信先の定義 Domain 属性は Cookie を受信できるサーバーを指定する Domain=wantedly.com -> fizz.wantedly.com や buzz.wantedly.com に設定できる指定されたサーバーとサブドメインで Cookie が利用可能 buzz.wantedly.com は fizz.buzz.wantedly.com には設定できない自分が管理するドメイン or その親に対してのみ設定できる

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© 2025 Wantedly, Inc. Chrome Extension 使えそうな API webRequest API cookies API なにができる？ブラウザで行われる HTTP リクエストをインターセプトして任意の操作を行える強力な API ● リクエストのキャンセル ● リクエストのリダイレクト ● リクエストヘッダーの変更 ● レスポンスの変更 ● etc. なんでもできてしまう

Slide 41

Slide 41 text

© 2025 Wantedly, Inc. Chrome Extension 使えそうな API webRequest API cookies API なにができる？ブラウザ内で保存されている cookies を操作するための API ● 基本的な CRUD 操作 ● Cookie の変更をリスナーで監視許可されたドメインに関連する Cookie しか操作できない制約事項拡張機能の permissions フィールドで適切なドメインを指定する

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

© 2025 Wantedly, Inc. 解決策結果理由サブドメイン Cookie 共有セキュリティリスクが高く他のプロダクトに影響がでる Apollo Sandbox にログイン機能認証フローの二重管理が必要 Google認証の対応が複雑 Chrome Extension webRequest API Manifest V3 にやられた Chrome Extension cookies API 解決策とその評価失敗した作戦一覧

Slide 46

Slide 46 text

Slide 47

Slide 47 text

© 2025 Wantedly, Inc. Chrome Extension Wantedly Hire から Apollo Sandbox に cookie をセットもちろん permissions フィールドで適切なドメインを指定する Apollo Sandbox で通信時に HTTP Header にトークンを乗せる何らかの方法でリクエストに HTTP Header にセットするようにする cookies API 方法

Slide 48

Slide 48 text

Slide 49

Slide 49 text

© 2025 Wantedly, Inc. Chrome Extension cookies API 方法 getCookies 実装 setCookies 実装トークンを乗せる // background.ts const appRouter = t.router({ getCookies: t.procedure .input(z.object({ domain: z.string(), environment: z.enum(APP_ENV) })) .query(async ({ input }) => { const cookie = await chrome.cookies.get({ name: getConfigByEnv(input.environment).accessTokenKey, url: `https://${input.domain}`, }); if (cookie === null) return { success: false, tokens: "" }; return { success: true, tokens: cookie.value }; }), });

Slide 50

Slide 50 text

© 2025 Wantedly, Inc. Chrome Extension cookies API 方法 getCookies 実装 setCookies 実装トークンを乗せる // background.ts setCookies: t.procedure .input( z.object({ domain: z.string(), cookies: z.object({ name: z.string(), value: z.string() }), environment: z.enum(APP_ENV), }) ) .mutation(async ({ input }) => { await chrome.cookies.set({ name: getConfigByEnv(input.environment).accessTokenKey, value: input.cookies.value, url: `https://${input.domain}`, }); }),

Slide 51

Slide 51 text

Slide 52

Slide 52 text

© 2025 Wantedly, Inc. Chrome Extension Apollo Sandbox 本体に手を加えるこんな感じのスクリプトで fetch 関数をオーバーライド const originalFetch = window.fetch; window.fetch = async (input, init = {}) => { const modifiedHeaders = new Headers(init.headers); modifiedHeaders.set("authorization", "xxx"); const modifiedInit = { ...init, headers: modifiedHeaders }; return originalFetch(input, modifiedInit); };

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

© 2025 Wantedly, Inc. Chrome Extension Apollo Sandbox 本体に手を加える const originalFetch = window.fetch; window.fetch = async (input, init = {}) => { const modifiedHeaders = new Headers(init.headers); modifiedHeaders.set("authorization", "xxx"); const modifiedInit = { ...init, headers: modifiedHeaders }; return originalFetch(input, modifiedInit); }; タグで先程のスクリプトを Apollo Sandbox に Chrome Extension を使って挿入する

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

© 2025 Wantedly, Inc. Chrome Extension declarativeNetRequest API chrome.declarativeNetRequest.updateDynamicRules({ removeRuleIds: [1], addRules: [ { id: 1, priority: 1, action: { type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS, requestHeaders: [ { header: "Authorization", operation: chrome.declarativeNetRequest.HeaderOperation.SET, value: `Bearer ${input.accessToken}`, }, ], }, condition: { urlFilter: `https://gql.example.wantedly.com/graphql`, resourceTypes: [ chrome.declarativeNetRequest.ResourceType.XMLHTTPREQUEST, ], }, }, ], }); 事前にルールを決める〇〇にリクエスト送る時はヘッダーつけてね

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

© 2025 Wantedly, Inc. 解決策結果理由サブドメイン Cookie 共有セキュリティリスクが高く他のプロダクトに影響がでる Apollo Sandbox にログイン機能認証フローの二重管理が必要 Google認証の対応が複雑 Chrome Extension webRequest API Manifest V3 にやられた Chrome Extension API cookies + declarativeNetRequest 最強まとめ Chrome Extension 最強！