LIFFのクエリパラメータ、10/7の仕様変更で何が変わる？ liff.stateと2次リダイレクトの仕組みから対応方法まで

https://example.com/2020campaign/?key=value&liff.state=urlencoded(path_A/?key1=value1#URL-fragment)

https://liff.line.me/{liffId}/login?return_url=https://example.com/cart?item=1

const state = new URLSearchParams(location.search).get("liff.state");
const params = new URL("https://dummy" + state).searchParams;

import liff from "@line/liff";

await liff.init({ liffId: "1234567890-AbcdEfgh" });

// liff.init() が完了した時点で、2次リダイレクト先の URL にいる
const params = new URLSearchParams(window.location.search);
const areaCode = params.get("area_code");

/** 文字列を base64url（A-Z a-z 0-9 - _ のみ）にする。?, &, %, +, #, = を含まない */
export function toBase64Url(s: string): string {
  const bytes = new TextEncoder().encode(s);
  let bin = "";
  for (const b of bytes) bin += String.fromCharCode(b);
  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

export function fromBase64Url(s: string): string | null {
  try {
    const b64 = s.replace(/-/g, "+").replace(/_/g, "/");
    const bin = atob(b64 + "=".repeat((4 - (b64.length % 4)) % 4));
    return new TextDecoder().decode(Uint8Array.from(bin, (c) => c.charCodeAt(0)));
  } catch {
    return null;
  }
}

/**
 * 受け取った戻り先を検証する。自サイト内のパスだけを許可し、
 * 外部サイトへ飛ばされる（オープンリダイレクト）のを防ぐ。
 */
export function safeReturnPath(raw: string | null, origin: string): string {
  if (!raw) return "/";
  try {
    const u = new URL(raw, origin);
    return u.origin === origin ? u.pathname + u.search + u.hash : "/";
  } catch {
    return "/";
  }
}

/** LIFF URL を組み立てる例 */
export function buildLiffUrl(liffId: string, path: string, returnUrl: string): string {
  const url = new URL(`https://liff.line.me/${liffId}${path}`);
  url.searchParams.set("r", toBase64Url(returnUrl));
  return url.toString();
}

/**
 * LIFF URL のクエリパラメータを、LIFF の仕様変更（2026-10-07 / LIFF v2.31.1）の
 * 前後どちらでも同じ結果で読み取るためのユーティリティ。
 *
 * 値の中の「?」は、環境によって次の3通りの形で届く。
 *   A. 「&」に置き換わっている   ?key=foo&bar      （変更前の LIFF ブラウザなど）
 *   B. 「?」のまま               ?key=foo?bar      （変更後の LIFF ブラウザ）
 *   C. 「%3F」のまま             ?key=foo%3Fbar    （外部ブラウザ、Android など）
 * このパーサーは A/B/C を同じ結果（key = "foo?bar"）にそろえる。
 *
 * そのために「アプリが受け取るキーの一覧」を渡してもらう。
 * 一覧にないキーの断片は、直前の値の続きとみなして連結する。
 */

export interface LiffQuerySchema {
  /** アプリが受け取るキー。これ以外のキーは結果に含めない */
  keys: readonly string[];
  /**
   * 値に URL を入れるキー。後ろに続く断片（y=1 など）も値の一部として連結する。
   * 1つ目の断片は「?」、2つ目以降は「&」でつなぐ。
   */
  urlKeys?: readonly string[];
}

/** 不正な %xx が含まれていても例外にしない decodeURIComponent。「+」は空白にしない */
function safeDecode(s: string): string {
  try {
    return decodeURIComponent(s);
  } catch {
    return s;
  }
}

/**
 * クエリ文字列（先頭の ? はあってもなくてもよい）を読み取る。
 * 「+」は空白に変換せず、そのまま「+」として扱う
 * （LIFF サーバーは「+」を %2B に変換して渡すため、それに合わせる）。
 */
export function parseLiffQuery(
  query: string,
  schema: LiffQuerySchema,
): Record<string, string> {
  const keys = new Set(schema.keys);
  const urlKeys = new Set(schema.urlKeys ?? []);
  const result: Record<string, string> = {};

  // フラグメント（#以降）はクエリではないので落とす
  const hashAt = query.indexOf("#");
  const q = (hashAt >= 0 ? query.slice(0, hashAt) : query).replace(/^\?/, "");

  // 「&」と「?」の両方で区切る。区切りが元々どちらだったかは後で復元する
  const tokens = q.split(/[?&]/).filter((t) => t.length > 0);

  let current: string | null = null; // 直前に値を入れたキー

  for (const token of tokens) {
    const eq = token.indexOf("=");
    const name = safeDecode(eq >= 0 ? token.slice(0, eq) : token);
    const value = eq >= 0 ? safeDecode(token.slice(eq + 1)) : "";

    if (keys.has(name)) {
      // 既知のキー → 新しいパラメータの始まり
      result[name] = value;
      current = name;
      continue;
    }

    if (name.startsWith("liff.")) {
      // liff.state / liff.referrer など LIFF が付けるパラメータは値の一部にしない
      current = null;
      continue;
    }

    if (current !== null && urlKeys.has(current)) {
      // URL を入れるキー → 後続の断片は URL のクエリの一部
      const sep = result[current].includes("?") ? "&" : "?";
      result[current] += sep + safeDecode(token);
      continue;
    }

    if (current !== null && eq < 0) {
      // 「=」のない断片（foo?bar の bar）→ 値の中にあった「?」の後ろとみなす
      result[current] += "?" + safeDecode(token);
      continue;
    }

    // 知らないキー（エンドポイント URL の ?v=... など）→ 無視する
    current = null;
  }

  return result;
}

/**
 * location.search から liff.state の値だけを取り出す。
 * URLSearchParams は「+」を空白に変えるため使わない。
 */
export function getRawLiffState(search: string): string | null {
  const q = search.replace(/^\?/, "");
  for (const pair of q.split("&")) {
    if (pair.startsWith("liff.state=")) {
      return safeDecode(pair.slice("liff.state=".length));
    }
  }
  return null;
}

/**
 * liff.init() の前でも後でも同じ結果を返す入口。
 * - 1次リダイレクト先（liff.init() 前）: liff.state の中のクエリを読む
 * - 2次リダイレクト先（liff.init() 後）: location.search をそのまま読む
 */
export function readLiffQuery(
  location: { search: string },
  schema: LiffQuerySchema,
): Record<string, string> {
  const state = getRawLiffState(location.search);
  if (state === null) return parseLiffQuery(location.search, schema);

  // liff.state は "/path?key=value#hash" の形。最初の ? より後ろがクエリ
  const qAt = state.indexOf("?");
  return qAt >= 0 ? parseLiffQuery(state.slice(qAt), schema) : {};
}

const schema = { keys: ["area_code", "return_url"], urlKeys: ["return_url"] };

const early = readLiffQuery(window.location, schema); // liff.init() の前
await liff.init({ liffId: "1234567890-AbcdEfgh" });
const after = readLiffQuery(window.location, schema); // liff.init() の後。early と同じになる

// liff.init() より前に実行する。location.hash にはアクセストークンが入るので記録しない
const firstSearch = location.search; // 1次リダイレクト先（liff.state を含む）
await liff.init({ liffId });
console.table({
  sdk: liff.getVersion(),       // SDK のバージョン（2.31.0 → 2.31.1 の切り替わり）
  line: liff.getLineVersion(),  // LINE アプリのバージョン
  os: liff.getOS(),
  inClient: liff.isInClient(),  // LIFF ブラウザで開いたか
  firstSearch,
  secondSearch: location.search, // 2次リダイレクト先
});