Osadzić stronę Power Pages w innej witrynie za pomocą ramki iframe

Jednym z najczęstszych sposobów wykorzystania aplikacji opartych na sieci Web jest osadzenie funkcjonalności aplikacji internetowych wewnątrz innej witryny. Zazwyczaj druga strona już istnieje, ale chcesz zwiększyć jej możliwości i dodać nowe funkcje, które współpracują z danymi udostępnionymi przez aplikację Power Pages.

W tym scenariuszu, łatwiej jest osadzić funkcjonalność strony Power Pages niż budować ją od podstaw. Ten artykuł wyjaśnia, jak osadzić aplikację Power Pages na innej stronie internetowej za pomocą ramki iframe.

Krok 1. Włączanie witryny dla ramki iframe

Ramki iframe są domyślnie wyłączone w nowych witrynach Power Pages, aby zapewnić, że nikt nie może osadzić aplikacji portalu na zewnątrz, aby próbować ataków typu clickjack.

1. Ustawienie nagłówka odpowiedzi HTTP. Możesz wybrać dyrektywę Content-Security-Policy (CSP) frame-ancestors (rekomendowane) lub X-Frame-Options.

   Uwaga

   Content-Security-Policy frame-ancestors zastąpiło X-Frame-Options, i jest metodą opisaną w tym artykule.

   1. Ustaw ustawienie witryny tak, aby włączyć nagłówek HTTP/Content-Security-Policy. Więcej informacji: Ustawianie nagłówków HTTP w portalach

   2. Postępuj zgodnie ze składnią opisaną w CSP: frame-ancestors aby ustawić wartość.

      Na przykład, aby włączyć witrynę Power Pages, który może być osadzony przy użyciu ramki iframe w witrynie www.contoso.com, ustawienie będzie wyglądać następująco:

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

      Uwaga

      Ciąg 'self' jest ważny; bez niego portal nie będzie w stanie osadzać własnych stron Power Pages, co jest powszechnie wymagane w scenariuszach takich jak modalne wyskakujące menu dla podstawowych formularzy.

      Ważne jest, aby ograniczyć możliwość osadzenia witryny Power Pages w ramce iframe do określonych witryn, a nie używać symbolu wieloznacznego (*).

      CSP składa się z wielu dyrektyw, których wartości zależą od różnych czynników (np. skąd ładowane są skrypty). Ten artykuł nie obejmuje tych informacji, ponieważ są one specyficzne dla danej implementacji. Zalecamy jednak, aby najpierw przetestować tę konfigurację na nieprodukcyjnej witrynie, przyjrzeć się błędom konsoli przeglądarki w celu zidentyfikowania problemów, które należy naprawić, a następnie dostosować ustawienia.

2. Ustaw domyślną wartość SameSite na Brak dla lików cookie witryny Power Pages.

   Atrybut SameSite dla plików cookie jest przydatny do zabezpieczania witryny przed fałszowania żądań międzywitrynowego (CSRF). Oznacza to jednak również, że witryna nie może być osadzona w ramce iframe w scenariuszach, w których witryna wymaga uwierzytelnienia użytkownika lub zawiera dynamiczne komponenty, takie jak formularze lub listy.

   Aby osadzić witrynę Power Pages w trybie iframe, należy domyślnie zmienić atrybut cookie SameSite dla witryny Power Pages na Brak. Więcej informacji: Zmiany trybu pracy w tym samym miejscu

   Uwaga

   Oznaczenie ciasteczek SameSite jako Brak nie czyni witryny Power Pages podatnej na ataki CSRF, ponieważ witryna Power Pages używa tokenów anty-CSRF do zapobiegania takim atakom.

Krok 2. Osadzanie witryny Power Pages

Po wykonaniu poprzedniego kroku, aby osadzić portal w swojej witrynie Power Pages, wystarczy użyć znacznika HTML iframe do osadzenia całej witryny lub poszczególnych stron, zależnie od potrzeb.

Zalecamy, aby nazwa domeny Power Pages była wariacją lub podrzędna względem nazwy domeny strony, na której osadzasz portal w ramce iframe. Jeśli na przykład główna witryna sieci Web to www.contoso.com, nazwa domeny witryny Power Pages powinna brzmieć na przykład portal.contoso.com. Jest to ważne, aby ciasteczka używane przez witrynę Power Pages nie zostały zakwalifikowane jako pliki cookies stron trzecich i zablokowane przez przeglądarkę (blog). W przeciwnym razie funkcje takie jak Captcha i podstawowe/obejmujące wiele kroków przekierowania formularzy mogą nie działać poprawnie. Aby skonfigurować niestandardową nazwę domeny w witrynie Power Pages, przejdź do Dodaj niestandardową nazwę domeny.

Krok 3. Obsługa nagłówków i stopek

Można określić, w jaki sposób mają być wyświetlane nagłówki i stopki — albo czy są wyświetlane na wszystkich — na wbudowanych stronach witryny Power Pages.

Nie wyświetlaj nagłówków i stopek osadzonej witryny

Często zdarza się, że strona nadrzędna, na której chcesz osadzić witrynę Power Pages, ma już nagłówki i stopki. W takich sytuacjach możesz nie chcieć pokazywać nagłówka i stopki osadzonej witryny. Rozważ poniższe scenariusze:

• Gdy cały witryna Power Pages jest osadzona w ramce iframe
  Usuń zawartość nagłówka i stopki poprzez aktualizację odpowiednich szablonów stron internetowych nagłówka i stopki.

• Gdy określona strona witryny Power Pages jest osadzona w ramce iframe
  Zazwyczaj nie chcesz pokazywać nagłówka ani stopki witryny, gdy osadzasz konkretną stronę w witrynie. Jednak nadal chcesz, aby nagłówek i stopka były dostępne, gdy użytkownik przejdzie bezpośrednio do witryny. Możesz to osiągnąć modyfikując nagłówki i stopki tak, aby były renderowane dynamicznie w oparciu o zawartość strony.

Dodaj kod warunkowy w nagłówkach i stopkach

Szablony nagłówka i stopki wspierają pełne dostosowanie płynności, więc możesz dodać kod warunkowy, aby renderować określone właściwości.

Na przykład, poniższy kod wyświetla pasek wyszukiwania w nagłówku, jeśli strona jest inna niż strona wyszukiwania.

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

Jako alternatywę dla dodawania kodu warunkowego w nagłówkach i stopkach, można również rozważyć następujące metody. Nie zalecamy jednak żadnego z tych podejść; oba mają ograniczenia i żadne z nich nie obsługuje pełnej funkcjonalności.

• W przypadku scenariuszy tylko do odczytu, które nie zawierają żadnych list ani formularzy, wyłącz nagłówek i stopkę w swoim szablonie.
• Użyj specjalnego szablonu przepisywania (~/Areas/Portal/Pages/Form.aspx).

Zobacz także

• Konfiguruj ustawienia witryny dla portali
• Znacznik szablonu zastępczego
• Włączanie buforowania danych wyjściowych nagłówka i stopki w portalu
• Tryb SameSite
• Ustawianie nagłówków HTTP w portalach