Incorporar um site do Power Pages noutro site utilizando um iFrame

Uma das formas mais comuns de utilizar aplicações baseadas na Web é incorporar a funcionalidade de aplicação Web dentro de outro site. Normalmente, o outro site já existe, mas pretende melhorar as suas capacidades e adicionar novas funções que funcionam com os seus dados surgidos através da aplicação Power Pages.

Neste cenário, é mais fácil incorporar a funcionalidade do site do Power Pages, em vez de a compilar do início. Este artigo explica os passos para incorporar uma aplicação Power Pages num site diferente utilizando um iFrame.

Passo 1. Ativar o site para iFrame

Os iFrames são desativados nos novos sites do Power Pages por predefinição, para garantir que ninguém pode incorporar o seu site externamente para tentar ataques de "clickjacking".

  1. Defina o cabeçalho HTTP da resposta. Pode escolher a diretiva (recomendada) Content-Security-Policy (CSP) frame-ancestors ou X-Frame-Options.

    Nota

    O Content-Security-Policy frame-ancestors substituiu as X-Frame-Options e é o método descrito neste artigo.

    1. Defina a configuração do site para ativar o cabeçalho HTTP HTTP/Content-Security-Policy. Mais informações: Configurar cabeçalhos HTTP nos portais

    2. Siga a sintaxe descrita em CSP: frame-ancestors para definir o valor.

      Por exemplo, para ativar um site do Power Pages que pode ser incorporado utilizando um iFrame no site www.contoso.com, a definição será semelhante ao que se segue:

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

      Nota

      A cadeia 'self' é importante; sem ela, o site do Power Pages não será capaz de incorporar as suas próprias páginas, o que é normalmente obrigató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 num iFrame a sites específicos, em vez de utilizar o caráter universal (*).

      CSP consiste em diversas diretivas cujos valores dependem de vários fatores (como de onde os scripts são carregados). Este artigo não cobre essa informação porque é específica da implementação. No entanto, recomendamos que teste esta configuração primeiro num site de não produção, veja os erros da consola do browser para identificar os problemas que precisa de corrigir e ajuste a definição.

  2. Predefina SameSite como Nenhum para os cookies do site do Power Pages.

    O atributo SameSite para cookies é útil para proteger o site contra ataques de falsificação de pedidos entre sites (CSRF). No entanto, isto também significa que o site não pode ser incorporado num iFrame em cenários como quando o site requer a autenticação do utilizador ou contém componentes dinâmicos como formulários ou listas.

    Portanto, para incorporar o site do Power Pages num iFrame, tem de alterar o atributo do cookie SameSite para o seu site do Power Pages como Nenhum por predefinição. Mais informações: Alterações no modo SameSite

    Nota

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

Passo 2. Incorporar o site do Power Pages

Depois de completar o passo anterior, tudo o que precisa de fazer para incorporar a experiência do site do Power Pages no seu site é utilizar a etiqueta de iFrame HTML para incorporar todo o site ou páginas específicas, conforme necessário.

Recomendamos que o nome de domínio do Power Pages seja igual ou um elemento subordinado do nome de domínio do site onde está a incorporar o site num 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. Isto é importante para garantir que os cookies utilizados pelo site do Power Pages não serão classificados como cookies de terceiros e bloqueados pelo browser (blogue). Caso contrário, funcionalidades como o Captcha e o redirecionar formulários básico/de vários passos podem não funcionar corretamente. Para configurar um nome de domínio personalizado no seu site do Power Pages, aceda a Adicionar um nome de domínio personalizado.

Passo 3. Processar cabeçalhos e rodapés

Pode modificar a forma como os cabeçalhos e os rodapés aparecemo, ou se aparecemem de todo, em páginas de site do Power Pages incorporadas.

Evitar que os cabeçalhos e rodapés do site incorporados apareçam

É comum que o site principal onde quer incorporar um site do Power Pages já tenha cabeçalhos e rodapés. Nestas situações, talvez não queira mostrar o cabeçalho e rodapé do site incorporado. Considere os seguintes cenários:

  • Quando um site do Power Pages inteiro é incorporado num iFrame
    Remova o conteúdo do seu cabeçalho e rodapé atualizando os respetivos modelos web de cabeçalho e rodapé.

  • Quando uma página de site do Power Pages específica é incorporada num iFrame
    Normalmente, não quer mostrar o cabeçalho ou rodapé do site quando incorpora uma página específica num site. No entanto, ainda pretende que o cabeçalho e o rodapé estejam disponíveis quando o utilizador aceder diretamente ao site. Pode conseguir isso modificando cabeçalhos e rodapés para compor dinamicamente com base no conteúdo da página.

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

Os modelos web de cabeçalho e rodapé suportam personalizações líquidas completas, para que possa adicionar código condicional para compor certas propriedades.

Por exemplo, o código seguinte apresenta uma barra de pesquisa no cabeçalho se a página não for a página de pesquisa.

Importante

Como o cabeçalho é um elemento comum a todas as páginas, page.id ficará em cache por predefinição para a primeira página que for aberta por um utilizador. Assim, este código utiliza a etiqueta de substituição para garantir que estes elementos não ficarão em cache e serão sempre avaliados com base na página atual.

{% 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 à adição de código condicional nos cabeçalhos e rodapés, também pode considerar os seguintes métodos. No entanto, não recomendamos nenhuma das abordagens; ambas têm limitações, e nenhuma suporta a funcionalidade completa.

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

Consulte também

  • Last updated on