Incorporado um site do Power Pages em outro site usando um iframe

Uma das maneiras mais comuns de usar aplicativos Web é incorporar a funcionalidade do aplicativo Web em outro site. Normalmente, o outro site já existe, mas você deseja aprimorar suas habilidades e adicionar novas funções que funcionem com seus dados surgidos por meio do aplicativo do Power Pages.

Nesse cenário, é mais fácil incorporar a funcionalidade do site do Power Pages em vez de criá-la do zero. Este artigo explica as etapas para incorporar um aplicativo do Power Pages em um site diferente usando um iframe.

Etapa 1. Habilitar o site para iframe

Iframes são desabilitados em novos sites do Power Pages por padrão, para garantir que ninguém possa incorporar seu site externamente para tentar ataques de "clickjacking".

1. Configurar o cabeçalho de resposta de HTTP. Você pode escolher os Antecedentes do quadro do Content-Security-Policy (CSP) diretivos (recomendados) ou Opções de X-Frame.

   Observação

   Os ancestrais de quadro da Política de Segurança de Conteúdo substituíram as Opções de Quadro X e é o método descrito neste artigo.

   1. Defina a configuração do site para habilitar o cabeçalho HTTP HTTP/Política de Segurança de Conteúdo. Mais informações: Configurar cabeçalhos HTTP nos portais

   2. Siga a sintaxe descrita em CSP: antecedentes do quadro para definir o valor.

      Por exemplo, para habilitar um site do Power Pages que pode ser incorporado usando um iframe no site www.contoso.com, a configuração será semelhante a esta:

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

      Observação

      A string 'self' é importante; sem ela, o site do Power Pages não será capaz de incorporar suas próprias páginas, o que é comumente necessário em cenários como menus pop-up modais para formulários básicos.

      É importante limitar a capacidade de incorporar um site do Power Pages em um iframe para sites específicos, em vez de usar o caractere curinga (*).

      O CSP consiste em várias diretivas cujos valores dependem de vários fatores (como de onde os scripts são carregados). Este artigo não cobre essas informações porque são específicas da implementação. No entanto, recomendamos que você primeiro teste essa configuração em um site de não produção, examine os erros do console do navegador para identificar os problemas que você precisa corrigir e ajuste a configuração.

2. Defina o padrão SameSite como Nenhum para cookies do site do Power Pages.

   O atributo SameSite para cookies é útil para proteger o site contra ataques de solicitação intersite forjada (CSRF). No entanto, isso também significa que o site não pode ser incorporado a um iframe em cenários como quando o site requer autenticação do usuário ou contém componentes dinâmicos como formulários ou listas.

   Portanto, para incorporar o site do Power Pages em um iframe, você deve alterar o atributo de cookie SameSite do seu site do Power Pages para Nenhum por padrão. Mais Informações: Mudanças no modo SameSite

   Observação

   Marcar cookies SameSite como Nenhum não torna seu site do Power Pages vulnerável a ataques de CSRF, porque o Power Pages usa tokens anti-CSRF para prevenir esses ataques.

Etapa 2. Inserir seu site do Power Pages

Depois de concluir a etapa anterior, tudo o que você precisa fazer para incorporar a experiência do site do Power Pages em seu site é usar a Tag HTML iframe para incorporar todo o site ou páginas específicas, conforme necessário.

Recomendamos que o nome de domínio do Power Pages seja irmão ou filho do nome de domínio do site onde você está incorporando o site em um iframe. Por exemplo, se o seu site raiz for www.contoso.com, o nome de domínio do site do Power Pages deve ser portal.contoso.com. Isso é importante para garantir que os cookies usados pelo site do Power Pages não sejam classificados como cookies de terceiros e ser bloqueado pelo navegador (blog). Caso contrário, funcionalidades como Captcha e redirecionamento de formulário básico/de várias etapas podem não funcionar corretamente. Para configurar um nome de domínio personalizado em seu site do Power Pages, vá para Adicionar um nome de domínio personalizado.

Etapa 3. Cabeçalhos e rodapés do identificador

Você pode modificar a forma como os cabeçalhos e rodapés aparecem ou se eles aparecem nas páginas do site do Power Pages incorporado.

Impedir que os cabeçalhos e rodapés incorporados do site sejam exibidos

É comum que o site pai ao qual você deseja incorporar um site do Power Pages já tenha cabeçalhos e rodapés. Nessas situações, você pode não querer mostrar o cabeçalho e o rodapé do site integrado. Considere os cenários a seguir:

• Quando um site do Power Pages inteiro está incorporado em um iframe
  Remova o conteúdo de seu cabeçalho e rodapé atualizando os respectivos modelos da Web de cabeçalho e rodapé.

• Quando uma página específica do site do Power Pages está incorporada em um iframe
  Normalmente, você não deseja mostrar o cabeçalho ou rodapé do site ao incorporar uma página específica em um site. No entanto, você ainda deseja que o cabeçalho e o rodapé estejam disponíveis quando o usuário acessar o site diretamente. Você pode conseguir isso modificando cabeçalhos e rodapés para renderizar dinamicamente com base no conteúdo da página.

Adicionar código condicional no cabeçalho e rodapés

Os modelos da Web de cabeçalho e rodapé oferecem suporte a personalizações líquidas completas, portanto, você pode adicionar código condicional para renderizar certas propriedades.

Por exemplo, o código a seguir exibe uma barra de pesquisa no cabeçalho, se a página for diferente da página de pesquisa.

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

Como alternativa para adicionar código condicional no cabeçalho e rodapés, você também pode considerar os métodos a seguir. No entanto, não recomendamos nenhuma abordagem; ambos têm limitações e nenhum oferece suporte à funcionalidade total.

• Para cenários somente leitura que não incluem listas ou formulários, desative o cabeçalho e o rodapé do seu modelo.
• Use um modelo especial de reescrita (~/Areas/Portal/Pages/Form.aspx).

Consulte também

• Definir Configurações de site de portais
• Marca do modelo de substituição
• Habilitar o cache de saída de cabeçalho e rodapé em um portal
• Modo SameSite
• Configurar cabeçalhos HTTP nos portais