Infoga en portal på en annan webbplats med hjälp av en IFrame

  • Artikel
  • 4 minuter för att läsa

Ett av de vanligaste sätten att använda portalprogram är att infoga portalfunktioner 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 portalprogrammet.

I det här scenariot är det lättare att infoga portalfunktionerna i stället för att bygga den från grunden. Den här artikeln innehåller information om hur du inbäddar ett portalprogram på en annan webbplats med hjälp av en IFrame.

Steg 1. Aktivera portalen för IFrame

IFrames är inaktiverade på nya portaler som standard, för att se till att ingen kan inbädda ditt portalprogram externt för att försöka "klickkapning" angrepp.

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

    Anteckning

    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 portal som kan inbäddades 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>;

      Anteckning

      Strängen är viktig, utan den kan portalen inte inbädda sina egna sidor, vilket vanligtvis krävs i situationer som 'self' modala popup-menyer för grundläggande formulär.

      Det är viktigt att begränsa möjligheten att infoga en portal i en IFrame till specifika platser i stä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 dock att du först testar installationen på en icke-produktionsportal och tittar på felen i webbläsarkonsolen för att identifiera problem som du behöver åtgärda och justera inställningen.

  2. Ange standardvärdet SameSite till Ingen för portal-cookies..

    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 portalen i en IFrame måste du därför ändra cookieattributet SameSite för portalen till Inget som standard. Mer information: Ändringar i läget SameSite

    Anteckning

    Om du markerar SameSite-cookies som inga gör inte portalen utsatt för CSRF-angrepp, eftersom portalplattformen använder anti-CSRF-tokens för att förhindra dessa angrepp.

Steg 2. Bädda in din portal

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

Vi rekommenderar att portaldomänen är ett namn eller ett undernamn till domännamnet för den plats där portalen ska vara inbäddad i en IFrame. Om rotwebbplatsen till exempel är www.contoso.com portaldomänen vara portal.contoso.com. Detta är viktigt för att säkerställa att de cookies som används av portalen inte klassificeras som tredjepartscookies och blockeras av webbläsaren (blogg). Annars kanske funktioner som Captcha och om omdirigerande av grundläggande/avancerade formulär inte fungerar. Om du vill konfigurera ett eget domännamn på portalen går du till Lägg till ett eget domännamn.

Steg 3. Hantera rubriker och sidfötter

Du kan ändra hur sidhuvuden och sidfot visas—eller om de alls visas på—inbyggda portalsidor.

Se till att de inbäddade portalhuvudena och sidfoten inte visas

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

  • När en hel portal ä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 portalsida är inbäddad i en IFrame
    Vanligtvis vill du inte visa portalhuvudet eller sidfoten när du inbäddar 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 portalen direkt. Du kan göra detta genom att ändra sidhuvuden och sidfot för att rendera 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

Konfigurera webbplatsinställningar för portaler
Flik för ersättningsmall
Aktivera cachelagring av utdata för sidhuvud och sidfot på en portal
Läget SameSite
Konfigurera HTTP-rubriker i portalen