liff.init()時のセキュリティ改善について

導入

LINE上でアプリを開発する際に、LIFFを使用している方が多いのではないでしょうか。
LINE上のユーザー情報などを取得する際には、liff.init()を実行するのですが、今まではアクセストークンなどの機密情報が含まれた状態のURLでしたが、今回のアップデートでliff.init()後に一時リダイレクト先URLから機密情報が除外されるように変更されました。
詳細については以下をご覧ください。

LIFF v2.11.0アップデートについて

liff.init()後に一次リダイレクト先URLから機密情報が除外されるようになりました

セキュリティ上の観点から、liff.init()がresolveされたタイミングで、一次リダイレクト先URLからアクセストークンなどの機密情報を含むURLフラグメントが除外されるようになりました。そのため、メソッドチェーンのthen()メソッド内の処理では、機密情報を含まない一次リダイレクト先URLが現在のURLとして扱われます。

つまり、どういうことかというと

// ① URL上にアクセストークンなどの機密情報が含まれる
console.log(window.location.href);
// https://example.com/?liff.state=path#access_token=xxx&context_token=xxx&feature_token=xxx&id_token=xxx&client_id=xxx

liff.init({
    liffId: myLiffId
}).then(() => {
//  ② URL上に機密情報が除外される
    console.log(window.location.href);
    // https://example.com/?liff.state=path
});

①のタイミングでURLを取得した場合、URL上にアクセストークンなどの機密情報が含まれ、セキュリティ上好ましくない状態です。

一方②は、liff.init()がresolveされたタイミング、つまり非同期処理の結果が成功（resolve）で返された際に、then()を使用したメソッドチェーンでの処理内ではURL上に機密情報が除外されるようアップデートされました。

liff.init()について

LIFFアプリを作成するにあたり、必ず使用するのがこのメソッドです。

LIFFアプリを初期化することで、LIFF SDKの他のメソッドを実行できるようになります。

ちなみに、LIFFブラウザの場合、liff.init()実行時に自動でログイン処理が実行されますが、外部ブラウザ及びLINE内ブラウザの場合、liff.login()メソッドを実行して、ログイン処理を行う必要があります。

リクエストの例

// Promiseオブジェクトを使用する方法
liff.init({
    liffId: myLiffId
}).then(() => {
    // ここからLIFF SDKを使用可能
}).catch((err) => {
    // エラー時の処理
});

// コールバックを使用する方法
liff.init({ liffId: myLiffId }, Callback, errCallback);

liff.init()を実行した際の処理フロー

1次リダイレクト先URLは、ユーザーがLIFF URLにアクセスしたときに、LIFFサーバーから初めてリダイレクトされる先のURLです。ここにリダイレクトされた時に、liff.init()メソッドを実行します。

2次リダイレクト先URLは、liff.init()メソッドが実行された時に、ユーザーがリダイレクトされる先のURlです。ここにリダイレクトされたら、LIFFアプリのページを表示します。

こういったフローでLIFFアプリが起動されます。

まとめ

v2.11.0のアップデートにより、liff.init()時のURLに機密情報が除外されるようになりました。それにより、セキュリティ上より安全に使用できるようになっています。ただし、liff.init()後のメソッドチェーン内での処理でなければいけないのは注意が必要です。

宣伝

パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の髙井です。

私はモビリティソリューションデザインチームに所属しており、モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。

いわゆる「MaaS」に取り組んでおります。

私たちが「MaaS」に取り組む中で、現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいことなどなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！

また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。

「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）
「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）
「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）

最後まで読んでいただき、ありがとうございました！