Ugrađivanje portala u drugu web-stranicu rabeći iFrame

  • Članak
  • 4 min za pročitati

Jedan od najčešćih načina korištenja aplikacija portala jest ugrađivanje funkcionalnosti portala u drugu web-stranicu. Obično druga web-stranica već postoji, ali želite poboljšati njezine sposobnosti i dodati nove funkcije koje rade s vašim podacima koji se pojavljuju kroz aplikaciju portala.

U tom je scenariju lakše ugraditi funkcionalnost portala nego izgrađivati od nule. U ovom su članku objašnjeni koraci za ugradnju aplikacije portala u drugu web-stranicu rabeći iFrame.

1. korak Omogućavanje portala za iFrame

Okviri iFrame onemogućeni su prema zadanim postavkama kako bi se osiguralo da nitko ne može ugraditi aplikaciju u vaš portal izvana napadi „otimanja klikova”.

  1. Postavite zaglavlje odgovora HTTP. Možete odabrati direktivu Pravila za sigurnost sadržaja (CSP) prije okvira (što je preporučljivo) ili Opcije X-Frame.

    Napomena

    Pravila za sigurnost sadržaja prije okvira zamijenila su opcije X-Frame i postupak su koji opisujemo u ovom članku.

    1. Namjestite postavku web-stranice tako da je omogućeno zaglavlje HTTP HTTP/pravila za sigurnost sadržaja. Više informacija: Postavljanje zaglavlja HTTP na portalima

    2. Slijedite sintaksu opisanu pod CSP: prije okvira kako biste postavili vrijednost.

      Primjerice, za omogućavanje portala ugrađenog putem okvira iFrame u web-stranicu www.contoso.com postavka će izgledati ovako:

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

      Napomena

      Niz 'self' je važan; bez njega portal neće moći ugraditi vlastite stranice, što je obično potrebno u scenarijima poput modalnih skočnih izbornika za osnovne obrasce.

      Važno je ograničiti mogućnost ugradnje portala u iFrame na određenim web-stranicama, umjesto upotrebe zamjenskog znaka (*).

      CSP se sastoji od brojnih direktiva čije vrijednosti ovise o različitim faktorima (primjerice od mjesta učitavanja skripti). Članak ne pokriva te podatke jer su specifične za implementaciju. Međutim, preporučujemo da prvo isprobate ovu postavku na portalu za neproizvodnju, pogledajte pogreške konzole preglednika kako biste identificirali probleme koje morate riješiti i prilagodite postavku.

  2. Postavite zadanu postavku za SameSite na Ništa za kolačiće portala.

    Atribut SameSite za kolačiće koristan je za osiguranje web-stranice od napada krivotvorenim zahtjevima s drugih web-stranica (CSRF). Međutim, to također znači da se stranica ne može ugraditi u iFrame u scenarijima kada, primjerice, stranica zahtijeva autentifikaciju korisnika ili sadrži dinamičke komponente poput obrazaca ili popisa.

    Stoga, da biste portal ugradili u iFrame, morate promijeniti atribut kolačića SameSite prema zadanim postavkama za svoj portal u Ništa. Više informacija: Promjene načina rada za SameSite

    Napomena

    Označavanje kolačića SameSite kao Ništa ne čini vaš portal osjetljivim na CSRF napade jer platforma portala koristi anti-CSRF tokene za sprječavanje tih napada.

2. korak Ugradite u svoj portal

Nakon što dovršite prethodni korak, sve što trebate učiniti da biste ugradili iskustvo portala u svoju web-stranicu jest upotrijebiti HTML iFrame oznaku za ugradnju cijele web-stranice ili određenih stranica, prema potrebi.

Preporučujemo da naziv domene portala bude brat ili sestra ili podređeni naziv domene web-stranice u koju portal ugrađujete rabeći iFrame. Na primjer, ako je vaša korijenska web-stranica www.contoso.com, naziv domene portala trebao bi biti portal.contoso.com. To je važno kako bi se osiguralo da kolačići koje portal upotrebljava ne budu klasificirani kao kolačići treće strane i blokirani od strane preglednika (blog). U protivnom funkcije kao što su Captcha i osnovno/napredno preusmjeravanje obrasca možda neće raditi ispravno. Da biste postavili prilagođeni naziv domene na svom portalu, idite na Dodaj prilagođeni naziv domene.

3. korak Rukovanje zaglavljima i podnožjima

Možete promijeniti kako će se zaglavlja i podnožja prikazivati—te hoće li se uopće prikazivati—na ugrađenim stranicama portala.

Sprečavanje prikazivanja zaglavlja i podnožja ugrađenog portala

Uobičajeno je da nadređene stranice u koje želite ugraditi portal već imaju zaglavlja i podnožja. U takvim situacijama možda nećete htjeti da se prikazuje zaglavlje i podnožje ugrađenog portala. Razmislite o sljedećim scenarijima:

  • Kad je cijeli portal ugrađen u iFrame
    Uklonite sadržaj zaglavlja i podnožja ažuriranjem odgovarajućih predložaka zaglavlja i podnožja web-stranice.

  • Kad je određena stranica portala ugrađena u iFrame
    Obično ne želite da se zaglavlje ili podnožje portala prikazuje kada ugrađujete određenu stranicu u web-stranicu. Međutim, i dalje želite da zaglavlje i podnožje budu dostupni kada korisnik ode izravno na portal. To možete postići mijenjanjem zaglavlja i podnožja da se dinamički generiraju ovisno o sadržaju stranice.

Dodavanje uvjetnog koda u zaglavlje i podnožje

Web-predlošci zaglavlja i podnožja podržavaju potpune Liquid prilagodbe, pa možete dodati uvjetni kod za generiranje određenih svojstava.

Primjerice, sljedeći kod prikazuje se kao traka za pretraživanje u zaglavlju ako se radi o stranici koja nije stranica za pretraživanje.

Važno

Budući da je zaglavlje zajednički element za sve stranice, page.id prema zadanim će postavkama biti predmemoriran za prvu stranicu koju otvori korisnik. Dakle, taj kod koristi zamjensku oznaku kako bi se osiguralo da ti elementi neće biti predmemorirani i da će se uvijek procjenjivati na temelju trenutne stranice.

{% 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 %}

Umjesto dodavanja uvjetnog koda u zaglavlje i podnožje, možete razmisliti i o dolje navedenim metodama. Međutim, ne preporučujemo niti jedan pristup; oba imaju ograničenja, a niti jedan ne podržava potpunu funkcionalnost.

  • Za scenarije samo za čitanje koji ne sadrže popise ili obrasce, onemogućite zaglavlje i podnožje u predlošku.
  • Upotrijebite poseban predložak za ponovno pisanje (~/Areas/Portal/Pages/Form.aspx).

Pogledajte također

Konfiguracija postavki web-mjesta za portale
Zamjenska oznaka predloška
Omogućavanje izlaznog predmemoriranja zaglavlja i podnožja na portalu
Način rada SameSite
Postavljanje zaglavlja HTTP na portalima