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

mixiアプリ

mixiアプリ » 技術仕様(RESTful API方式) » スマートフォン » iOS11 ~ iOS12.1 SafariでのCookieの有効化について

iOS11 ~ iOS12.1 SafariでのCookieの有効化について

ご注意

本ドキュメントは ITP2.0 についてのものです。今後リリースが予定されている ITP2.1 以降については WebKit のサイトをご確認ください。

iOS12.2にて搭載される予定のITP2.1について
https://webkit.org/blog/8613/intelligent-tracking-prevention-2-1/

iOS11 ~ iOS12.1 SafariでのCookieの有効化について

iOS11 ~ iOS12.1 Safari をデフォルト設定のまま利用して、mixiアプリTouch版を閲覧すると、Safariはアプリが設定したCookieを参照できない場合があります。
この問題はStorageAccessAPIを用いることで解消することができます。

下記を参考に3rd Party Cookie の有効化を行ってください。

StorageAccessAPIを用いた 3rd Party Cookie 有効化の方法

StorageAccessAPIを用いた 3rd Party Cookieの有効化は次の3つの手順で行います。

(1) urlToGrantStorageAccessパラメータの追加(mixi.cookie.enable)
(2) StorageAccess許可スクリプトの実行
(3) 3rd Party Cookieをセット

(1) urlToGrantStorageAccessパラメータの追加(mixi.cookie.enable)

mixi.cookie.enable()の引数にurlToGrantStorageAccessのパラメータの追加をお願いします。

(2)で設置するスクリプトを指定してください。

mixi.cookie.enable()の使用方法に変更はございません。 iOS6 SafariでのCookie有効化について をご確認ください。

url につきましては、iOS11 より前のバージョンをサポートする場合は必要になります。
appParams は引き続きご利用いただけます。例は下記になります。


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がGETで呼び出されます。
StorageAccess許可スクリプトを経由した場合のみ、スタートURLのリクエストボディに以下のパラメータが追加されます。

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

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

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


<例>スタートURLにて3rd Party Cookieをセットしています(PHPの場合)

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

※(注意)GETリクエストです。
ここでは、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/

このページの上部へ