ฝังไซต์ Power Pages ในเว็บไซต์อื่นโดยใช้ iframe

วิธีหนึ่งที่ใช้บ่อยที่สุดในการใช้เว็บแอปพลิเคชันคือการฝังฟังก์ชันการทำงานของเว็บแอปพลิเคชันไว้ในเว็บไซต์อื่น โดยปกติเว็บไซต์อื่นจะมีอยู่แล้ว แต่คุณต้องการเพิ่มความสามารถและเพิ่มฟังก์ชันใหม่ที่ทำงานกับข้อมูลของคุณที่แสดงผ่านแอปพลิเคชัน Power Pages

ในสถานการณ์นี้ เป็นการง่ายกว่าที่จะฝังฟังก์ชันการทำงานของไซต์ Power Pages ของคุณ แทนที่จะสร้างตั้งแต่เริ่มต้น บทความนี้อธิบายขั้นตอนในการฝังแอปพลิเคชัน Power Pages ในเว็บไซต์อื่นโดยใช้ iframe

ขั้นตอนที่ 1 เปิดใช้งานไซต์สำหรับ iframe

Iframe ถูกปิดใช้งานบนไซต์ Power Pages ใหม่ตามค่าเริ่มต้น เพื่อให้แน่ใจว่าไม่มีใครสามารถฝังเว็บไซต์ของคุณแบบภายนอกเพื่อพยายาม โจมตีแบบ "clickjacking"

1. ตั้งค่าส่วนหัวของการตอบกลับ HTTP คุณสามารถเลือกได้ทั้งคำสั่ง Content-Security-Policy (CSP) frame-ancestors (แนะนำ) หรือ X-Frame-Options

   หมายเหตุ

   Content-Security-Policy frame-ancestors ได้แทนที่ X-Frame-Options และเป็นวิธีการที่อธิบายไว้ในบทความนี้

   1. ตั้งค่าไซต์เพื่อเปิดใช้งานส่วนหัว HTTP HTTP/Content-Security-Policy ข้อมูลเพิ่มเติม: ตั้งค่าส่วนหัว HTTP ในพอร์ทัล

   2. ทำตามไวยากรณ์ที่อธิบายไว้ใน CSP: frame-ancestors เพื่อตั้งค่า

      ตัวอย่างเช่น เพื่อเปิดใช้งานไซต์ Power Pages ที่สามารถฝังโดยใช้ iframe ในเว็บไซต์ www.contoso.com การตั้งค่าจะมีลักษณะดังนี้:

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

      หมายเหตุ

      สตริง 'self' มีความสำคัญ หากไม่มี ไซต์ Power Pages ไม่สามารถฝังหน้าของตนเองได้ ซึ่งโดยทั่วไปจำเป็นในสถานการณ์ต่างๆ เช่น เมนูแบบป็อปอัพโมดอลสำหรับฟอร์มพื้นฐาน

      สิ่งสำคัญคือต้องจำกัดความสามารถในการฝังไซต์ Power Pages ใน iframe ไปยังไซต์เฉพาะ แทนที่จะใช้อักขระตัวแทน (*)

      CSP ประกอบด้วยคำสั่งมากมายที่มีค่าขึ้นอยู่กับปัจจัยต่างๆ (เช่น จากตำแหน่งที่โหลดสคริปต์) บทความนี้ไม่ครอบคลุมข้อมูลนั้นเนื่องจากเป็นการใช้งานเฉพาะ อย่างไรก็ตาม เราขอแนะนำให้คุณทดสอบการตั้งค่านี้บนไซต์ที่ไม่ใช่การทำงานจริงก่อน ดูข้อผิดพลาดของคอนโซลเบราว์เซอร์เพื่อระบุปัญหาที่คุณต้องแก้ไข และปรับการตั้งค่า

2. ตั้งค่า SameSite ค่าเริ่มต้นเป็น ไม่มี สำหรับคุกกี้ของไซต์ Power Pages

   แอตทริบิวต์ SameSite สำหรับคุกกี้มีประโยชน์ในการรักษาความปลอดภัยให้กับไซต์จากการโจมตี cross-site request forgery (CSRF) อย่างไรก็ตาม นี่ยังหมายความว่าไซต์ไม่สามารถฝังใน iframe ได้ในสถานการณ์ เช่น เมื่อไซต์ต้องมีการตรวจสอบสิทธิ์ผู้ใช้หรือมีส่วนประกอบแบบไดนามิก เช่น ฟอร์มหรือรายการ

   ดังนั้น ในการฝังไซต์ Power Pages ใน iframe คุณต้องเปลี่ยนแอตทริบิวต์คุกกี้ SameSite สำหรับไซต์ Power Pages ของคุณเป็น ไม่มี เป็นค่าเริ่มต้น ข้อมูลเพิ่มเติม: การเปลี่ยนแปลงโหมด SameSite

   หมายเหตุ

   การทำเครื่องหมายคุกกี้ SameSite เป็น ไม่มี ไม่ทำให้ไซต์ Power Pages ของคุณเสี่ยงต่อการโจมตี CSRF เนื่องจาก Power Pages ใช้โทเค็นต่อต้าน CSRF เพื่อป้องกันการโจมตีเหล่านี้

ขั้นตอนที่ 2 ออกแบบไซต์ Power Pages ของคุณ

หลังจากคุณทำตามขั้นตอนก่อนหน้านี้แล้ว สิ่งที่คุณต้องทำเพื่อฝังประสบการณ์ไซต์ Power Pages ของคุณคือใช้ แท็ก HTML iframe เพื่อฝังทั้งไซต์หรือหน้าเฉพาะตามต้องการ

เราขอแนะนำให้ชื่อโดเมน Power Pages เป็นชื่อในระดับเดียวกันหรือชื่อรองของชื่อโดเมนของไซต์ที่คุณฝังไซต์ไว้ใน iframe ตัวอย่างเช่น หากเว็บไซต์รากของคุณคือ www.contoso.com ชื่อโดเมนของไซต์ Power Pages ควรเป็น portal.contoso.com นี่เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าคุกกี้ที่ใช้โดยไซต์ Power Pages จะไม่ถูกจัดประเภทเป็น คุกกี้ของบุคคลที่สามและถูกบล็อกโดยเบราว์เซอร์ (บล็อก) มิฉะนั้น ฟังก์ชัน เช่น Captcha และการเปลี่ยนเส้นทางฟอร์มพื้นฐาน/ฟอร์มแบบหลายขั้นตอนอาจทำงานไม่ถูกต้อง ในการตั้งค่าชื่อโดเมนแบบกำหนดเองบนไซต์ Power Pages ของคุณ ไปที่ เพิ่มชื่อโดเมนที่กำหนดเอง

ขั้นตอนที่ 3 ส่วนหัวและส่วนท้ายของชื่อเรียก

คุณสามารถปรับเปลี่ยนลักษณะที่ปรากฏของส่วนหัวและส่วนท้ายได้หรือไม่ปรากฏเลยบนหน้าไซต์ Power Pages ที่ฝัง

เก็บส่วนหัวและส่วนท้ายของไซต์ที่ฝังไว้ไม่ให้แสดง

เป็นเรื่องปกติสำหรับไซต์หลักที่คุณต้องการฝังไซต์ Power Pages เพื่อให้มีส่วนหัวและส่วนท้ายอยู่แล้ว ในสถานการณ์ดังกล่าว คุณอาจไม่ต้องการแสดงส่วนหัวและส่วนท้ายของไซต์ที่ฝัง พิจารณาสถานการณ์ต่อไปนี้:

• เมือไซต์ Power Pages ทั้งหมดถูกฝังใน iframe
  ลบเนื้อหาของส่วนหัวและส่วนท้ายของคุณโดยอัปเดตเทมเพลตเว็บส่วนหัวและส่วนท้ายที่เกี่ยวข้อง

• เมื่อหน้าไซต์ Power Pages เฉพาะถูกฝังใน iframe
  โดยทั่วไป คุณไม่ต้องการแสดงส่วนหัวหรือส่วนท้ายของไซต์เมื่อคุณฝังหน้าเฉพาะในเว็บไซต์ อย่างไรก็ตาม คุณยังคงต้องการให้ส่วนหัวและส่วนท้ายพร้อมใช้งานเมื่อผู้ใช้ไปที่ไซต์โดยตรง คุณสามารถทำสิ่งนี้ได้โดยการแก้ไขส่วนหัวและส่วนท้ายเพื่อแสดงผลแบบไดนามิกตามเนื้อหาของหน้า

เพิ่มรหัสเงื่อนไขในส่วนหัวและส่วนท้าย

เทมเพลตเว็บส่วนหัวและส่วนท้ายรองรับการแก้ไข/ปรับปรุงตามคำสั่งแบบไม่ตายตัว ดังนั้นคุณสามารถเพิ่มโค้ดแบบมีเงื่อนไขเพื่อแสดงคุณสมบัติบางอย่างได้

ตัวอย่างเช่น โค้ดต่อไปนี้จะแสดงแถบค้นหาในส่วนหัว หากหน้านั้นเป็นหน้าอื่นที่ไม่ใช่หน้าค้นหา

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

นอกจากการเพิ่มโค้ดแบบมีเงื่อนไขในส่วนหัวและส่วนท้ายแล้ว คุณยังสามารถพิจารณาวิธีการต่อไปนี้ได้อีกด้วย อย่างไรก็ตาม เราไม่แนะนำวิธีใดวิธีหนึ่ง ทั้งสองมีข้อจำกัด และไม่รองรับการทำงานเต็มรูปแบบ

• สำหรับสถานการณ์แบบอ่านอย่างเดียวที่ไม่มีรายการหรือฟอร์มใดๆ ให้ปิดใช้งานส่วนหัวและส่วนท้ายจากเทมเพลตของคุณ
• ใช้เทมเพลตการเขียนซ้ำแบบพิเศษ (~/Areas/Portal/Pages/Form.aspx)

ดูเพิ่มเติม

• ตั้งค่าคอนฟิกการตั้งค่าไซต์สำหรับพอร์ทัล
• แท็กเทมเพลตการแทนที่
• เปิดใช้งานการแคชเอาต์พุตส่วนหัวและส่วนท้ายบนพอร์ทัล
• โหมด SameSite
• ตั้งค่าส่วนหัว HTTP ในพอร์ทัล