Content Marketing

كسر Iframe: كيفية إيقاف التأطير غير المصرح به لمحتواك

أبلغني أحد زوار موقعي مرة واحدة عندما نقر على أحد الروابط الخاصة بي تويتر؛ تم إحضاره إلى موقعي مع نافذة منبثقة كبيرة وتحذير بشفرة ضارة. هذا يكفي لإخافة شخص ما ، لذلك بدأت في إجراء بعض الاختبارات. لم يكن هناك خطأ في موقعي - كانت المشكلة هي الارتباط.

أنتج الارتباط الموجود على موقع آخر شريط أدوات في الأعلى شجع الأشخاص على النقر فوق ارتباط ضار أثناء تحميل موقعي في إطار iframe أسفله. بالنسبة لمعظم الأشخاص ، قد يبدو أن موقعي ينشر شفرة ضارة. لن أقول إنني أحب أي موقع يقوم بتحميل موقعي داخل إطار iframe ، لذلك فعلت ما سيفعله أي مهووس معقول ... لقد قمت بتحميل فاصل إطارات.

ومع ذلك ، فإن تأطير موقعك ليس دائمًا ضارًا. لقد شاركنا مؤخرًا أداة ، Sniply، لإضافة عبارة تحث المستخدم على اتخاذ إجراء (CTA) إلى أي رابط موقع ويب تشاركه. يقوم بذلك عن طريق تضمين موقعك بالكامل في iframe وتطبيق div على المحتوى الخاص بك باستخدام عبارة الحث على اتخاذ إجراء.

لكنني خاص جدًا بالمحتوى الخاص بي والجهد الذي بذلت فيه Martech Zone، لذلك لا أريد أن يقوم أي شخص بوضع إطار iframe للمحتوى الخاص بي ، حتى باستخدام نظام أساسي لمشاركة الروابط. عند إجراء بعض الأبحاث ، توجد عدة طرق للتعامل مع هذا الأمر.

كيفية إيقاف تأطير المحتوى الخاص بك باستخدام JavaScript

يتحقق رمز JavaScript هذا مما إذا كانت النافذة الحالية (self) ليست النافذة العلوية (top). إذا لم يكن الأمر كذلك ، فهذا يعني أن الصفحة موجودة في إطار ، أو iframe ، أو ما شابه ، وأن البرنامج النصي يعيد توجيه النافذة العلوية إلى URL من النافذة الحالية. هذا على نحو فعال يهرب من iframe.

<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>

هناك العديد من الجوانب السلبية لهذا النهج:

  1. الاعتماد على JavaScript: إذا قام المستخدم بتعطيل JavaScript ، فلن تعمل هذه الطريقة.
  2. التأخير: قد يكون هناك تأخير بسيط قبل تشغيل جافا سكريبت ، وخلال هذه الفترة يمكن أن تظل النسخة المؤطرة من موقعك مرئية.
  3. قيود المنشأ: في بعض الحالات ، قد تمنع سياسة المنشأ نفسها هذا البرنامج النصي من العمل على النحو المنشود. إذا كان المستند الأصلي موجودًا في مجال مختلف ، فقد لا يتمكن من الوصول top.location.href.
  4. إمكانية تحطيم الإطارات: هناك أيضًا نصوص (تسمى برامج إزالة الإطارات) يمكنها منع البرامج النصية التي تعمل على اختراق الإطارات.

الأسلوب الأفضل هو استخدام رؤوس استجابة HTTP.

X-Frame-Options و Content-Security-Policy

يبلغ قطر كلاً من X-Frame-Options و Content-Security-Policy (CSP) هي رؤوس استجابة HTTP تُستخدم لتحسين أمان موقع الويب. يخدم كل منها أغراضًا مختلفة قليلاً ولديها مستويات مختلفة من المرونة.

X-Frame-Options هو رأس HTTP أقدم مصمم خصيصًا للتحكم في إمكانية تضمين موقعك في ملف <frame>, <iframe>, <embed>الطرق أو <object> على موقع آخر. له ثلاث توجيهات محتملة:

  1. DENY - لا يمكن عرض الصفحة في إطار بغض النظر عن محاولة الموقع القيام بذلك.
  2. SAMEORIGIN - لا يمكن عرض الصفحة إلا في إطار على نفس أصل الصفحة نفسها.
  3. ALLOW-FROM uri - لا يمكن عرض الصفحة إلا في إطار على الأصل المحدد.

ومع ذلك، X-Frame-Options يقتصر على أنه لا يمكنه التعامل مع السيناريوهات الأكثر تعقيدًا ، مثل السماح بالتأطير من عدة أصول مختلفة أو استخدام أحرف البدل للنطاقات الفرعية. لا تدعم كل المتصفحات ALLOW-FROM التوجيه.

Content-Security-Policy، من ناحية أخرى ، هو رأس HTTP أكثر مرونة وقوة. بينما يمكن أن تفعل كل شيء X-Frame-Options يمكن القيام به وأكثر من ذلك بكثير ، فالغرض الأساسي منه هو منع مجموعة واسعة من هجمات حقن التعليمات البرمجية ، بما في ذلك البرمجة النصية عبر المواقع (XSS) و clickjacking. إنه يعمل عن طريق تحديد قائمة بيضاء لمصادر المحتوى الموثوقة (البرامج النصية والأنماط والصور وما إلى ذلك).

للتحكم في الإطارات ، يستخدم CSP ملف frame-ancestors التوجيه. يمكنك تحديد مصادر متعددة ، بما في ذلك المجالات المتعددة ونطاقات أحرف البدل الفرعية. هذا مثال:

cssCopy codeContent-Security-Policy: frame-ancestors 'self' yourdomain.com *.domain2.com;

سيسمح هذا للصفحة بأن تكون مؤطرة في موقعها الخاص ('self')، على yourdomain.comوعلى أي مجال فرعي لـ domain2.com.

يوصى بـ CSP كبديل لـ X-Frame-Options، حيث يمكنه التعامل مع كل شيء X-Frame-Options يمكن أن تفعله ، وأكثر من ذلك بكثير. بينما تدعم معظم المتصفحات الحديثة CSP ، فقد لا تزال هناك بعض المتصفحات القديمة أو الأقل شيوعًا التي لا تدعمها بشكل كامل.

كيفية التوقف عن تأطير المحتوى الخاص بك باستخدام HTML

توجد الآن علامة وصفية لـ Content-Security-Policy يمكن نشرها والتي تعطل القدرة على iframe للمحتوى الخاص بك:

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' yourdomain.com">

فعالية علامة HTML الوصفية محدودة نظرًا لعدم احترام جميع المتصفحات لملف Content-Security-Policy عند التعيين باستخدام علامة وصفية.

كيفية إيقاف تأطير المحتوى الخاص بك باستخدام رؤوس HTTP

من الأفضل استخدام رؤوس HTTP X-Frame-Options or Content-Security-Policy للتحكم في التأطير. هذه الخيارات أكثر موثوقية وأمانًا ، وتعمل حتى إذا تم تعطيل JavaScript. يجب استخدام طريقة JavaScript فقط كحل أخير إذا لم يكن لديك سيطرة على الخادم لتعيين رؤوس HTTP. لكل مثال ، استبدل yourdomain.com مع المجال الفعلي الخاص بك.

أباتشي - قم بتعديل ملف .htaccess ملف على النحو التالي:

Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' yourdomain.com"

إنجن إكس - قم بتعديل كتلة الخادم الخاص بك على النحو التالي:

add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";

IIS - قم بذلك عن طريق إضافة ما يلي إلى ملف web.config ملف:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

WordPress - قم بذلك عن طريق إضافة هذا الرمز إلى ملف function.php الخاص بك:

function add_security_headers() {
  header('X-Frame-Options: SAMEORIGIN');
  header("Content-Security-Policy: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');

ستسمح هذه التكوينات فقط بتضمين صفحتك داخل إطارات iframe على النطاق المحدد الذي تحدده ، وليس في أي نطاقات فرعية للنطاق. إذا كنت تريد السماح بنطاقات فرعية معينة ، فسيتعين عليك إدراجها بشكل صريح ، مثل subdomain1.yourdomain.com subdomain2.yourdomain.com، وهلم جرا.

السماح بتأطير المحتوى الخاص بك من نطاقات متعددة

يمكنك تحديد مجالات متعددة باستخدام رأس استجابة HTTP Content-Security-Policy وتوجيه frame-Ancestors. يجب أن تفصل مسافة بين كل مجال. هذا مثال:

Content-Security-Policy: frame-ancestors 'self' domain1.com domain2.com domain3.com;

أباتشي - قم بتعديل ملف .htaccess ملف على النحو التالي:

Header always set X-Frame-Options SAMEORIGINHeader always set Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com"

إنجن إكس - قم بتعديل كتلة الخادم الخاص بك على النحو التالي:

add_header X-Frame-Options SAMEORIGIN;add_header Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com";

IIS - قم بذلك عن طريق إضافة ما يلي إلى ملف web.config ملف:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
      <add name="Content-Security-Policy" value="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

السماح بتأطير المحتوى الخاص بك من مجال البدل

يمكنك أيضًا تحديد حرف بدل لجميع النطاقات الفرعية بامتداد Content-Security-Policy رأس استجابة HTTP وتوجيه أسلاف الإطار. فيما يلي أمثلة على Content-Security-Policy الكود الذي يجب تحديثه:

Content-Security-Policy: frame-ancestors 'self' *.yourdomain.com;

أباتشي - قم بتعديل ملف .htaccess ملف على النحو التالي:

Header always set Content-Security-Policy "frame-ancestors 'self' *.yourdomain.com"

إنجن إكس - قم بتعديل كتلة الخادم الخاص بك على النحو التالي:

add_header Content-Security-Policy "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";

IIS - قم بذلك عن طريق إضافة ما يلي إلى ملف web.config ملف:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="frame-ancestors 'self' *.yourdomain.com" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

Martech Zone قادر على تزويدك بهذا المحتوى دون أي تكلفة لأننا نستثمر موقعنا من خلال عائدات الإعلانات ، والروابط التابعة ، والرعاية. سنكون ممتنين إذا قمت بإزالة مانع الإعلانات الخاص بك أثناء عرض موقعنا.