Bagikan melalui

Menanam situs Power Pages di situs web lain dengan menggunakan iframe

Salah satu cara paling umum menggunakan aplikasi berbasis web adalah dengan menanamkan fungsi aplikasi web di dalam situs web lain. Biasanya situs web lain sudah ada, tetapi Anda ingin meningkatkan kemampuannya dan menambahkan fungsi baru yang berfungsi dengan data Anda yang muncul melalui aplikasi Power Pages.

Dalam skenario ini, lebih mudah untuk menanamkan fungsi situs Power Pages daripada membuatnya dari awal. Artikel ini menjelaskan langkah-langkah menanamkan aplikasi Power Pages di situs web yang berbeda dengan menggunakan iframe.

Langkah 1. Aktifkan situs untuk iframe

Iframe dinonaktifkan di situs Power Pages baru secara default, untuk memastikan tidak ada yang dapat menanamkan situs web Anda secara eksternal untuk mencoba melakukan serangan clickjacking.

  1. Mengatur Header respons HTTP. Anda dapat memilih petunjuk Content-Security-Policy (CSP) frame-ancestors (disarankan) atau X-Frame-Options.

    Catatan

    Pendahulu kerangka Content-Security-Policy telah menggantikan X-Frame-Options, dan merupakan metode yang dijelaskan dalam artikel ini.

    1. Atur pengaturan situs untuk mengaktifkan header HTTP HTTP/Content-Security-Policy. Informasi selengkapnya: Mengonfigurasi header HTTP di portal

    2. Ikuti sintaks yang dijelaskan dalam CSP: frame-ancestors untuk menetapkan nilai.

      Contohnya, untuk mengaktifkan situs Power Pages yang dapat disematkan menggunakan iframe di situs web www.contoso.com, pengaturan akan terlihat seperti berikut:

      Content-Security-Policy: frame-ancestors 'self' <https://www.contoso.com>;

      Catatan

      String 'self' penting; tanpanya, situs Power Pages tidak akan dapat menanamkan halamannya sendiri, yang biasanya diperlukan dalam skenario seperti menu pop-up modal untuk formulir dasar.

      Penting untuk membatasi kemampuan untuk menanam situs Power Pages di iframe ke situs tertentu, dan bukan menggunakan karakter wildcard (*).

      CSP terdiri dari banyak petunjuk yang nilainya tergantung pada berbagai faktor (seperti tempat skrip dimuat). Artikel ini tidak mencakup informasi tersebut karena khusus penerapan. Namun, sebaiknya anda menguji terlebih dulu konfigurasi ini di situs non-produksi, melihat kesalahan konsol browser untuk mengidentifikasi masalah yang perlu diperbaiki, dan menyesuaikan pengaturan.

  2. Atur SameSite default ke Tidak Ada untuk cookie situs Power Pages.

    Atribut SameSite untuk cookie berguna untuk melindungi situs terhadap serangan pemalsuan permintaan antar-situs (CSRF). Namun, ini juga berarti bahwa situs tidak dapat disematkan dalam iframe dalam skenario seperti saat situs memerlukan otentikasi pengguna atau berisi komponen dinamis seperti formulir atau daftar.

    Oleh karena itu, untuk menanam situs Power Pages di iframe, Anda harus mengubah atribut cookie SameSite untuk situs Power Pages Anda ke Tidak Ada secara default. Informasi lebih lanjut: Perubahan mode SameSite

    Catatan

    Menandai Cookie SameSite sebagai Tidak Ada tidak akan membuat situs Power Pages Anda rentan terhadap serangan CSRF, karena Power Pages menggunakan token anti-CSRF untuk mencegah serangan ini.

Langkah 2. Sematkan situs Power Pages

Setelah menyelesaikan langkah sebelumnya, yang harus Anda lakukan untuk menanamkan pengalaman situs Power Pages ke dalam situs web adalah menggunakan tag iframe HTML untuk menanam seluruh situs atau halaman tertentu bila diperlukan.

Sebaiknya nama domain Power Pages menjadi saudara atau anak dari nama domain situs tempat Anda menanam situs dalam iframe. Contohnya, jika situs web root Anda adalah www.contoso.com, nama domain situs Power Pages harus portal.contoso.com. Hal ini penting untuk memastikan bahwa cookie yang digunakan oleh situs Power Pages tidak akan diklasifikasi sebagai cookie pihak ketiga dan diblokir oleh browser (blog). Atau, fungsi seperti Captcha dan pengalihan formulir dasar/multilangkah mungkin tidak berfungsi dengan benar. Untuk mengkonfigurasi nama domain kustom di situs Power Pages, buka Tambah nama domain kustom.

Langkah 3. Tangani header dan footer

Anda dapat memodifikasi cara header dan footer muncul—atau apakah muncul sama sekali—pada halaman situs Power Pages yang telah disematkan.

Menjaga agar header dan footer situs tertanam tidak ditampilkan

Situs induk tempat Anda menanam situs Power Pages biasanya sudah memiliki header dan footer. Dalam situasi tersebut, Anda mungkin tidak perlu menampilkan header dan footer situs yang disematkan. Pertimbangkan skenario berikut:

  • Ketika seluruh Power Pages situs disematkan dalam iframe
    Hilangkan konten header dan footer Anda dengan memperbarui template web header dan footer masing-masing.

  • Saat halaman situs tertentu Power Pages disematkan dalam iframe
    Biasanya, Anda tidak perlu menampilkan header atau footer situs saat menanam halaman tertentu di situs web. Namun, Anda tetap memerlukan header dan footer tersedia saat pengguna masuk ke situs secara langsung. Anda dapat mencapainya dengan memodifikasi header dan footer untuk ditampilkan secara dinamis berdasarkan konten halaman.

Menambahkan kode kondisional di header dan footer

Template web header dan footer mendukung penyesuaian liquid penuh, sehingga Anda dapat menambahkan kode kondisional untuk menampilkan properti tertentu.

Contohnya, kode berikut menampilkan bilah pencarian di header jika halaman tersebut bukan halaman pencarian.

Penting

Karena header adalah elemen yang umum untuk semua halaman, page.id akan di-cache secara default untuk halaman pertama yang dibuka oleh pengguna. Oleh karena itu, kode ini menggunakan tag substitusi untuk memastikan bahwa elemen tersebut tidak akan disimpan dalam cache dan akan selalu dievaluasi berdasarkan halaman saat ini.

{% substitution %}
{% assign current_page = page.id %}
{% assign sr_page = sitemarkers[Search].id %}
{% if current_page == sr_page %}
{% assign section_class = section-landing-search %}
<section class=page_section section-landing-{{ current_page }} {{ section_class | h }} color-inverse\>
    <div class=container\>
        <div class=row \>
            <div class=col-md-12 text-center\>
                {% if current_page == sr_page %}
                    <h1 class=section-landing-heading\>{% editable snippets 'Search/Title' default:resx["Discover_Contoso"] %}\</h1\>
                {% include 'Search' %}
                {% endif %}
            </div\>
        </div\>
    </div\>
</section\>
{% endif %}
{% endsubstitution %}

Sebagai alternatif untuk menambahkan kode kondisional di header dan footer, Anda juga dapat mempertimbangkan metode berikut. Namun, kami tidak menyarankan pendekatan tersebut; mereka sama-sama memiliki keterbatasan, dan tidak mendukung fungsionalitas penuh.

  • Untuk skenario hanya baca yang tidak mencakup daftar atau formulir, nonaktifkan header dan footer dari template Anda.
  • Gunakan template penulisan ulang khusus (~/Areas/Portal/Pages/Form.aspx).

Lihat juga