ฝังพอร์ทัลในเว็บไซต์อื่นโดยใช้ iframe

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

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

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

Iframes ถูกปิดใช้งานบนพอร์ทัลใหม่โดยค่าเริ่มต้น เพื่อให้แน่ใจว่าไม่มีใครสามารถฝังโปรแกรมประยุกต์พอร์ทัลของคุณภายนอกเพื่อพยายาม โจมตีแบบ "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 เพื่อตั้งค่า

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

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

      หมายเหตุ

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

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

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

2. ตั้ง SameSite ค่าเริ่มต้นเป็น ไม่มี สำหรับคุกกี้พอร์ทัล

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

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

   หมายเหตุ

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

ขั้นตอนที่ 2 ฝังพอร์ทัลของคุณ

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

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

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

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

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

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

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

• เมื่อหน้าพอร์ทัลเฉพาะถูกฝังใน 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 ในพอร์ทัล