Condividi tramite

Incorporare un sito Power Pages in un altro sito Web utilizzando un iframe

Uno dei modi più comuni di utilizzare le applicazioni basate su Web consiste nell'incorporare le funzionalità dell'applicazione Web in un altro sito Web. Di solito l'altro sito Web esiste già, ma desideri migliorarne le funzionalità e aggiungere nuove funzioni che funzionino con i dati visualizzati tramite l'applicazione Power Pages.

In questo scenario, è più facile incorporare le funzionalità del sito Power Pages piuttosto che crearle da zero. Questo articolo descrive i passaggi per incorporare un'applicazione Power Pages in un sito Web diverso utilizzando un iframe.

Passaggio 1: Abilitare il sito per iframe

Gli iframe sono disabilitati nei nuovi siti Power Pages per impostazione predefinita, per garantire che nessuno possa incorporare il sito Web esternamente per tentare attacchi "clickjacking".

  1. Imposta l'intestazione della risposta HTTP. Puoi scegliere tra la direttiva Content-Security-Policy (CSP) frame-ancestors (consigliata) o X-Frame-Options.

    Nota

    Content-Security-Policy frame-ancestors ha sostituito X-Frame-Options ed è il metodo descritto in questo articolo.

    1. Imposta l'impostazione del sito per abilitare l'intestazione HTTP HTTP/Content-Security-Policy. Ulteriori informazioni: Configurare le intestazioni HTTP nei portali

    2. Segui la sintassi descritta in CSP: frame-ancestors per impostare il valore.

      Ad esempio, per abilitare un sito Power Pages che può essere incorporato utilizzando un iframe nel sito Web www.contoso.com, l'impostazione sarà simile a quanto segue:

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

      Nota

      La stringa 'self' è importante; senza di essa, il sito Power Pages non sarà in grado di incorporare le proprie pagine, cosa comunemente richiesta in scenari come i menu a comparsa modali per moduli di base.

      È importante limitare la possibilità di incorporare un sito Power Pages in un iframe a siti specifici, anziché utilizzare il carattere jolly (*).

      CSP è costituito da numerose direttive i cui valori dipendono da vari fattori (come la posizione da cui vengono caricati gli script). Questo articolo non include queste informazioni poiché è specifico dell'implementazione. Tuttavia, ti consigliamo di testare prima questa configurazione in un sito non di produzione, esaminare gli errori della console del browser per identificare i problemi da risolvere e modificare l'impostazione.

  2. Imposta il valore predefinito SameSite su Nessuno per i cookie del sito Power Pages.

    L'attributo SameSite per i cookie è utile per proteggere il sito da attacchi richiesta intersito falsa (CSRF). Tuttavia, ciò significa anche che il sito non può essere incorporato in un iframe in scenari in cui il sito richiede l'autenticazione dell'utente o contiene componenti dinamici come moduli o elenchi.

    Pertanto, per incorporare il sito Power Pages in un iframe devi impostare l'attributo del cookie SameSite per il sito Power Pages su Nessuno per impostazione predefinita. Maggiori informazioni :Modifiche alla modalità SameSite

    Nota

    Contrassegnare i cookie di SameSite come Nessuno non rende il sito Power Pages vulnerabile agli attacchi CSRF, poiché Power Pages utilizza token anti-CSRF per prevenire questi attacchi.

Passaggio 2. Integra il tuo sito Power Pages

Dopo aver completato il passaggio precedente, tutto ciò che devi fare per incorporare l'esperienza del sito Power Pages nel tuo sito Web è utilizzare il tag iframe HTML per incorporare l'intero sito o pagine specifiche, come necessario.

È consigliabile che il nome di dominio di Power Pages sia un elemento di pari livello o figlio del nome di dominio del sito in cui stai incorporando il sito in un iframe. Ad esempio, se il sito Web principale è www.contoso.com, il nome di dominio del sito Power Pages deve essere portal.contoso.com. Questo è importante per garantire che i cookie utilizzati dal sito Power Pages non vengano classificati come cookie di terze parti e e siano bloccati dal browser (blog). In caso contrario, funzionalità come Captcha e il reindirizzamento dei moduli di base/con più passaggi potrebbero non funzionare correttamente. Per impostare un nome di dominio personalizzato nel sito Power Pages, vedi Aggiungere un nome di dominio personalizzato.

Passaggio 3: Gestire intestazioni e piè di pagina

Puoi modificare l'aspetto delle intestazioni e dei piè di pagina nelle pagine del sito Power Pages incorporato o decidere se visualizzarle o meno nelle stesse.

Non visualizzare le intestazioni e i piè di pagina del sito incorporato

È normale che il sito padre in cui si desidera incorporare un sito Power Pages disponga già di intestazioni e piè di pagina. In tali casi, potresti non voler visualizzare l'intestazione e il piè di pagina del sito incorporato. Esaminare gli scenari seguenti:

  • Quando un intero sito Power Pages è incorporato in un iframe
    Rimuovi il contenuto dell'intestazione e del piè di pagina aggiornando i rispettivi modelli Web di intestazione e piè di pagina.

  • Quando una specifica pagina del sito Power Pages è incorporata in un iframe
    In genere, non visualizzi l'intestazione o il piè di pagina del sito quando incorpori una pagina specifica in un sito Web. Tuttavia, vuoi comunque che l'intestazione e il piè di pagina siano disponibili quando l'utente accede direttamente al sito. A questo proposito, modifichi le intestazioni e i piè di pagina per eseguire il rendering dinamico in base al contenuto della pagina.

Aggiungere codice condizionale nell'intestazione e nel piè di pagina

I modelli Web di intestazioni e piè di pagina supportano personalizzazioni liquide complete, quindi puoi aggiungere codice condizionale per eseguire il rendering di determinate proprietà.

Ad esempio, il codice seguente visualizza una barra di ricerca nell'intestazione se la pagina è diversa dalla pagina di ricerca.

Importante

Poiché l'intestazione è un elemento comune a tutte le pagine, page.id verrà memorizzato nella cache per impostazione predefinita per la prima pagina aperta da un utente. Quindi, questo codice usa il tag di sostituzione per garantire che questi elementi non vengano memorizzati nella cache e siano sempre valutati in base alla pagina corrente.

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

In alternativa all'aggiunta di codice condizionale nell'intestazione e nei piè di pagina, puoi anche considerare i metodi seguenti. Tuttavia, non consigliamo nessuno dei due approcci; entrambi presentano limitazioni e nessuno dei due supporta la piena funzionalità.

  • Per gli scenari di sola lettura che non includono elenchi o moduli, disabilita l'intestazione e il piè di pagina dal modello.
  • Utilizza un modello di riscrittura speciale (~/Areas/Portal/Pages/Form.aspx).

Vedi anche