Infoga en Power Pages-webbplats på en annan webbplats med hjälp av en iFrame

Ett av de vanligaste sätten att använda webbaserade program är att infoga webbprogramsfunktioner på en annan webbplats. Vanligtvis finns den andra webbplatsen redan, men du vill förbättra funktionerna och lägga till nya funktioner som fungerar med dina data som kommer ut via Power Pages-programmet.

I det här scenariot är det lättare att infoga dina Power Pages-webbplatsfunktioner istället för att bygga den från grunden. Den här artikeln innehåller information om hur du bäddar in ett Power Pages-program på en annan webbplats med hjälp av en iFrame.

Steg 1. Aktivera webbplatsen för iFrame

iFrames har som standard inaktiverats för nya Power Pages-webbplatser, detta i syfte att säkerställa att ingen kan bädda in din webbplats externt i ett försök att "klick-kapa" attacker.

Ange HTTP-rubriker för svaret. Du kan välja antingen direktivet Content-Security-Policy (CSP) frame-ancestors (rekommenderat) eller X-Frame-Options.

Kommentar

Content-Security-Policy frame-ancestors har ersatt X-Frame-Options, och är metoden som beskrivs i den här artikeln.
1. Ange webbplatsinställningen så att HTTP-huvuden HTTP/Content-Security-Policy aktiveras. Mer information: Konfigurera HTTP-rubriker i portalen
2. Följ syntaxen som beskrivs CSP: frame-ancestors för att ange värdet.
  
  Om du till exempel vill aktivera en Power Pages-webbplats som kan bäddas in med hjälp av en iFrame på webbplatsen www.contoso.com ser inställningen ut så här:
  
  Content-Security-Policy: frame-ancestors 'self' <https://www.contoso.com>;
  
  Kommentar
  
  Strängen 'self' är viktig - utan den kan Power Pages-webbplatsen inte bädda in sina egna sidor, vilket vanligtvis krävs i situationer såsom modala popup-menyer för grundläggande formulär.
  
  Det är viktigt att begränsa möjligheten att bädda in en Power Pages-webbplats i en iFrame till specifika webbplatser istället för att använda jokertecken (*).
  
  CSP består av många olika funktioner vars värden är beroende av olika faktorer (till exempel varifrån skripten läses in). Den här artikeln innehåller inte den informationen eftersom den är implementeringsspecifik. Vi rekommenderar emellertid att du först testar konfigurationen på en icke-produktionswebbplats, tittar på felen i webbläsarkonsolen för att identifiera de problem som du behöver åtgärda och justera inställningen.
Ange standardvärdet för SameSite som Ingen för cookies för Power Pages-webbplats.

Attributet SameSite för cookies är användbart för att säkra webbplatsen mot attacker om förfalskning från flera webbplatser (CSRF). Men det betyder också att webbplatsen inte kan vara inbäddad i en iframe, till exempel när webbplatsen kräver användarautentisering eller innehåller dynamiska komponenter som formulär eller listor.

För att kunna infoga Power Pages-webbplatsen i en iFrame måste du därför ändra cookieattributet SameSite för din Power Pages-webbplats till Ingen som standard. Mer information: Ändringar i läget SameSite

Kommentar

Om du markerar SameSite-cookies som Ingen gör inte din Power Pages-webbplats sårbar för CSRF-angrepp, detta eftersom Power Pages använder anti-CSRF-tokens för att förhindra dessa attacker.

Steg 2. Bädda in Power Pages-webbplats

När du har slutfört föregående steg är allt du behöver göra för att bädda in Power Pages-webbplatsupplevelsen på din webbplats att använda HTML-iFrametaggen för att bädda in hela webbplatsen eller specifika sidor, efter behov.

Vi rekommenderar att Power Pages-domännamnet är ett syskon- eller underordnat domännamn för den webbplats där du bäddar in webbplatsen i en iFrame. Om din rotwebbplats til exempel är www.contoso.com bör domännamnet för Power Pages-webbplatsen vara portal.contoso.com. Det är viktigt att säkerställa att de cookies som används av Power Pages-webbplatsen inte klassificeras som tredjepartscookies och kan blockeras av webbläsaren (blogg). Annars kanske funktioner som Captcha och omdirigerande av grundläggande formulär/flerstegsformulär inte fungerar. Om du vill konfigurera ett anpassat domännamn för din Power Pages-webbplats går du till Lägg till ett anpassat domännamn.

Steg 3. Hantera rubriker och sidfötter

Du kan ändra hur sidhuvuden och sidfot visas - eller om de visas alls - på inbyggda Power Pages-webbplatssidor.

Se till att de inbäddade webbplatshuvudena och -sidfötterna inte visas

Det är vanligt att den överordnade webbplatsen där du vill infoga en Power Pages-webbplats redan har sidhuvud och sidfot. I sådana situationer kanske du inte vill visa den inbäddade webbplatsens sidhuvud och sidfot. Föreställ dig följande scenarier:

När en hel Power Pages-webbplats är inbäddad i en iFrame
Ta bort innehållet i sidhuvudet och sidfoten genom att uppdatera respektive webbmallar för sidhuvud och sidfot.
När en specifik Power Pages-webbplatssida är inbäddad i en iFrame
Vanligtvis vill du inte visa webbplatssidhuvudet eller -sidfoten när du bäddar in en viss sida på en webbplats. Däremot vill du att sidhuvudet och sidfoten ska vara tillgängliga när användaren går till webbplatsen direkt. Du kan göra detta genom att ändra sidhuvuden och sidfot för att återge dynamiskt baserat på sidinnehåll.

Lägga till villkorskod i sidhuvud och sidfot

Webbmallar för sidhuvud och sidfot har stöd för fullständiga anpassningar av anpassningarna, så att du kan lägga till villkorskod för rendering av vissa egenskaper.

I följande kod visas till exempel ett sökfält i sidhuvudet om sidan är något annat än söksidan.

Viktigt!

Eftersom sidhuvudet är ett element som är vanligt för alla sidor page.id cachelagras det som standard för den första sida som öppnas av en användare. Därför används koden Ersättningsflik för att säkerställa att dessa element inte cachas och alltid kommer att utvärderas utifrån den aktuella sidan.

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

Som ett alternativ till att lägga till villkorskod i sidhuvud och sidfot kan du också överväga följande metoder. Men vi rekommenderar inte någon av dem. De har båda begränsningar och har inte stöd för fullständiga funktioner.

I skrivskyddade scenarier där inga listor eller formulär ingår ska du inaktivera sidhuvud och sidfot från mallen.
Använd en särskild mall för omskrivning (~/Areas/Portal/Pages/Form.aspx).

Se även

Feedback

Var den här sidan till hjälp?

Last updated on 2023-03-28