ميكانيزم X-Frame-Options

X-Frame-Options تستعمل ب Http Response Header و هي تحدد للمتصفح ما إذا كان سيسمح بتقديم صفحة الويب ب <frame> أو <iframe> أو <object> . وهذا يسمح للموقع بتجنب هجوم Clickjacking  عن طريق ضمان أن محتواها ليس بمواقع أخرى .

وطبعا يجب على المتصفح أن يكون يدعم هذه الخاصية.

<frame><iframe><object> بلغة HTML :

الكثير منا سيجد نفسه بدون بوصلة تحدد له اتجاها لفهم ما يدور بمقالنا هذا، لذلك مبدئيا سنقوم بشرح بسيط لكل من <frame><iframe><object> بلغة HTML .

Frame :

<frame> هو عنصر من عناصر لغة HTML يقوم بتعريف مساحة أو مجال يتم عرض فيه ملف html اخر.
وهي من العناصر التي لا ينصح باستعمالها بسبب تأثيرها على السرعة و الاداء اثناء  تصفح المستعمل .
وهذا مثال لاستعمالها ، يجب الإشارة إلى أن frame تستعمل داخل عنصر frameset .

<frameset cols="50%,50%">
  <frame src="http://donhackingarticles.blogspot.com/2016/11/13-httponly.html" />
  <frame src="http://donhackingarticles.blogspot.com/2016/11/htaccess-part2.html" />
</frameset>

Object :

عنصر من عناصر html يمثل موارد خارجية ، التي يمكن ان يتم معالجتها كصورة ، ملف للتصفح أو مورد يتم التعامل معه من طرف plugin.
وهذا مثال مبسط عن استعمال هذا العنصر.

<!-- ملف فلم يتم اسخدامه بالصفحة -->
<object data="movie.swf" type="application/x-shockwave-flash"></object>

<!-- نفس الملف مع إضافة خاصية للعنصر  -->
<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

Iframe :

هذا العنصر يقوم بدمج ملف Html داخل مساحة من الصفحة ، بال html 4.01 الملف يمكن أن يحتوي على head و body أو head و frameset ، لكن لا يمكن أن يجمع بين body و frameset ، لكن iframe يمكن أن يكون داخل body .

وهذا مثال عن استعمال الكود التالي و النتيجة المحصل عليها:

<base target="_blank">
<iframe id="Example2"
    name="Example2"
    title="Example2"
    width="400"
    height="300"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d53940.61105810116!2d-6.408248688595764!3d32.330971989893214!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda38649419c7fc1%3A0x6236b3e9a12bafd9!2sB%C3%A9ni+Mellal%2C+Maroc!5e0!3m2!1sfr!2sfr!4v1479683268112">
</iframe>

<br>
<small>
  <a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d53940.61105810116!2d-6.408248688595764!3d32.330971989893214!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda38649419c7fc1%3A0x6236b3e9a12bafd9!2sB%C3%A9ni+Mellal%2C+Maroc!5e0!3m2!1sfr!2sfr!4v1479683268112" style="color:#0000FF;text-align:left"> See bigger map </a>
</small>

و النتيجة :

See bigger map

X-Frame-Options :

بعد أن تعرفنا على العناصر الثلاث نعود ل x-frame-options و للقيم أو التوجيهات التي يمكن أن تحملها و هي عموما ثلاث توجيهات على الشكل التالي :

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/

• Deny : الصفحة لا يمكن استعمالها في frame بغض النضر عن محاولات الموقع القيام بهذا.
• Sameorigin :الصفحة يمكن استعمالها فقط في frame بنفس موقع الصفحة نفسها.
• Allow-from : الصفحة يمكن استعمالها فقط بالموقع المشار له.

وهذا مثال لل http response header يحمل هذه الخاصية :

200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY

تفعيل الخاصية بالسيرفر :

Configuring Apache

Header always append X-Frame-Options SAMEORIGIN

Configuring nginx

add_header X-Frame-Options SAMEORIGIN;

Configuring IIS (Config file)

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

Configuring HAProxy

rspadd X-Frame-Options:\ SAMEORIGIN

ونأتي لختام مقالنا في انتظار تعليقاتكم