iOS11 ～ iOS12.1 SafariでのCookieの有効化について << mixi Developer Center (ミクシィデベロッパーセンター)

mixi.cookie.enable({
　　url                    : "http://example.com/set_cookie.php",
　　urlToGrantStorageAccess: "http://example.com/grant_storage_access.php",
　　appParams              : {bar: 'baz'}
});

追加の項目につきましてご説明します。

項目	内容
urlToGrantStorageAccess	次項で設置して頂くStorageAccess許可スクリプトのURL

＜例＞ Cookieのチェック後に関数を呼び出す

mixi.cookie.enable()関数を利用する際に、関数の呼び出しとアプリへのリダイレクトがループしないように注意する必要があります。
アプリ内部でCookieの書き込みを行った後に呼び出されるページは
次の様にCookieの存在確認をすることで必要な場合のみmixi.cookie.enable()関数を呼び出すことができます。

(function () {
    if (window.navigator.cookieEnabled && !document.cookie) {
        mixi.cookie.enable({
            url                    : "http://example.com/set_cookie.php",
            urlToGrantStorageAccess: "http://example.com/grant_storage_access.php",
            appParams              : {'bar': 'baz'}
        });
    }
})();

(2) StorageAccess許可スクリプトの実行

urlToGrantStorageAccessを設定するとStorageAccessAPIを利用できるブラウザの場合に、StorageAccess許可スクリプトがGETで呼び出されます。
StorageAccess許可スクリプトには下記の処理を含め、アプリのドメイン配下に設置します。

署名付きリクエストの検証
Cookieをセットする処理
- ここでセットするCookieはアプリで使用するものではありません。3rd-Party Cookieをセットする準備として必要です。
StorageAccessAPIの実行
- StorageAccessの許可を得るにはタップやクリックなどのユーザジェスチャーが必要です。ここではボタンを設置しています。
GET で渡るcallback_urlパラメータへのリダイレクト処理
- StorageAccessへの許可の取得に成功した場合に、requestStorageAccess()が返すpromiseの一つ目の関数が呼び出されます。そこでcallback_urlへのリダイレクトを行っています。

＜例＞ PHPの場合
grant_storage_access.php

<?php
// 実際には署名付きリクエストの検証を行い、その結果正しいリクエストの場合にのみ以下処理を行ってください

// 1st Party環境にて、Cookieをセットする必要があります。
// これをしないとStorageAccessの許可を取得しても、3rd Party Cookieをセットできません。
// このCookieは3rd Partyで使用できない可能性があるので、keyとvalueは任意の値で構いません。
setcookie("1st-party-cookie", "foo", time()+3600*24*30);

// callback_urlを変数化して、Javascriptで使用します。
$callback_url = $_GET['callback_url'];
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのmixiアプリ</title>
  </head>
  <body>
    <div>
      grant_storage_access.php
    </div>
    <div>
        <button type="button" name="bar" value="foo" id="requestStorageAccessWithUserGesture">
            アプリへ戻る
        </button>
    </div>
    <div id="app"
      data-callback-url="<?=htmlspecialchars( $callback_url, ENT_QUOTES )?>"
    ></div>

    <script>
        var app = document.getElementById('app');
        var requestStorageAccessWithUserGesture = function () {
            var promise = document.hasStorageAccess();
            promise.then(
                function (hasAccess) {
                    if (hasAccess) {
                        var promise = document.requestStorageAccess();
                        promise.then(
                            function () {
                                // Storage Accessが許可された場合
                                location.href = app.dataset.callbackUrl;
                            }
                        );
                    }
                }
            );
        }

        var btn = document.getElementById("requestStorageAccessWithUserGesture");
        btn.addEventListener('click', () => {
            requestStorageAccessWithUserGesture();
        });
    </script>
  </body>
</html>

StorageAccessAPIの詳細につきましては下記のドキュメントを参照してください。
https://webkit.org/blog/8124/introducing-storage-access-api/

項目	内容
callback_url	アプリへ処理を戻す為のリダイレクト先URL。この値は変更せず、そのままリダイレクト先に指定してください。

StorageAccess許可スクリプトへのリクエストには、改ざん防止を目的とした署名（OAuth Signature）が付加されています。
悪意を持ったユーザによる不正アクセスを防ぐため、署名の検証を行い以下のチェックを行ってください。

mixi Platformから送信されたリクエストであること
リクエストの内容が改ざんされていないこと

署名方式にはRSA-SHA1を利用しています。また公開鍵はこちらに掲載されているものをご使用ください。
実際の検証方法については、署名付きリクエストの検証に関するドキュメントを参照してください。

(3) 3rd Party Cookieをセット

StorageAccess許可スクリプトがcallback_urlへリダイレクト処理を行うと、アプリ起動時と同様にアプリのスタートURLがPOSTで呼び出されます。
StorageAccess許可スクリプトを経由した場合のみ、スタートURLのリクエストボディに以下のパラメータが追加されます。

項目	渡される値、および例
via_url_to_grant_storage_access	true

上記以外のパラメータの追加と仕様の変更はございません。iOS6 SafariでのCookie有効化についてをご確認ください。
アプリ起動時と同様に、署名の検証を行ってください。起動時のパラメータとOAuth Signatureの検証をご確認ください。

ユーザジェスチャによりStorageAccessAPIが実行された後は、3rd Party Cookieの読み書きが可能になっているはずです。
アプリのスタートURLがPOSTで呼び出された後に、3rd Party Cookieの書き込みを行ってください。
アプリに使用するCookieは、下記のようにスタートURLなどの3rd Party環境にてセットしてください。
（ITPにトラッカー判定された後は、Cookieは1st Partyと3rd Partyで分割されるため、1st Party Cookieをセットしても読み取ることができません）

＜例＞スタートURLにて3rd Party Cookieをセットしています（PHPの場合）

if (isset($_POST['via_url_to_grant_storage_access']) && $_POST['via_url_to_grant_storage_access'] === 'true') {
    if (!isset($_COOKIE['3rd-party-cookie'])) {
        setcookie("3rd-party-cookie", "bar", time() + 86400);
    }
}

※（注意）POSTリクエストです。
ここでは、via_url_to_grant_storage_access='true' のパラメータを利用して、(2)のStorageAccess許可スクリプトから、スタートURLに着地した場合にのみCookieをセットしています。

ITP2.0の影響

iOS11 Safari から Intelligent Tracking Prevention（ITP）が導入され、Safariの設定で［サイト越えトラッキングを防ぐ］のオプションが追加されました。

ITPは機械学習を用いて、ドメインをトラッカー（ユーザの情報を収集し追跡できる）と判定するものです。
Safariの設定の［サイト越えトラッキングを防ぐ］のオプションは、そのトラッカー判定を有効にするもので、デフォルトで有効となります。
ITP2.0ではトラッカーと判定されたドメインは、即座にCookieが1st Partyと3rd Partyの領域に分割され、3rd Party領域のCookieは削除されます。
mixiアプリはiframeを利用しており、アプリのドメインのCookieを取得する場合は 3rd Party となります。
iOS6 SafariでのCookie有効化についてを利用すると、1st Party Cookieをセットするため、領域が分割された後だと3rd Partyと領域が異なるため参照できません。
そのことから、mixiアプリのドメインがトラッカーと判定されると、アプリでのCookieによるセッション管理ができない状態になります。

ITPの詳細につきましては下記を参照してください。
https://webkit.org/blog/8311/intelligent-tracking-prevention-2-0/

このページの上部へ

mixi Developer Center (ミクシィ デベロッパーセンター)

mixiアプリ