SafariのみCookieからデータ取得できない現象に苦しめられた話

背景

toC向けのフォームにて広告等流入経路識別のために独自IDを割り振り、URLパラメータへそれぞれ埋め込んでいた。

どんな仕組みか

各経路からWebフォームへ遷移する際にURLパラメータの各情報をCookieへ格納。その後コンバージョンでパラメータも併せて送信することで流入経路の識別に活用していた。

問題点

プライバシーの観点から、トラッキングやCookie無効化設定をしているユーザが増えている

Cookieありきで構築したシステムの信頼性が揺らいでおり、フローの調整が必要

Cookie利用可否判定のロジックが十分でない

元々は以下のようにdocuent.cookieの中身をチェックして判定していた。

if(document.cookie != ""){
//処理
}

GTM・GAを利用していたこともあり、document.cookieが空のままフォームを訪れる状況は想定外だった。
ただし昨今のSafariではサードパーティスクリプトの呼び出しをブロック、または遅延させるようになっているようで、ユーザの初回訪問時に上記Cookie利用可否判定の時点ではCookieが空になっている割合が増加しつつあった。
(この辺りWebkit周りのリリースノート調べてもそれらしき問題が見つかりませんでした・・・有識者の方いらっしゃいましたらコメントください)

ポイント

• ユーザがCookie無効化していることを正しく判定する
  誤った判定をしてしまうと本来送信すべきでないパラメータを渡してしまう。
  検証した方法は以下の2点

• navigator.cookieEnabled
  対象環境でCookieが利用可能かを判定する読み取り専用プロパティ。

if(!navigator.cookieEnabled){
//利用不可の場合
}

一部ブラウザやiframe下で利用すると利用不可でもtrueを返却してしまう場合がある。

引用

メモ: ブラウザーがサードパーティのクッキーをブロックするように構成されていた場合で、 navigator.cookieEnabled がサードパーティの iframe の中で呼び出された場合、 Safari, Edge Spartan, IE では true を返します (この場合にクッキーを設定しようとしても失敗するにもかかわらず)。 Firefox および Chromium ベースのブラウザーでは false を返します。

対応ブラウザも一通りカバーしているが、Edge、Safari系では上記問題が発生するとのこと。
https://caniuse.com/?search=cookieEnabled

また、PC Chromeでデバイスへのデータ書き込み不可(Cookieアクセス不可)にした場合でも「true」を返却してしまっていた。
→ファーストパーティCookieの利用可否判定はしていない？

• Cookieにデータを一度格納し、再取得できるかチェックする
  結果としてこれがうまくいった。

Vueを使った例 (VueUse)

import { useCookies } from '@vueuse/integrations/useCookies'

export default () => {
    const cookies = useCookies(["check-enabled"])
    
    cookies.set("check-enabled", true, { maxAge:3600 }) //3600second
    
    const cookieEnabled = cookies.get("check-enabled")

    if(cookieEnabled) {
    // Cookie利用可能な場合
    }
}

VueUse UseCookies

まとめ

最初にアクセスした経路を優先する制御が必要だったためCookieを利用していますが、もっとシンプルなルールならURLパラメータから直接取得するか、サーバーサイド実装する工数取れるならセッション管理の方が良さそうだと感じました。
Safariのごく一部だけで発生する現象だったことから原因特定が非常に困難でした・・・
いまだに理解できていない箇所もあるので引き続き調査していこうと思います。