浏览器扩展跨Chrome/Firefox适配StackExchange OAuth的域名问题

方案1：用自有服务器做统一中转（推荐） #

不用纠结浏览器自带的回调域名差异，直接把自己的服务器地址作为唯一重定向URI，兼容所有浏览器：

• 先去StackExchange应用后台，把唯一重定向URI改成你的服务器接口，比如 https://my.api.com/stackexchange-oauth-callback
• 扩展里调用identity.launchWebAuthFlow()时，构造授权URL要指定这个服务器地址，同时在state里带上扩展标识和随机串防CSRF：

  const authUrl = new URL('https://stackoverflow.com/oauth');
  authUrl.searchParams.set('client_id', '你的ClientID');
  authUrl.searchParams.set('redirect_uri', 'https://my.api.com/stackexchange-oauth-callback');
  authUrl.searchParams.set('scope', '你需要的权限');
  // state里存扩展ID和随机串，防止CSRF攻击
  authUrl.searchParams.set('state', btoa(JSON.stringify({
    extId: browser.runtime.id,
    nonce: Math.random().toString(36).substring(2)
  })));
  // 发起授权流程
  await browser.identity.launchWebAuthFlow({
    url: authUrl.toString(),
    interactive: true
  });
  

• 服务器的stackexchange-oauth-callback接口处理逻辑：
  1. 从请求URL中提取code和state参数
  2. 解析state里的扩展信息，生成对应浏览器的扩展内部页面地址（比如Firefox的moz-extension://<extId>/callback.html或Chrome的chrome-extension://<extId>/callback.html）
  3. 跳转到该内部页面，将授权码放到URL参数中（如?code=xxx）
• 扩展的内部回调页面拿到授权码后，再发送至my.api.com/login兑换令牌

方案2：Firefox端拦截Chrome回调请求 #

如果不想改动服务器逻辑，可以在Firefox扩展里拦截Chrome的回调域名请求，直接提取授权码：

• 保持StackExchange后台的重定向URI为Chrome的回调域名 https://<extension-id>.chromiumapp.org/
• 在Firefox扩展的manifest.json中添加必要权限：

  {
    "permissions": [
      "webRequest",
      "webRequestBlocking",
      "https://*.chromiumapp.org/*"
    ]
  }
  

• 后台脚本注册拦截器，抓取请求中的授权码：

  browser.webRequest.onBeforeRequest.addListener(
    (details) => {
      const url = new URL(details.url);
      const code = url.searchParams.get('code');
      if (code) {
        // 将授权码传递给扩展业务逻辑
        browser.runtime.sendMessage({ type: 'OAUTH_CODE_RECEIVED', code });
        // 取消跳转，避免打开无效页面
        return { cancel: true };
      }
    },
    { urls: ['https://*.chromiumapp.org/*'] },
    ['blocking']
  );
  

• 扩展调用identity.launchWebAuthFlow()时仍使用Chrome的回调域名，Firefox会自动拦截该请求并提取授权码，后续流程与原逻辑一致

注意事项 #

• 方案1中的state必须包含随机串，防止CSRF攻击
• 方案2中若Chrome与Firefox扩展ID不同，需在state中携带扩展ID，拦截时进行验证避免串号
• 两种方案均无需创建第二个StackExchange应用，使用现有配置即可

内容的提问来源于stack exchange，提问作者ph3rin