Внедрить сайт Power Pages на другой веб-сайт с помощью iFrame

Один из наиболее распространенных способов использования приложений на основе сайта — внедрение функций веб-приложений на другой веб-сайт. Обычно другой веб-сайт уже существует, но вы хотите расширить его возможности и добавить новые функции, которые работают с вашими данными, отображаемыми через приложение Power Pages.

В этом сценарии проще внедрить функции сайта Power Pages, чем создавать его с нуля. В этой статье объясняется, как внедрить приложение Power Pages на другой веб-сайт с помощью iFrame.

Шаг 1. Включить сайт для iFrame

iFrame отключено на новых сайтах Power Pages по умолчанию, чтобы гарантировать, что никто не сможет встроить ваше приложение портала извне, чтобы попытаться подменить интерфейс "кликджекинг".

  1. Настройте заголовок ответа HTTP. Вы можете выбрать директиву Content-Security-Policy (CSP) frame-ancestors (рекомендуется) или X-Frame-Options.

    Заметка

    Content-Security-Policy frame-ancestors заменило X-Frame-Options и является методом, описанным в этой статье.

    1. Установите настройку сайта, чтобы включить HTTP-заголовок HTTP/Content-Security-Policy. Больше информации: Настроить HTTP-заголовки на порталах

    2. Следуйте синтаксису, описанному в CSP: frame-ancestors, чтобы задать значение.

      Например, чтобы включить сайт Power Pages, который можно встроить с помощью iFrame на веб-сайте www.contoso.com, настройка будет выглядеть следующим образом:

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

      Заметка

      Строка 'self' важна; без нее сайт Power Pages не сможет внедрять свои собственные страницы, что обычно требуется в таких сценариях, как модальные всплывающие меню для основных форм.

      Важно ограничить возможность встраивания сайта Power Pages в iFrame определенными сайтами, а не использовать подстановочный знак (*).

      CSP состоит из множества директив, значения которых зависят от различных факторов (например, откуда загружаются скрипты). Эта статья не охватывает эту информацию, потому что она зависит от реализации. Однако мы рекомендуем сначала протестировать эту настройку на непроизводственном сайте, просмотреть ошибки консоли браузера, чтобы определить проблемы, которые необходимо исправить, и изменить настройку.

  2. Установите значение SameSite по умолчанию как Нет для файлов cookie сайта Power Pages.

    Атрибут SameSite для файлов cookie полезен для защиты сайта от атак с подделкой межсайтовых запросов (CSRF). Однако это также означает, что сайт не может быть встроен в iFrame в сценариях, например, когда сайт требует аутентификацию пользователя или содержит динамические компоненты, такие как формы или списки.

    Следовательно, чтобы внедрить сайт Power Pages в iFrame, вы должны изменить атрибут файлов cookie SameSite для своего сайта Power Pages на Нет по умолчанию. Больше информации: Изменения режима SameSite

    Заметка

    Пометка файлов cookie SameSite как Нет не делает ваш сайт Power Pages уязвимым для атак CSRF, потому что Power Pages использует токены защиты от CSRF для предотвращения этих атак.

Шаг 2. Внедрение сайта Power Pages

После того, как вы выполните предыдущий шаг, все, что вам нужно сделать, чтобы встроить сайт Power Pages в свой веб-сайт, — это использовать Тег HTML iFrame при необходимости встроить весь сайт или отдельные страницы.

Мы рекомендуем, чтобы доменное имя сайта Power Pages было родственным или дочерним по отношению к доменному имени сайта, на котором вы встраиваете портал в iFrame. Например, если ваш корневой веб-сайт — www.contoso.com, доменное имя сайта Power Pages должно быть portal.contoso.com. Это важно для того, чтобы файлы cookie, используемые сайтом Power Pages, не были классифицированы как сторонние файлы cookie и заблокированы браузером (блогом). В противном случае такие функции, как Captcha и перенаправление основной/многошаговой формы, могут работать неправильно. Чтобы настроить пользовательское доменное имя на сайте Power Pages, перейдите по ссылке Добавить пользовательское доменное имя.

Шаг 3. Обработка верхних и нижних колонтитулов

Вы можете изменить способ отображения верхних и нижних колонтитулов — или их наличие вообще — на внедренных страницах сайта Power Pages.

Не позволяйте отображать встроенные верхние и нижние колонтитулы сайта

Обычно на родительском сайте, где вы хотите внедрить сайт Power Pages, уже есть верхние и нижние колонтитулы. В таких ситуациях вы можете не захотеть отображать верхний и нижний колонтитулы встроенного сайта. Рассмотрим следующие сценарии:

  • Когда весь сайт Power Pages встроен в iFrame
    Удалите содержимое верхнего и нижнего колонтитула, обновив соответствующие веб-шаблоны верхнего и нижнего колонтитула.

  • Когда конкретная страница сайта Power Pages встроена в iFrame
    Как правило, вы не хотите отображать верхний или нижний колонтитул сайта при внедрении определенной страницы на веб-сайт. Однако вы по-прежнему хотите, чтобы верхний и нижний колонтитулы были доступны, когда пользователь напрямую переходит на сайт. Вы можете добиться этого, изменив верхние и нижние колонтитулы для динамической визуализации в зависимости от содержимого страницы.

Добавить условный код в верхний и нижний колонтитулы

Веб-шаблоны верхнего и нижнего колонтитулов поддерживают полную гибкую настройку, поэтому вы можете добавить условный код для отображения определенных свойств.

Например, следующий код отображает строку поиска в заголовке, если страница не является страницей поиска.

Внимание

Поскольку заголовок является общим для всех страниц элементом, page.id по умолчанию будет кэшироваться для первой страницы, открытой пользователем. Следовательно, этот код использует тег замены, чтобы гарантировать, что эти элементы не будут кэшироваться и всегда будут оцениваться на основе текущей страницы.

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

В качестве альтернативы добавлению условного кода в верхний и нижний колонтитулы вы также можете рассмотреть следующие методы. Однако мы не рекомендуем ни один из подходов; у них обоих есть ограничения, и ни один из них не поддерживает полную функциональность.

  • Для сценариев только для чтения, которые не включают никаких списков или форм, отключите верхний и нижний колонтитулы в своем шаблоне.
  • Используйте специальный шаблон перезаписи (~/Areas/Portal/Pages/Form.aspx).

См. также

  • Last updated on