iframe এম্বেড পরীক্ষক

একটি পেজ এম্বেড করা যাবে কিনা তা কী নির্ধারণ করে?

দ্রুত গাইড: রেসপন্স হেডার সেটআপ

সাইটটি আপনার থাকলে, রেসপন্স হেডার ব্যবহার করে সরাসরি ফ্রেমিং নিয়ন্ত্রণ করুন।

নোট: X-Frame-Options এর পরিবর্তে এখন CSP frame-ancestors ব্যবহার করা হয়। যদি উভয়ই সেট থাকে, তবে CSP প্রাধান্য পাবে — তাই frame-ancestors ব্যবহার করাই শ্রেয়।

সার্ভার কীভাবে শনাক্ত করে যে রিকোয়েস্টটি একটি ইফ্রেম থেকে এসেছে?

• Sec-Fetch-Dest: document — মেইন বা টপ-লেভেল নেভিগেশন, যেকোনো ফ্রেমের ভেতরে নয়।
• Sec-Fetch-Dest: iframe — অনুরোধটি একটি <iframe> এর ভেতরে লোড হচ্ছে।
• Sec-Fetch-Dest: frame — অনুরোধটি একটি পুরনো <frame> (ফ্রেমসেট)-এর ভেতরে লোড হচ্ছে।
• Sec-Fetch-Dest: embed / object — অনুরোধটি একটি <embed> বা <object> ট্যাগের ভেতরে লোড হচ্ছে।

সার্ভার কনফিগ উদাহরণ: ইফ্রেম এম্বেডিং ব্লক করা

নিচের কোড স্নিপেটগুলো দেখিয়েছে কীভাবে প্রতিটি সার্ভার বা ফ্রেমওয়ার্ক কনফিগার করতে হবে, যাতে <iframe> এম্বেডিং সম্পূর্ণভাবে ব্লক করা যায় (X-Frame-Options: DENY + CSP frame-ancestors 'none') — যা উপরের দ্রুত গাইডের সকল পদ্ধতির মধ্যে সবচেয়ে কঠোর।

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

সম্পূর্ণ ব্লকের পরিবর্তে শুধুমাত্র আপনার নিজের সাইট বা কিছু নির্দিষ্ট ওরিজিনের তালিকাকে ফ্রেমিং অনুমতি দিতে চান? DENY এর পরিবর্তে SAMEORIGIN, এবং 'none' এর পরিবর্তে 'self' বা ওরিজিনের সুনির্দিষ্ট তালিকা ব্যবহার করুন — অবশিষ্ট কনফিগারেশনের কোনো পরিবর্তন হবে না।

পরিচিত প্ল্যাটফর্ম সতর্কতা

সাধারণ হেডার নীতিমালা বাদ দিলেও, কিছু জনপ্রিয় প্ল্যাটফর্কের নিজস্ব কিছু বৈশিষ্ট্য বা অসঙ্গতি রয়েছে। শুধুমাত্র হেডারের ভিত্তিতে "blocked" বা "embeddable" ধরে নেওয়ার আগে এগুলো জানা জরুরি।

সাধারণ ব্যবহার ক্ষেত্র

• ইন্টিগ্রেশন কোড লিখার আগে সিদ্ধান্ত নিন যে আপনার নিজস্ব প্রোডাক্টে থার্ড-পার্টি উইজেট, ড্যাশবোর্ড, বা ডকুমেন্ট এম্বেড করা সম্ভব কিনা।
• নিশ্চিত করুন যে আপনার নিজস্ব ওয়েবসাইট আপনি যে X-Frame-Options বা CSP frame-ancestors নীতি সেট করেছিলেন, তা সঠিকভাবে পাঠাচ্ছে।
• ক্লিকজ্যাকিং সুরক্ষা ডিবাগ করুন: iframe-এর ভেতরে একটি পেজ কেন about:blank বা কোনো প্রত্যাখ্যানের বার্তা দেখাচ্ছে তা বোঝুন।
• কন্টেন্ট সংকলন বা পোর্টাল ইন্টিগ্রেশনের সময় সম্ভাব্য URL-গুলো ব্যাচ স্ক্রিন করুন; সেশন হিস্টোরি ব্যবহার করে ফলাফল পুনরায় পরিদর্শন করুন।
• বাহ্যিক নির্ভরশীলতার (external dependencies) ফ্রেমিং নীতিমালা দলিলভুক্ত করে নিরাপত্তা পর্যালোচনা বা পেনেট্রেশন টেস্টের জন্য প্রস্তুত থাকুন।

সচরাচর জিজ্ঞাসিত প্রশ্নাবলী