iFrame kullanarak başka bir web sitesine Power Pages sitesi ekleme

Web tabanlı uygulamaları kullanmanın en yaygın yollarından biri, web uygulaması işlevselliğini başka bir web sitesine eklemektir. Genellikle diğer web sitesi zaten vardır ancak yeteneklerini geliştirmek ve Power Pages uygulaması aracılığıyla elde edilen verilerinizle çalışan yeni işlevler eklemek istersiniz.

Bu senaryoda, portal işlevselliğini sıfırdan oluşturmak yerine Power Pages sitenizi eklemek daha kolaydır. Bu makalede, iFrame kullanarak Power Pages uygulamasını farklı bir web sitesine ekleme adımları açıklanmaktadır.

1. Adım. iFrame için siteyi etkinleştirme

iFrame'ler varsayılan olarak yeni Power Pages sitelerinde devre dışı bırakılmıştır; böylece hiç kimse "tıklama" saldırıları girişiminde bulunmak için portal uygulamanızı harici olarak katıştıramaz.

  1. HTTP yanıtı bağlığı ayarlayın. İçerik-Güvenlik-İlkesi (CSP) çerçeve üst öğeleri direktifini (önerilir) veya X-Frame-Seçenekleri'ni seçebilirsiniz.

    Not

    İçerik-Güvenlik-İlkesi çerçevesi-üst öğelerinin değiştirilmiş X-Frame Seçenekleri vardır ve bu makalede açıklanan yöntemdir.

    1. HTTP/İçerik-Güvenlik-İlkesi HTTP başlığını etkinleştirmek için site ayarını ayarlayın. Daha fazla bilgi: Portallarda HTTP başlıklarını ayarlama

    2. Bu değeri ayarlamak için CSP: çerçeve-üst öğeleri'nde açıklanan sözdizimini izleyin.

      Örneğin, www.contoso.com web sitesinde bir iFrame kullanılarak katıştırılan bir Power Pages sitesini etkinleştirmek için ayar aşağıdaki gibi görünecektir:

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

      Not

      'self' dizesi önemlidir; bu dize olmadan Power Pages sitesi, temel formlar için kalıcı açılan menüler gibi senaryolarda genellikle gerekli olan kendi sayfalarını katıştıramaz.

      Joker karakter (*) kullanmak yerine, belirli sitelere Power Pages sitesini iFrame içinde katıştırma yeteneğini kısıtlamak önemlidir.

      CSP, değerleri çeşitli etkenlere (komut dosyalarının yüklenme yeri gibi) bağlı olan çok sayıda yönerge içerir. Bu makale, uygulanmasına özgü olduğundan bu bilgileri kapsamaz. Ancak, bu kurulumu öncelikle üretim dışı bir site üzerinde sınamanızı, düzeltmeniz gereken sorunları belirlemek için tarayıcı konsolu hatalarına bakmanızı ve ayarı düzenlemenizi öneririz.

  2. Power Pages site tanımlama bilgileri için SameSite varsayılanını Hiçbiri olarak ayarlayın.

    Tanımlama bilgilerinin SameSite özniteliği siteyi siteler arası istek sahteciliği (CSRF) saldırılarına karşı korumak için yararlıdır. Ancak bu, sitenin Kullanıcı kimlik doğrulaması gerektirmesi veya form ya da listeler gibi dinamik bileşenler içermesi gibi senaryolarda bir iframe içinde katıştırılamayacağı anlamına gelir.

    Bu nedenle, Power Pages sitesini bir iFrame içine katıştırmak için Power Pages sitenizin SameSite tanımlama bilgisi özniteliğini varsayılan olarak Hiçbiri olarak değiştirmeniz gerekir. Daha fazla bilgi: SameSite modu değişiklikleri

    Not

    SameSite tanımlama bilgilerini Hiçbiri olarak ayarlamak Power Pages sitenizi CSRF saldırılarına açık hale getirmez çünkü Power Pages, bu saldırıları önlemek için CSRF önleme belirteçleri kullanır.

2. Adım. Power Pages sitenizi katıştırma

Önceki adımı tamamladıktan sonra, Power Pages sitesi deneyimini web sitenize katıştırmak için yapmanız gereken tek şey, tüm siteyi veya belirli sayfaları gerektiği gibi katıştırmak için HTML iFrame etiketini kullanmaktır.

Power Pages etki alanı adının, siteyi iFrame içinde katıştırdığınız site etki alanı adının eşdüzey veya alt öğesi olmasını öneririz. Örneğin, kök web siteniz www.contoso.com ise Power Pages sitesi etki alanı adı portal.contoso.com olmalıdır. Bu, Power Pages sitesi tarafından kullanılan tanımlama bilgilerinin üçüncü taraf tanımlama bilgileri olarak sınıflandırılmaması ve tarayıcı (blog) tarafından engellenmemesi açısından önemlidir. Aksi halde, Captcha ve temel/çok adımlı form yeniden yönlendirme gibi işlevler düzgün çalışmayabilir. Power Pages sitenizde özel bir etki alanı adı ayarlamak için Özel etki alanı adı ekleme bölümüne gidin.

3. Adım. Tanıtıcı başlıkları ve alt bilgileri

Başlıkların ve alt bilgilerin görünme biçimini veya katıştırılmış Power Pages sitesi sayfalarında tamamen görünüp görünmeyeceğini değiştirebilirsiniz.

Katıştırılmış site başlıklarının ve alt bilgilerin gösterilmesini önleme

Bu, Power Pages sitesini katıştırmak istediğiniz, zaten başlık ve alt bilgilere sahip olan ana site için yaygın bir seçimdir. Bu gibi durumlarda, katıştırılmış sitenin başlığını ve alt bilgisini göstermek istemeyebilirsiniz. Aşağıdaki senaryoları değerlendirin:

  • Tüm Power Pages sitesi bir iFrame içine katıştırıldığında
    İlgili başlık ve altbilgi Web şablonlarını güncelleştirerek başlık ve alt bilgi içeriğini kaldırın.

  • Belirli bir Power Pages sitesi sayfası bir iFrame içine katıştırıldığında
    Genel olarak, bir web sitesine belirli bir sayfayı katıştırdığınızda site başlığını veya alt bilgisini göstermek istemezsiniz. Ancak, Kullanıcı doğrudan siteye gittiğinde, başlık ve alt bilginin kullanılabilir durumda olmasını yine de isteyebilirsiniz. Sayfa içeriğine göre dinamik olarak işlenecek başlık ve alt bilgileri değiştirerek bunu yapabilirsiniz.

Başlığa ve alt bilgilere koşullu kod ekleme

Başlık ve alt bilgi Web şablonları, tam liquid özelleştirmelerini destekler böylece belirli özellikleri işlemek için koşullu kod ekleyebilirsiniz.

Örneğin, sayfa arama sayfası dışında bir şey ise, aşağıdaki kod başlıkta bir arama çubuğu görüntüler.

Önemli

Başlık tüm sayfalar için ortak bir öğe olduğundan, page.id kullanıcı tarafından açılan ilk sayfa için varsayılan olarak önbelleğe alınır. Bu nedenle, bu kod bu öğelerin önbelleğe alınmamasını ve her zaman geçerli sayfaya göre değerlendirilmelerini sağlamak için değiştirme etiketini kullanır.

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

Başlığa ve alt bilgilere koşullu kod eklemeye alternatif olarak, aşağıdaki yöntemleri de düşünebilirsiniz. Ancak, herhangi bir yaklaşım önermiyoruz; her ikisinin de sınırlamaları bulunur ve tam işlevselliği desteklemez.

  • Hiçbir liste veya form içermeyen salt okunur senaryolar için şablonunuzda başlığı ve alt bilgiyi devre dışı bırakın.
  • Özel bir yeniden yazma şablonu kullanın ( ~/Areas/Portal/Pages/Form.aspx).

Ayrıca bkz.

  • Last updated on