Embedding tanpa cookie

Saat Looker disematkan dalam iframe menggunakan penyematan bertanda tangan, beberapa browser secara default menggunakan kebijakan cookie yang memblokir cookie pihak ketiga. Cookie pihak ketiga ditolak jika iframe yang disematkan dimuat dari domain yang berbeda dengan domain yang memuat aplikasi penyematan. Anda biasanya dapat mengatasi batasan ini dengan meminta dan menggunakan domain kustom. Namun, domain kustom tidak dapat digunakan dalam beberapa skenario. Untuk skenario seperti inilah penyematan tanpa cookie Looker dapat digunakan.

Bagaimana cara kerja penyematan tanpa cookie?

Jika cookie pihak ketiga tidak diblokir, cookie sesi akan dibuat saat pengguna pertama kali sedang login ke Looker. Cookie ini dikirim dengan setiap permintaan pengguna, dan server Looker menggunakannya untuk menetapkan identitas pengguna yang memulai permintaan. Jika cookie diblokir, cookie tidak akan dikirim bersama permintaan, sehingga server Looker tidak dapat mengidentifikasi pengguna yang terkait dengan permintaan tersebut.

Untuk mengatasi masalah ini, penyematan tanpa cookie Looker mengaitkan token dengan setiap permintaan yang dapat digunakan untuk membuat ulang sesi pengguna di server Looker. Aplikasi penyematan bertanggung jawab untuk mendapatkan token ini dan menyediakannya untuk instance Looker yang berjalan di iframe tersemat. Proses mendapatkan dan memberikan token ini dijelaskan di bagian selanjutnya dalam dokumen ini.

Untuk menggunakan salah satu API, aplikasi penyematan harus dapat melakukan autentikasi ke Looker API dengan hak istimewa admin. Domain sematan juga harus tercantum dalam Daftar yang Diizinkan untuk Domain Sematan, atau, jika menggunakan Looker 23.8 atau yang lebih baru, domain sematan dapat disertakan saat sesi tanpa cookie diperoleh.

Membuat iframe sematan Looker

Diagram urutan berikut mengilustrasikan pembuatan iframe sematan. Beberapa iframe dapat dibuat secara bersamaan atau berurutan. Jika diterapkan dengan benar, iframe akan otomatis bergabung ke sesi yang dibuat oleh iframe pertama. Looker Embed SDK menyederhanakan proses ini dengan otomatis bergabung ke sesi yang ada. Untuk panduan tentang cara menghindari tabrakan login serentak saat memuat beberapa iframe, lihat Praktik terbaik untuk menyematkan beberapa iframe dengan penyematan tanpa cookie.

Diagram urutan yang mengilustrasikan pembuatan iframe sematan.

  1. Pengguna melakukan tindakan di aplikasi penyematan yang menghasilkan pembuatan iframe Looker.
  2. Klien aplikasi penyematan memperoleh sesi Looker. Looker Embed SDK dapat digunakan untuk memulai sesi ini, tetapi URL endpoint atau fungsi callback harus disediakan. Jika fungsi callback digunakan, fungsi ini akan memanggil server aplikasi penyematan untuk mendapatkan sesi penyematan Looker. Jika tidak, Embed SDK akan memanggil URL endpoint yang disediakan.
  3. Server aplikasi penyematan menggunakan Looker API untuk mendapatkan sesi penyematan. Panggilan API ini mirip dengan proses penandatanganan penyematan bertanda tangan Looker, karena menerima definisi pengguna penyematan sebagai input. Jika sesi penyematan Looker sudah ada untuk pengguna yang memanggil, token referensi sesi terkait harus disertakan dalam panggilan. Hal ini akan dijelaskan secara lebih mendetail di bagian Mendapatkan sesi dalam dokumen ini.
  4. Pemrosesan endpoint dapatkan sesi sematan mirip dengan endpoint /login/embed/(signed url) yang ditandatangani, karena endpoint ini mengharapkan definisi pengguna sematan Looker sebagai isi permintaan, bukan di URL. Proses endpoint dapatkan sesi sematan memvalidasi, lalu membuat atau memperbarui, pengguna sematan. API ini juga dapat menerima token referensi sesi yang ada. Hal ini penting karena memungkinkan beberapa iframe tersemat Looker berbagi sesi yang sama. Pengguna sematan tidak akan diperbarui jika token referensi sesi diberikan dan sesi belum berakhir. Hal ini mendukung kasus penggunaan saat satu iframe dibuat menggunakan URL sematan yang ditandatangani dan iframe lainnya dibuat tanpa URL sematan yang ditandatangani. Dalam hal ini, iframe tanpa URL sematan yang ditandatangani akan mewarisi cookie dari sesi pertama.
  5. Panggilan Looker API menampilkan empat token, masing-masing dengan time to live (TTL):
    • Token otorisasi (TTL = 30 detik)
    • Token navigasi (TTL = 10 menit)
    • Token API (TTL = 10 menit)
    • Token referensi sesi (TTL = sisa masa aktif sesi)
  6. Server aplikasi penyematan harus melacak data yang ditampilkan oleh data Looker dan mengaitkannya dengan pengguna yang memanggil dan agen pengguna browser pengguna yang memanggil. Saran tentang cara melakukannya diberikan di bagian Membuat token dalam dokumen ini. Panggilan ini akan menampilkan token otorisasi, token navigasi, dan token API, beserta semua TTL terkait. Token referensi sesi harus diamankan dan tidak diekspos di browser panggilan.
  7. Setelah token ditampilkan ke browser, URL login sematan Looker harus dibuat. Looker Embed SDK akan membuat URL login sematan secara otomatis. Untuk menggunakan windows.postMessage API dalam membuat URL login sematan, lihat bagian Menggunakan windows.postMessage API Looker dalam dokumen ini untuk mengetahui contohnya.

    URL login tidak berisi detail pengguna sematan yang ditandatangani. Respons ini berisi URI target, termasuk token navigasi, dan token otorisasi sebagai parameter kueri. Token otorisasi harus digunakan dalam waktu 30 detik dan hanya dapat digunakan sekali. Jika iframe tambahan diperlukan, sesi penyematan harus diperoleh lagi. Namun, jika token referensi sesi diberikan, token otorisasi akan dikaitkan dengan sesi yang sama.

  8. Endpoint login sematan Looker menentukan apakah login tersebut untuk sematan tanpa cookie, yang ditandai dengan adanya token otorisasi. Jika token otorisasi valid, token tersebut akan memeriksa hal berikut:

    • Sesi terkait masih valid.
    • Pengguna sematan terkait masih valid.
    • Agen pengguna browser yang terkait dengan permintaan cocok dengan agen browser yang terkait dengan sesi.
  9. Jika pemeriksaan dari langkah sebelumnya lulus, permintaan akan dialihkan menggunakan URI target yang terdapat dalam URL. Proses ini sama dengan proses login sematan bertanda tangan Looker.

  10. Permintaan ini adalah pengalihan untuk meluncurkan dasbor Looker. Permintaan ini akan memiliki token navigasi sebagai parameter.

  11. Sebelum endpoint dijalankan, server Looker mencari token navigasi dalam permintaan. Jika server menemukan token, server akan memeriksa hal berikut:

    • Sesi terkait masih valid.
    • Agen pengguna browser yang terkait dengan permintaan cocok dengan agen browser yang terkait dengan sesi.

    Jika valid, sesi akan dipulihkan untuk permintaan dan permintaan dasbor akan dijalankan.

  12. HTML untuk memuat dasbor ditampilkan ke iframe.

  13. UI Looker yang berjalan di iframe menentukan bahwa HTML dasbor adalah respons sematan tanpa cookie. Pada tahap tersebut, UI Looker akan mengirim pesan ke aplikasi penyematan untuk meminta token yang diambil di langkah 6. UI kemudian menunggu hingga menerima token. Jika token tidak sampai, pesan akan ditampilkan.

  14. Aplikasi penyematan mengirimkan token ke iframe tersemat Looker.

  15. Saat token diterima, UI Looker yang berjalan di iframe akan memulai proses untuk merender objek permintaan. Selama proses ini, UI akan melakukan panggilan API ke server Looker. Token API yang diterima di langkah 15 akan otomatis dimasukkan sebagai header ke semua permintaan API.

  16. Sebelum endpoint dijalankan, server Looker akan mencari token API dalam permintaan. Jika server menemukan token, server akan memeriksa hal berikut:

    • Sesi terkait masih valid.
    • Agen pengguna browser yang terkait dengan permintaan cocok dengan agen browser yang terkait dengan sesi.

    Jika sesi valid, sesi akan dipulihkan untuk permintaan, dan permintaan API akan dijalankan.

  17. Data dasbor ditampilkan.

  18. Dasbor akan dirender.

  19. Pengguna memiliki kontrol atas dasbor.

Membuat token baru

Diagram urutan berikut menggambarkan pembuatan token baru.

Diagram urutan yang menggambarkan pembuatan token baru.

  1. UI Looker yang berjalan di iframe tersemat memantau TTL token sematan.
  2. Saat token mendekati masa habis berlaku, UI Looker akan mengirimkan pesan token refresh ke klien aplikasi penyematan.
  3. Klien aplikasi penyematan kemudian meminta token baru dari endpoint yang diimplementasikan di server aplikasi penyematan. Looker Embed SDK akan meminta token baru secara otomatis, tetapi URL endpoint atau fungsi callback harus disediakan. Jika fungsi callback digunakan, fungsi ini akan memanggil server aplikasi penyematan untuk membuat token baru. Jika tidak, Embed SDK akan memanggil URL endpoint yang disediakan.
  4. Aplikasi penyematan menemukan session_reference_token yang terkait dengan sesi penyematan. Contoh yang disediakan dalam repositori Git Looker Embed SDK menggunakan cookie sesi, tetapi cache sisi server terdistribusi, misalnya Redis, juga dapat digunakan.
  5. Server aplikasi penyematan memanggil server Looker dengan permintaan untuk membuat token. Permintaan ini juga memerlukan token API dan navigasi terbaru selain agen pengguna browser yang memulai permintaan.
  6. Server Looker memvalidasi agen pengguna, token referensi sesi, token navigasi, dan token API. Jika permintaan valid, token baru akan dibuat.
  7. Token ditampilkan ke server aplikasi penyematan yang memanggil.
  8. Server aplikasi penyematan menghapus token referensi sesi dari respons dan menampilkan respons yang tersisa ke klien aplikasi penyematan.
  9. Klien aplikasi penyematan mengirimkan token yang baru dibuat ke UI Looker. Looker Embed SDK akan melakukannya secara otomatis. Klien aplikasi penyematan yang menggunakan windows.postMessage API akan bertanggung jawab untuk mengirim token. Setelah UI Looker menerima token, token tersebut akan digunakan dalam panggilan API dan navigasi halaman berikutnya.

Menerapkan penyematan tanpa cookie Looker

Penyematan Looker tanpa cookie dapat diterapkan menggunakan Looker Embed SDK atau windows.postMessage API. Anda dapat menggunakan metode Looker Embed SDK, tetapi contoh yang menunjukkan cara menggunakan windows.postMessage API juga tersedia. Penjelasan mendetail tentang kedua penerapan tersebut dapat ditemukan di file README Embed SDK Looker. Repositori git Embed SDK juga berisi implementasi yang berfungsi.

Mengonfigurasi instance Looker

Embedding tanpa cookie memiliki karakteristik yang sama dengan embedding bertanda tangan Looker.

Prasyarat

Untuk menggunakan penyematan tanpa cookie dan mengekspos endpoint API penyematan tanpa cookie, administrator Looker harus memverifikasi dan mengaktifkan persyaratan berikut di panel Admin Looker:

  • Embed SSO Authentication: Di panel Admin > Platform > Embed, aktifkan Embed SSO Authentication. Penyematan tanpa cookie mengandalkan fungsi Autentikasi SSO Penyematan yang mendasarinya sebagai setelan dasar.
  • Sesi Persisten: Di panel Admin > Autentikasi > Sesi, aktifkan Sesi Persisten.
  • Izin pengguna API: Pastikan kredensial API yang digunakan untuk memperoleh token adalah milik pengguna Looker dengan peran Admin atau peran khusus yang berisi izin manage_embed_settings.

Mengonfigurasi secret Token Web JSON

Tidak seperti penyematan bertanda tangan Looker, penyematan tanpa cookie tidak menggunakan setelan Embed Secret. Penyematan tanpa cookie menggunakan JSON Web Token (JWT) dalam bentuk setelan Embed JWT Secret, yang dapat ditetapkan atau direset di halaman Embed di bagian Platform pada menu Admin.

Menetapkan rahasia JWT tidak diperlukan, karena upaya pertama untuk membuat sesi penyematan tanpa cookie akan membuat JWT. Jangan reset token ini, karena tindakan tersebut akan membatalkan semua sesi sematan tanpa cookie yang aktif.

Tidak seperti rahasia sematan, rahasia JWT sematan tidak pernah terekspos, karena hanya digunakan secara internal di server Looker.

Implementasi klien aplikasi

Bagian ini menyertakan contoh cara menerapkan penyematan tanpa cookie di klien aplikasi dan berisi subbagian berikut:

Menginstal atau mengupdate Looker Embed SDK

Versi Looker SDK berikut diperlukan untuk menggunakan penyematan tanpa cookie:

@looker/embed-sdk >= 2.0.0
@looker/sdk >= 22.16.0

Menggunakan Looker Embed SDK

Metode inisialisasi baru telah ditambahkan ke Embed SDK untuk memulai sesi tanpa cookie. Metode ini menerima dua string URL atau dua fungsi callback. String URL harus mereferensikan endpoint di server aplikasi penyematan. Detail penerapan endpoint ini di server aplikasi dibahas di bagian Penerapan server aplikasi dalam dokumen ini.

getEmbedSDK().initCookieless(
  runtimeConfig.lookerHost,
  '/acquire-embed-session',
  '/generate-embed-tokens'
)

Contoh berikut menunjukkan cara penggunaan callback. Callback hanya boleh digunakan jika diperlukan agar aplikasi klien penyematan mengetahui status sesi penyematan Looker. Anda juga dapat menggunakan peristiwa session:status, sehingga tidak perlu menggunakan callback dengan Embed SDK.

const acquireEmbedSessionCallback =
  async (): Promise<LookerEmbedCookielessSessionData> => {
    const resp = await fetch('/acquire-embed-session')
    if (!resp.ok) {
      console.error('acquire-embed-session failed', { resp })
      throw new Error(
        `acquire-embed-session failed: ${resp.status} ${resp.statusText}`
      )
    }
    return (await resp.json()) as LookerEmbedCookielessSessionData
  }

const generateEmbedTokensCallback =
  async ({ api_token, navigation_token }): Promise<LookerEmbedCookielessSessionData> => {
    const resp = await fetch('/generate-embed-tokens', {
      method: 'PUT',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ api_token, navigation_token }),
    })
    if (!resp.ok) {
      console.error('generate-embed-tokens failed', { resp })
      throw new Error(
        `generate-embed-tokens failed: ${resp.status} ${resp.statusText}`
      )
    }
    return (await resp.json()) as LookerEmbedCookielessSessionData
  }

getEmbedSDK().initCookieless(
  runtimeConfig.lookerHost,
  acquireEmbedSessionCallback,
  generateEmbedTokensCallback
)

Menggunakan Looker windows.postMessage API

Anda dapat melihat contoh mendetail penggunaan windows.postMessage API di file message_example.ts dan message_utils.ts di repositori Git Embed SDK. Sorotan contoh diuraikan di sini.

Contoh berikut menunjukkan cara membuat URL untuk iframe. Fungsi callback ini identik dengan contoh acquireEmbedSessionCallback yang terlihat sebelumnya.

  private async getCookielessLoginUrl(): Promise<string> {
    const { authentication_token, navigation_token } =
      await this.embedEnvironment.acquireSession()
    const url = this.embedUrl.startsWith('/embed')
      ? this.embedUrl
      : `/embed${this.embedUrl}`
    const embedUrl = new URL(url, this.frameOrigin)
    if (!embedUrl.searchParams.has('embed_domain')) {
      embedUrl.searchParams.set('embed_domain', window.location.origin)
    }
    embedUrl.searchParams.set('embed_navigation_token', navigation_token)
    const targetUri = encodeURIComponent(
      `${embedUrl.pathname}${embedUrl.search}${embedUrl.hash}`
    )
    return `${embedUrl.origin}/login/embed/${targetUri}?embed_authentication_token=${authentication_token}`
  }

Contoh berikut menunjukkan cara memproses permintaan token, membuat token baru, dan mengirimkannya ke Looker. Fungsi callback identik dengan contoh generateEmbedTokensCallback sebelumnya.

      this.on(
        'session:tokens:request',
        this.sessionTokensRequestHandler.bind(this)
      )

  private connected = false

  private async sessionTokensRequestHandler(_data: any) {
    const contentWindow = this.getContentWindow()
    if (contentWindow) {
      if (!this.connected) {
        // When not connected the newly acquired tokens can be used.
        const sessionTokens = this.embedEnvironment.applicationTokens
        if (sessionTokens) {
          this.connected = true
          this.send('session:tokens', this.embedEnvironment.applicationTokens)
        }
      } else {
        // If connected, the embedded Looker application has decided that
        // it needs new tokens. Generate new tokens.
        const sessionTokens = await this.embedEnvironment.generateTokens()
        this.send('session:tokens', sessionTokens)
      }
    }
  }

  send(messageType: string, data: any = {}) {
    const contentWindow = this.getContentWindow()
    if (contentWindow) {
      const message: any = {
        type: messageType,
        ...data,
      }
      contentWindow.postMessage(JSON.stringify(message), this.frameOrigin)
    }
    return this
  }

Implementasi server aplikasi

Bagian ini menyertakan contoh cara menerapkan penyematan tanpa cookie di server aplikasi dan berisi subbagian berikut:

Penerapan dasar

Aplikasi penyematan diperlukan untuk mengimplementasikan dua endpoint sisi server yang akan memanggil endpoint Looker. Hal ini untuk memastikan bahwa token referensi sesi tetap aman. Berikut endpoint-nya:

  1. Mendapatkan sesi — Jika token referensi sesi sudah ada dan masih aktif, permintaan untuk sesi akan bergabung dengan sesi yang ada. Dapatkan sesi dipanggil saat iframe dibuat.
  2. Membuat token — Looker memicu panggilan ke endpoint ini secara berkala.

Mendapatkan sesi

Contoh di TypeScript ini menggunakan sesi untuk menyimpan atau memulihkan token referensi sesi. Endpoint tidak harus diimplementasikan di TypeScript.

  app.get(
    '/acquire-embed-session',
    async function (req: Request, res: Response) {
      try {
        const current_session_reference_token =
          req.session && req.session.session_reference_token
        const response = await acquireEmbedSession(
          req.headers['user-agent']!,
          user,
          current_session_reference_token
        )
        const {
          authentication_token,
          authentication_token_ttl,
          navigation_token,
          navigation_token_ttl,
          session_reference_token,
          session_reference_token_ttl,
          api_token,
          api_token_ttl,
        } = response
        req.session!.session_reference_token = session_reference_token
        res.json({
          api_token,
          api_token_ttl,
          authentication_token,
          authentication_token_ttl,
          navigation_token,
          navigation_token_ttl,
          session_reference_token_ttl,
        })
      } catch (err: any) {
        res.status(400).send({ message: err.message })
      }
    }
  )

async function acquireEmbedSession(
  userAgent: string,
  user: LookerEmbedUser,
  session_reference_token: string
) {
  await acquireLookerSession()
    try {
    const request = {
      ...user,
      session_reference_token: session_reference_token,
    }
    const sdk = new Looker40SDK(lookerSession)
    const response = await sdk.ok(
      sdk.acquire_embed_cookieless_session(request, {
        headers: {
          'User-Agent': userAgent,
        },
      })
    )
    return response
  } catch (error) {
    console.error('embed session acquire failed', { error })
    throw error
  }
}

Mulai Looker 23.8, domain sematan dapat disertakan saat sesi tanpa cookie diperoleh. Ini adalah alternatif untuk menambahkan domain sematan menggunakan panel Admin > Embed Looker. Looker menyimpan domain sematan di database internal Looker, sehingga tidak akan ditampilkan di panel Admin > Embed. Sebagai gantinya, domain sematan dikaitkan dengan sesi tanpa cookie dan hanya ada selama durasi sesi. Tinjau praktik terbaik keamanan jika Anda memutuskan untuk memanfaatkan fitur ini.

Membuat token

Contoh di TypeScript ini menggunakan sesi untuk menyimpan atau memulihkan token referensi sesi. Endpoint tidak harus diimplementasikan di TypeScript.

Penting bagi Anda untuk mengetahui cara menangani respons 400, yang terjadi saat token tidak valid. Meskipun respons 400 tidak seharusnya ditampilkan, jika hal ini terjadi, praktik terbaiknya adalah menghentikan sesi penyematan Looker. Anda dapat menghentikan sesi penyematan Looker dengan menghapus iframe sematan atau dengan menetapkan nilai session_reference_token_ttl ke nol dalam pesan session:tokens. Jika Anda menetapkan nilai session_reference_token_ttl ke nol, iframe Looker akan menampilkan dialog sesi berakhir.

Respons 400 tidak ditampilkan saat sesi penyematan berakhir. Jika sesi penyematan telah berakhir, respons 200 akan ditampilkan dengan nilai session_reference_token_ttl yang ditetapkan ke nol.

  app.put(
    '/generate-embed-tokens',
    async function (req: Request, res: Response) {
      try {
        const session_reference_token = req.session!.session_reference_token
        const { api_token, navigation_token } = req.body as any
        const tokens = await generateEmbedTokens(
          req.headers['user-agent']!,
          session_reference_token,
          api_token,
          navigation_token
        )
        res.json(tokens)
      } catch (err: any) {
        res.status(400).send({ message: err.message })
      }
    }
  )
}
async function generateEmbedTokens(
  userAgent: string,
  session_reference_token: string,
  api_token: string,
  navigation_token: string
) {
  if (!session_reference_token) {
    console.error('embed session generate tokens failed')
    // missing session reference  treat as expired session
    return {
      session_reference_token_ttl: 0,
    }
  }
  await acquireLookerSession()
  try {
    const sdk = new Looker40SDK(lookerSession)
    const response = await sdk.ok(
      sdk.generate_tokens_for_cookieless_session(
        {
          api_token,
          navigation_token,
          session_reference_token: session_reference_token || '',
        },
        {
          headers: {
            'User-Agent': userAgent,
          },
        }
      )
    )
    return {
      api_token: response.api_token,
      api_token_ttl: response.api_token_ttl,
      navigation_token: response.navigation_token,
      navigation_token_ttl: response.navigation_token_ttl,
      session_reference_token_ttl: response.session_reference_token_ttl,
    }
  } catch (error: any) {
    if (error.message?.includes('Invalid input tokens provided')) {
      // The Looker UI does not know how to handle bad
      // tokens. This shouldn't happen but if it does expire the
      // session. If the token is bad there is not much that that
      // the Looker UI can do.
      return {
        session_reference_token_ttl: 0,
      }
    }
    console.error('embed session generate tokens failed', { error })
    throw error
  }

Pertimbangan penerapan

Aplikasi penyematan harus melacak token referensi sesi dan harus menjaganya tetap aman. Token ini harus dikaitkan dengan pengguna aplikasi tersemat. Token aplikasi penyematan dapat disimpan dengan salah satu cara berikut:

  • Dalam sesi pengguna aplikasi tersemat
  • Dalam cache sisi server yang tersedia di seluruh lingkungan yang dikelompokkan
  • Dalam tabel database yang terkait dengan pengguna

Jika sesi disimpan sebagai cookie, cookie tersebut harus dienkripsi. Contoh dalam repositori SDK sematan menggunakan cookie sesi untuk menyimpan token referensi sesi.

Saat sesi penyematan Looker berakhir, dialog akan ditampilkan di iframe yang disematkan. Pada tahap ini, pengguna tidak akan dapat melakukan apa pun di instance yang disematkan. Jika hal ini terjadi, peristiwa session:status akan dibuat, sehingga aplikasi penyematan dapat mendeteksi status aplikasi Looker tersemat saat ini dan mengambil tindakan tertentu.

Aplikasi penyematan dapat mendeteksi apakah sesi penyematan telah berakhir dengan memeriksa apakah nilai session_reference_token_ttl yang ditampilkan oleh endpoint generate_tokens adalah nol. Jika nilainya nol, berarti masa berlaku sesi penyematan telah berakhir. Pertimbangkan untuk menggunakan fungsi callback untuk membuat token saat penyematan tanpa cookie diinisialisasi. Fungsi callback kemudian dapat menentukan apakah sesi sematan telah berakhir dan akan menghancurkan iframe yang disematkan sebagai alternatif untuk menggunakan dialog default sesi sematan yang telah berakhir.

Praktik terbaik untuk menyematkan beberapa iframe dengan penyematan tanpa cookie

Saat Anda menyematkan beberapa iframe Looker di satu halaman dalam penyematan tanpa cookie, setiap iframe memerlukan authentication_token sekali pakai dari acquire_embed_cookieless_session, tetapi semua iframe di halaman tersebut harus menggunakan satu session_reference_token yang sama. Ikuti praktik terbaik berikut untuk menyematkan beberapa iframe dengan penyematan tanpa cookie:

  • Dapatkan sesi sekali dan gunakan kembali session_reference_token: Dapatkan sesi tanpa cookie sekali terlebih dahulu, simpan session_reference_token yang ditampilkan dalam cache di server backend Anda, dan teruskan session_reference_token tersebut ke panggilan acquire_embed_cookieless_session berikutnya untuk iframe tambahan. Looker kemudian akan melampirkan setiap iframe baru ke sesi yang ada dan melewati pembaruan pengguna sematan.

  • Hindari akuisisi sesi awal paralel: Jika beberapa iframe dipasang secara bersamaan dan backend Anda memanggil acquire_embed_cookieless_session secara paralel tanpa meneruskan session_reference_token yang ada, Looker akan memperlakukan setiap permintaan sebagai login baru, memperbarui pengguna sematan secara serentak, dan membuat sesi terpisah. Permintaan login serentak untuk pengguna sematan yang sama dapat menyebabkan pertentangan penguncian di server Looker. Selain itu, menimpa session_reference_token yang disimpan dengan respons terakhir akan merusak pembaruan token (generate_tokens_for_cookieless_session) pada iframe sebelumnya dengan error 400 Invalid input tokens provided.

  • Pramuat iframe dan gunakan navigasi dalam frame: Untuk membuat sesi pengguna sematan sebelum memuat konten, pramuat iframe menggunakan /embed/preload (atau metode .preload() di Embed SDK v2). Saat menggunakan Embed SDK v2, Anda juga dapat menavigasi dalam iframe yang ada menggunakan metode seperti connection.loadDashboard(DASHBOARD_ID) atau connection.loadUrl(EMBED_URL), bukan membuat iframe tambahan. Untuk mengetahui informasi selengkapnya, lihat Pengantar Embed SDK.

Menjalankan contoh penyematan tanpa cookie Looker

Repositori SDK sematan berisi server dan klien node express yang ditulis dalam TypeScript yang mengimplementasikan aplikasi sematan. Contoh yang ditampilkan sebelumnya diambil dari implementasi ini. Berikut ini mengasumsikan bahwa instance Looker Anda telah dikonfigurasi untuk menggunakan penyematan tanpa cookie seperti yang dijelaskan sebelumnya.

Anda dapat menjalankan server sebagai berikut:

  1. Buat clone repositori Embed SDK — git clone git@github.com:looker-open-source/embed-sdk.git
  2. Ubah direktori — cd embed-sdk
  3. Instal dependensi — npm install
  4. Konfigurasikan server, seperti yang ditunjukkan di bagian Mengonfigurasi server dalam dokumen ini.
  5. Menjalankan server — npm run server

Mengonfigurasi server

Buat file .env di root repositori yang di-clone (ini disertakan dalam .gitignore).

Formatnya adalah sebagai berikut:

LOOKER_WEB_URL=your-looker-instance-url.com
LOOKER_API_URL=https://your-looker-instance-url.com
LOOKER_DEMO_HOST=localhost
LOOKER_DEMO_PORT=8080
LOOKER_EMBED_SECRET=embed-secret-from-embed-admin-page
LOOKER_CLIENT_ID=client-id-from-user-admin-page
LOOKER_CLIENT_SECRET=client-secret-from-user-admin-page
LOOKER_DASHBOARD_ID=id-of-dashboard
LOOKER_LOOK_ID=id-of-look
LOOKER_EXPLORE_ID=id-of-explore
LOOKER_EXTENSION_ID=id-of-extension
LOOKER_VERIFY_SSL=true
LOOKER_REPORT_ID=id-of-report
LOOKER_QUERY_VISUALIZATION_ID=id-of-query-visualization

Saat menggunakan penyematan tanpa cookie Looker, pengguna yang mencoba membuka link di tab browser atau jendela baru (seperti perincian dasbor, Eksplorasi, atau download dokumen) mungkin mengalami error HTTP 401 Unauthorized atau dialihkan ke halaman login Looker. Masalah ini paling sering terjadi saat cookie pihak ketiga dinonaktifkan di browser.

Penyebab

Untuk mencegah kerentanan pembajakan sesi, patch keamanan diperkenalkan ke Looker (versi 25.18.61+, 25.20.44+, dan 26.0.22+) yang sengaja berhenti menampilkan cookie sesi dalam respons penyematan awal tanpa cookie. Karena browser tidak lagi menerima cookie sesi ini, membuka URL Looker di tab atau jendela baru akan kehilangan konteks autentikasi, sehingga menyebabkan permintaan gagal.

Penyelesaian dan solusi

  • Upgrade Looker: Upgrade instance Looker ke versi 26.0.36 atau yang lebih baru. Rilis ini memperkenalkan perbaikan yang menambahkan token sekali pakai dengan aman ke URL yang dibuka di jendela baru selama sesi penyematan tanpa cookie, sehingga memulihkan kemampuan pengguna untuk membuka link aman di tab baru.
  • Buka link di iframe yang sama: Jika upgrade tidak dapat segera dilakukan, konfigurasikan semua link dalam dasbor tersemat untuk dibuka dalam iframe yang sama dengan menetapkan target link ke _self (misalnya, target="_self").
  • Merutekan melalui aplikasi host: Jika membuka di tab atau jendela baru benar-benar diperlukan, targetkan link ke halaman baru dalam aplikasi host Anda yang menginisialisasi iframe sematan baru tanpa cookie, bukan menautkan langsung ke instance Looker.
  • Gunakan penyematan bertanda tangan dengan domain kustom: Sebagai alternatif, pertimbangkan untuk menggunakan penyematan bertanda tangan standar dengan domain kustom.