Dapatkah javascript mengakses cookie dari domain yang berbeda?

Ya, ya - ini disebut "Cross Domain Cookie", tetapi menggunakan localStorage. Pada iterasi pertama, cookie digunakan, tetapi karena perubahan saat ini dan yang akan datang pada kebijakan cookie browser, belum lagi tunjangan hard drive yang lebih besar untuk LS, lebih masuk akal untuk memindahkannya ke penyimpanan lokal.

Namun, "Cross Domain Cookie" akan tetap ada

Ringkasan

Nilai localStorage adalah potongan data yang kami simpan ke hard drive pengguna untuk digunakan nanti oleh aplikasi kami. Setiap nilai yang kami simpan dicakup ke domain tempat pengguna berada saat penyimpanan dilakukan. Demikian juga, saat mengambil nilai, kami dibatasi untuk hanya mengakses nilai yang disimpan ke domain tempat kode kami dijalankan

Ini bagus, karena melarang situs belanja pengguna mengambil data dari, katakanlah, situs media sosial mereka, tanpa persetujuan pengguna atau situs media sosial

Di mana hal ini menjadi menyakitkan - terkadang pemilik situs memiliki dua situs dan ingin membiarkan pengguna lewat dengan mudah di antara mereka dengan semua data yang disimpan. Jika, misalnya, Anda memiliki rangkaian situs dengan domain yang berbeda dan pengguna masuk ke salah satu situs, Anda sebaiknya tidak membuat mereka masuk lagi saat berpindah ke yang lain. Ini membuat UX buruk bagi pengguna yang menginginkan pengalaman mulus

Masukkan cookie lintas-domain. Paket ini memungkinkan Anda untuk menyimpan semua data pengguna di domain pusat (hub), dan mengatur atau mengaksesnya dari domain (satelit) yang bergantung. Ini juga memungkinkan Anda untuk menggabungkan logika pengambilan data Anda di domain pusat, sehingga semua domain satelit hanya perlu mengambilnya. Ini memungkinkan pendekatan yang lebih KERING

Penggunaan

cross-domain-cookie menyediakan kode untuk iframe yang dihosting di domain hub, serta pengambil dan penyetel data untuk domain satelit

Penyiapan minimum hanya melibatkan penerapan kode iframe dengan daftar domain satelit yang terdaftar akses ke domain hub Anda, dan menggunakan fungsi get dan

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
0 di aplikasi pada domain satelit

Catatan

Anda dapat menemukan contoh lengkap penggunaan di direktori /examples dari repo. Perhatikan bagian "Tes Asap" di bawah untuk cara menjalankan contoh secara lokal

Setting dan Mendapatkan Data dari Aplikasi Satelit

iframe di hub. com/cross-domain-cookie. html

import { createIframe } from "cross-domain-cookie";

// Sites allows to access data on the hub domain:
const dependentDomains = ["satellite1.com", "satellite2.com"];

// Sets up the contents of the iframe:
createIframe({ dependentDomains });

// That's it!  Including this code in an HTML file on your central domain readies you for data sharing across domains.
_

Di suatu tempat di aplikasi di satellite1. com

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});

Di suatu tempat di aplikasi di satellite2. com

import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/

Di balik tudung, fungsi get dan

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
0 menyuntikkan skrip iframe ke halaman, lalu mengirimkan permintaan untuk mengakses ruang penyimpanan lokalnya. Iframe berisi kode untuk menginterpretasikan permintaan, dan mendapatkan serta menyetel data seperti yang diinstruksikan

Namun, salah satu kekuatan cookie lintas-domain adalah memungkinkan Anda menjadikan iframe sebagai sumber kebenaran, mengurangi potensi kondisi balapan dan perilaku non-KERING di aplikasi satelit Anda. Hal ini dilakukan dengan menggunakan penangan di iframe untuk melakukan pengambilan cookie, sehingga aplikasi satelit dapat menerima begitu saja proses akuisisi data. Baca terus

Penangan Iframe

Dengan menyetel

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_3 untuk
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4 di iframe, aplikasi satelit Anda dapat meminta data, dan iframe hub akan menangani pengambilan data. Ini berarti tidak ada aplikasi yang harus menyetel data sebelum orang lain dapat mengambilnya

iframe di hub. com/cross-domain-cookie. html

import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});

Dalam kasus di atas, iframe sekarang akan menghosting pengambil data kami,

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
5. Nilai yang dikembalikan oleh fungsi sinkron atau asinkron ini akan disimpan di kunci
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
6 di iframe, dan tersedia untuk semua domain satelit

Kami sekarang dapat menambahkan kode berikut ke satellite1. com dan satellite2. com. Satelit pertama yang memanggil iframe akan memicu iframe untuk mengeksekusi

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
5 dan meng-cache respons di hub. Pada panggilan kedua, iframe akan segera membalas dengan nilai yang di-cache

Di suatu tempat di aplikasi di satellite1. com

import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000

API

Fungsi untuk menghasilkan kode yang ada di iframe pada domain hub. Sertakan output dalam dokumen HTML, dan terapkan ke domain hub Anda

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_9 Parameter

optiondescriptionrequiredtypeexample
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
0Array domain yang diizinkan untuk mengakses data di domain hub. Jangan sertakan protokol atau jalur.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1Array
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
2
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
3Array konfigurasi untuk setiap nilai data yang akan dikelola iframe.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
4ArrayLihat di bawah.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
5Kunci penyimpanan lokal tempat data akan disimpan. Juga digunakan saat mengambil nilai.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1String
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
7
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
8Fungsi yang mengambil data untuk di-cache di localStorage. Opsional menerima argumen yang dikirimkan aplikasi saat meminta datum. Data yang dikembalikan dari
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_3 harus dapat dirangkai atau primitif.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1Fungsi
import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
1

Pengembalian

import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
2

Fungsi yang digunakan oleh aplikasi untuk mengatur nilai localStorage pada domain hub

Catatan

Jangan gunakan `set` jika `dataKey` menyertakan `dataConfigs` yang dikonfigurasi dalam fungsi `createIframe` di hub. Dalam hal ini, iframe menjadi penyetel, dan aplikasi hanya perlu menggunakan fungsi `get` (di bawah) untuk mengambil data

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_9 Parameter

optiondescriptionrequiredtypeexample
import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
5URL lengkap di domain hub tempat iframe berada.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1String
import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
7
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4Kunci penyimpanan lokal tempat data akan disimpan di bawah domain hub.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1String
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
0
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
1Nilai yang akan disimpan.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1Nilai primitif atau yang dapat dirangkai.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
3
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
4Jumlah hari sebelum data kadaluarsa. Default hingga 30 tahun.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
4Nomor
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
6

Pengembalian

Data dikirim dengan permintaan ke domain hub, setelah mengalami caching penyimpanan lokal. Perhatikan ini akan menjadi nilai setelah dikenakan

import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
7,
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
8 dan penerapan kedaluwarsa

Fungsi yang digunakan oleh aplikasi untuk mendapatkan datum dari domain hub. Harus mereferensikan

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4 yang sebelumnya ditetapkan oleh fungsi
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
0 atau mengonfigurasi dalam objek
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
3 yang diteruskan ke fungsi
127.0.0.1	dependant-site.com
127.0.0.1	source-of-truth.com
3

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_9 Parameter

optiondescriptionrequiredtypeexample
import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
5URL lengkap di domain hub tempat iframe berada.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1String
import { createIframe } from 'cross-domain-cookie'

// A function of the user's choosing, which returns a primitive or stringify-able value:
import { createUserUuid } from 'my-data-getter'

const dependentDomains = ['satellite1.com', 'satellite2.com']

createIframe({
    dependentDomains,
    dataConfigs: [
        {
            dataKey: 'userUuid',
            handler: createUserUuid
        }
    ]
});
7
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4Nama di mana datum disimpan di domain hub.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1String
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
0
npm run dev-iframe
1Nilai yang akan diterima oleh penangan iframe
npm run dev-iframe
2. Hanya berlaku untuk
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4s dengan
npm run dev-iframe
2 objek diteruskan ke fungsi
127.0.0.1	dependant-site.com
127.0.0.1	source-of-truth.com
3 pada domain hub.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
4Nilai primitif atau yang dapat dirangkai.
npm run dev-iframe
7
npm run dev-iframe
8Jika
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1, akan membersihkan data, memaksa penangan iframe untuk mengambil kembali nilai data. Hanya berlaku untuk
import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
4s dengan
npm run dev-iframe
2 objek diteruskan ke fungsi
127.0.0.1	dependant-site.com
127.0.0.1	source-of-truth.com
3 pada domain hub.
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
4Boolean
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
});

console.log(result)
/* Logs:
{
    c: 'is for localStorage',
    and: 'that\'s good enough for me.'
}
*/
1

Pengembalian

Data sebelumnya disimpan di

import { set } from "cross-domain-cookie";

const result = await set({
  // This is the URL at which you've hosted the output of `createIframe`, above:
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'chocolate-chip-oatmeal',
  data: {
      c: 'is for localStorage',
      and: 'that\'s good enough for me.'
  }
});
_4 di domain hub. Jika ini adalah objek, maka akan dikenakan
import { get } from "cross-domain-cookie";

const result = await get({
  iframeUrl: 'https://hub.com/cross-domain-cookie.html',
  dataKey: 'userUuid',
});

console.log(result) // 123e4567-e89b-12d3-a456-426655440000
8 sebelum tiba kembali di aplikasi

Untuk menguji

Tes unit

[TBD] Aku yang terburuk

Tes Asap

Untuk beberapa pengujian hacky smoke, tambahkan entri berikut ke file etc/hosts Anda

127.0.0.1	dependant-site.com
127.0.0.1	source-of-truth.com

Dalam satu terminal dijalankan

npm run dev-iframe

Dalam menjalankan terminal kedua

npm run dev-app

Arahkan ke http. //situs-bergantung. com. 2222, dan amati output pada halaman

Anda akan mencatat bahwa tidak ada nilai yang disimpan di localStorage dari http. //situs-bergantung. com. 2222. Jika Anda menavigasi ke http. //sumber-kebenaran. com. 1111, Anda akan menemukan semua contoh nilai yang tersimpan di sana

Membangun

Untuk membangun bundel, jalankan

npm run build

Outputnya dapat ditemukan di folder

npm run dev-app
7

Terima kasih khusus

lintas-domain-cookie bercabang dari https. //github. com/JohnMealy23/cookie-toss. Banyak terima kasih kepada John Mealy

Seperti yang kita ketahui bahwa cookie yang disetel oleh satu domain tidak dapat diakses oleh domain lain . Tetapi cookie yang disetel ke domain utama dapat diakses oleh subdomain. Contoh. Cookie disetel ke domain “maindomain. com” dapat diakses oleh subdomain manapun dari domain utama, yaitu subdomain. maindomain. com, anysub. maindomain. com.
Cookie lintas domain termasuk dalam kategori pihak ketiga. Cookie ini digunakan untuk melacak pengguna di berbagai domain atau situs web. Katakanlah Anda masuk ke akun Google Anda, lalu mengunjungi situs web lain tanpa keluar
Seperti yang Anda ketahui, cookie tidak dapat disetel di domain yang berbeda dari domain lain secara langsung . Jika Anda memiliki beberapa situs di mana Anda perlu menyetel cookie dari situs induk, Anda dapat menggunakan HTML dasar dan JS untuk menyetel cookie. Google menggunakan cara yang sama.