הטמעת אימות משתמשים בתוספי Chrome

אימות בדפדפן extensions מורכב טכנית יותר מאשר ביישומי אינטרנט. אין httpOnly cookies, אין sessions, וכל בקשה דורשת token תקף. דמיינו: משתמש מתקין extension, ואחרי 15 דקות ה-token פג — הוא צריך להתחבר שוב. או גרוע מכך: תוקף מקבל גישה ל-chrome.storage וגונב tokens בטקסט פשוט. שגיאה בשלב התכנון מובילה לדליפת נתונים או לחסימת ה-extension. יישמנו את שכבת האימות עבור 50+ פרויקטים, והנה כיצד אנו פותרים בעיות טיפוסיות.

הבעיות העיקריות שאנו פותרים

ה-extension פועל בהקשר מבודד. התקפות XSS דרך chrome.storage הן אחד האיומים המרכזיים: ב-90% מהמקרים, הפגיעות נובעת מאחסון tokens בטקסט פשוט. סיבוב נכון של refresh tokens וסנכרון מצב בין חלונות הוא אבן נגף נוספת. ללא TokenManager מוכשר, המשתמש יראה מצב 'מנותק' כל 15 דקות.

מדוע אימות ב-Extension קשה יותר מאשר באינטרנט?

OAuth2 דרך chrome.identity API — הגישה המומלצת

מדריך שלב אחר שלב עבור Google OAuth2

1. ב-manifest.json, הוסיפו את ההרשאה identity ותצורת OAuth2.
2. קראו ל-chrome.identity.getAuthToken עם interactive: true.
3. שלחו את ה-Google token שהתקבל לשרת שלכם; השרת מחליף אותו ב-access/refresh tokens.
4. שמרו tokens ב-chrome.storage.local יחד עם זמן התפוגה.
5. בכל בקשה ל-API, בדקו את אורך החיים של ה-access token דרך TokenManager.

// manifest.json
{
  "permissions": ["identity", "storage"],
  "oauth2": {
    "client_id": "YOUR_GOOGLE_CLIENT_ID",
    "scopes": ["openid", "email", "profile"]
  }
}

async function authenticateWithGoogle() {
  return new Promise((resolve, reject) => {
    chrome.identity.getAuthToken({ interactive: true }, async (token) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError);
        return;
      }
      const resp = await fetch('https://api.example.com/v1/auth/google', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          google_token: token
        }),
      });
      const { access_token, refresh_token } = await resp.json();
      await chrome.storage.local.set({
        access_token,
        refresh_token,
        token_expiry: Date.now() + 3600 * 1000,
      });
      resolve({ access_token });
    });
  });
}

אימות מותאם אישית (אימייל/סיסמה)

שימו לב: כאשר משתמש צריך להתאמת עם אימייל/סיסמה, אנו פותחים דף התחברות בטאב חדש (// manifest.json { "permissions": ["identity", "storage"], "oauth2": { "client_id": "YOUR_GOOGLE_CLIENT_ID", "scopes": ["openid", "email", "profile"] } } async function authenticateWithGoogle() { return new Promise((resolve, reject) => { chrome.identity.getAuthToken({ interactive: true }, async (token) => { if (chrome.runtime.lastError) { reject(chrome.runtime.lastError); return; } const resp = await fetch('https://api.example.com/v1/auth/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ google_token: token }), }); const { access_token, refresh_token } = await resp.json(); await chrome.storage.local.set({ access_token, refresh_token, token_expiry: Date.now() + 3600 * 1000, }); resolve({ access_token }); }); }); } ). לאחר אימות מוצלח, השרת שולח הודעה דרך chrome.tabs.create, וה-extension מקבל את ה-tokens וסוגר את הטאב. הסיסמה לעולם לא נשמרת.

async function loginWithCredentials() {
  const loginUrl = `https://app.example.com/extension-login?` + `redirect_uri=${encodeURIComponent('https://app.example.com/extension-callback')}`;
  chrome.tabs.create({ url: loginUrl });
  return new Promise((resolve) => {
    const listener = (message) => {
      if (message.type === 'AUTH_SUCCESS') {
        chrome.runtime.onMessage.removeListener(listener);
        storeTokens(message.tokens);
        resolve(message.tokens);
      }
    };
    chrome.runtime.onMessage.addListener(listener);
  });
}

איזו אסטרטגיית חידוש tokens לבחור?

אנו משתמשים במחלקת TokenManager שבודקת אוטומטית את תפוגת ה-access token 60 שניות לפני פקיעתו, ובמידת הצורך מחדשת אותו דרך נקודת ה-refresh. זה מבטיח פעולה רציפה של ה-extension ללא אובדן session.

class TokenManager {
  async getValidToken() {
    const stored = await chrome.storage.local.get(['access_token', 'refresh_token', 'token_expiry']);
    if (stored.access_token && stored.token_expiry > Date.now() + 60000) {
      return stored.access_token;
    }
    if (stored.refresh_token) {
      return this.refreshToken(stored.refresh_token);
    }
    throw new Error('Not authenticated');
  }

  async refreshToken(refreshToken) {
    const resp = await fetch('https://api.example.com/v1/auth/refresh', {
      method: 'POST',
      body: JSON.stringify({ refresh_token: refreshToken }),
    });
    const tokens = await resp.json();
    await chrome.storage.local.set({
      access_token: tokens.access_token,
      refresh_token: tokens.refresh_token,
      token_expiry: Date.now() + tokens.expires_in * 1000,
    });
    return tokens.access_token;
  }

  async logout() {
    await chrome.storage.local.remove(['access_token', 'refresh_token', 'token_expiry']);
    chrome.identity.clearAllCachedAuthTokens(() => {});
  }
}

OAuth2 דרך chrome.identity API מאובטח פי שלושה מאשר אימות מותאם אישית, מכיוון שהסיסמה לעולם לא עוזבת את הדפדפן. אימות מותאם אישית נותן שליטה מלאה אך דורש פי שניים קוד וקשה יותר להגן מפני XSS. עבור לקוחות ארגוניים, OAuth2 הוא הסטנדרט דה-פקטו.

השוואה בין OAuth2 ואימות מותאם אישית

שגיאות טיפוסיות ביישום אימות

98% מהפגיעויות קשורות לאחסון tokens שגוי. שגיאות נפוצות: שמירת tokens ב-chrome.runtime.sendMessage, אי בדיקת תפוגה, שימוש באותם tokens עבור משתמשים שונים. אנו מתקנים אותן בשלב בדיקת הקוד — ב-95% מהפרויקטים, אנו מוצאים לפחות בעיה קריטית אחת.

מה כלול בעבודה במפתח מלא

• תכנון סכמת הרשאות (OAuth2 / JWT / שרת מותאם)
• יישום תהליך OAuth2 דרך chrome.identity או הפנייה מותאמת
• TokenManager עם חידוש אוטומטי של refresh tokens
• טופס אימות UI בפופ-אפ ופאנל משתמש
• בדיקות על כל הדפדפנים מבוססי Chrome (Chrome, Edge, Opera, Yandex)
• מסירת תיעוד וקוד מקור
• אחריות ליישום עד 3 חודשים

לוח זמנים ומחירים

יישום אימות במפתח מלא אורך בין 3 ל-10 ימי עבודה, תלוי במורכבות (מספר ספקים, שרת מותאם, דרישות מיוחדות). המחיר המדויק ולוח הזמנים מחושבים בנפרד לאחר ניתוח הפרויקט שלכם. קבלו ייעוץ מהנדס — נעזור לכם לבחור את הסכמה האופטימלית לפרויקט שלכם. צרו קשר — אנו מבטיחים גישה שקופה ומסירת קוד מקור עם תיעוד.