8
Help us understand the problem. What are the problem?

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()を実行した際の処理フロー

liff.init().png

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 後編)

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
8
Help us understand the problem. What are the problem?