イスタンブール行きたい

たまに書きたくなります

クロスドメインでCookieを書き換える方法

IT

退職が近いので、社内esaにまとめた内容を自分のブログに移していこうと思う。

 

背景

案件内容

ある英語のECサイト。トップページを管理しているベンダーと検索ページを担当しているベンダーが異なり、私の会社は検索ページを担当していた。

すなわち、トップページとそれ以外でドメインが異なるのだ。

英語のECサイトなのだが、多言語化をしたいということで、Googleの翻訳タグを埋め込むことになった。

課題

Googleの翻訳はcookieの値を参照してどの言語に翻訳されるか決定される。googtrans=/en/ko ならページが韓国語に翻訳されるし、 googtrans=/en/ar ならページがアラビア語に翻訳される。 ドメインが同一ならCookieの書き換えは容易いことであるが、Cookieは異なるドメインでは書き換えることができない。前述のようにトップページと検索ページはドメインが異なるのだが、トップページから検索ページのドメインのCookieを書き換え、またその逆も行わなければならない。

調整した仕様

概要 双方のサイトにCookie書き換え用ページを用意し、片方のサイトで言語が変更されたタイミングでiframe内で他方のページを呼び出し、他方サイトのCookie書き換えを行う。呼び出すCookie書き換え用ページのURLにGETパラメータとして暗号化した鍵パラメータ、言語を表すlngパラメータを付けることで受信側は送信側の妥当性を確認、指定の言語に自身のドメインのCookie「googtrans」を書き換える。

具体的には、相手側ドメインのCookie書き換え用ページのURLを互いにあらかじめ共有し、指定の方式でパラメータを付けてiframe内で送信する。

iframeは同一生成元ポリシーを回避できるため、iframeを使用した。

実装

概要

iframeタグのsrc属性に呼び出すURLを指定する。

iframeのsrc属性は「表示させるファイルの出処を指定する」ということで、src属性にURLを指定することでiframeタグが読み込まれた段階で指定したURLが呼ばれたことにすればいいんじゃね？という考えから思いついた。

コード 

 

<iframe id="iframe-googletrans" name="iframe-googletrans"  width="0" height="0" style="display:none;visibility:hidden"></iframe>

/* Google翻訳の要素 */
$(document).on("change", ".goog-te-combo", function(e) {
        setCookie(site.id);
});

function setCookie () {
    if (siteId === "global") {
        var aryCookies = document.cookie.split(";");
    var googletransCookie = "";
    for (var i = 0; i < aryCookies.length; i++) {
        if (/googtrans/.test(aryCookies[i])) {
            googletransCookie = aryCookies[i].replace(/\s/, "");
            break;
        }
    }

    /* cookie "googtrans" は googtrans=/en/ja という形。ISPパラメータとして送信する際は、lng=ja という形で送る */
    var selectedLangage = googletransCookie.split("=")[1].replace(/\/en\//, "");
    if (selectedLangage) {
        var src = $("#iframe-googletrans")[0].src;
        src = src.replace(/lng=[a-z]+/, "") + "lng=" + selectedLangage;
        $("#iframe-googletrans").attr("src", src);
    }
}

これで無事パラメータ付きでクロスドメインで指定のURLを呼び出し、Cookieを書き換えることで選択した言語を引き継げるようになった。

結論

クロスドメインでCookieを書き込みたいときは、iframeのsrc属性にCookie書き込み用ページのURL指定しましょう