X-Frame-Options คืออะไร ?

Overview

เนื่องจากทีมได้มีการทำ pentest กับทีม vendor แล้วมันจะมี vulnerbility อยู่ข้อนึงที่ติดมาแล้วต้องทำการแก้ไข เกี่ยวกับเรื่อง X-Frame Options จึงไปทำการ research ดูว่ามันคืออะไรกันแน่

X-Frame-Options

X-Frame Options คืออะไร ?

อธิบายแบบง่ายๆ มันคือการกำหนดให้หน้าเว็บของเราเนี่ย จะ อนุญาติ ให้ render page / javascript จากที่ไหนได้บ้าง ซึ่ง Configuration ตรงนี้จะทำที่ฝั่งของ server side ไม่ว่าจะเป็น nginx/ apache / gateway หรือในระดับ application เองก็สามารถทำได้

ทำเพื่อป้องการผู้ไม่ประสงค์ดีเรียกใช้งาน หน้าเว็บของเรา จาก domain อื่น เพื่อ ปลอมเป็น host ที่น่าเชื่อถือ เช่น ธนาคาร สถาบันการเงินต่างๆ บริษัทประกันภัย,

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

SAMEORIGIN

อนุญาติให้เรียกได้ภายใน domain เดียวกัน

DENY

ไม่อนุญาติให้เรียกได้ภายนอก domain

โดยหลังจากที่เรา config ตรงนี้ไปแล้วเนี่ย, จะทำให้ Response Header ที่ return จากฝั่ง server มีค่า X-Frame-Options เป็น SAMEORIGIN หรือ DENY ตามที่เรา config

Header always set X-Frame-Options "SAMEORIGIN"

Header set X-Frame-Options "DENY"

แต่ถ้าหากเราใช้งานในฝั่ง Windows และต้องการ config ที่ IIS

<system.webServer>
  …
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>
  …
</system.webServer>

อีกหนึ่งช่องทางที่สามารถทำได้คือ ทำในระดับ application, ยกตัวอย่างทำที่ expressjs

const helmet = require("helmet");
const app = express();
app.use(
  helmet({
    xFrameOptions: { action: "sameorigin" },
  }),
);

Thank you for watching!