যদি কোনও ওয়েবপৃষ্ঠা একটি iframe এর ভিতরে বা সরাসরি ব্রাউজার উইন্ডোতে লোড হচ্ছে কিনা তা কীভাবে চিহ্নিত করবেন?


596

আমি একটি আইফ্রেমে ভিত্তিক ফেসবুক অ্যাপ লিখছি। এখন আমি ফেইসবুকের মধ্যে ক্যানভাস পৃষ্ঠা হিসাবে সাধারণ ওয়েবসাইট এবং রেন্ডার করতে একই HTML পৃষ্ঠাটি ব্যবহার করতে চাই। আমি জানতে চাই যে আমি পৃষ্ঠাটি ইফ্রেমের ভিতরে বা সরাসরি ব্রাউজারে লোড করা হয়েছে কিনা তা নির্ধারণ করতে পারি কিনা?


2
কয়েকটি দুর্দান্ত উপায় (মন্তব্য সহ): tommcfarlin.com/check-if-a-page-is-in-an-iframe
সিংহিমাইলিক

উত্তর:


1106

একই উত্স নীতিরwindow.top কারণে ব্রাউজারগুলি অ্যাক্সেস অবরুদ্ধ করতে পারে । IE বাগগুলিও স্থান নেয়। ওয়ার্কিং কোডটি এখানে:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

topএবং selfউভয় windowঅবজেক্ট (বরাবর parent), তাই আপনার উইন্ডোটি শীর্ষ উইন্ডো কিনা তা আপনি দেখতে পাচ্ছেন।


4
এটি ফায়ারফক্সে দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। এটি অন্যান্য ব্রাউজারগুলিতেও কাজ করে?
অক্ষত

5
একটি আইফ্রেমের সাথে একটি পৃষ্ঠা থাকা, আমার সন্তানের কাছ থেকে যদি আমার পিতা-মাতার iframe পৃষ্ঠাটিতে এম্বেড করা থাকে তবে তা পরীক্ষা করতে, আমি যদি (প্যারেন্ট === শীর্ষ)
স্লেগসার্ড

7
@ স্লেগসার্ড যদি সন্তানের পৃষ্ঠা এবং পিতামাতার বিবিধ ডোমেন থেকে থাকে তবে ফায়ারফক্স একই অভিযোগের নীতি (www.w3.org/Security/wiki/Same_Origin_Policy) এর জন্য অভিযোগ করবে এবং কোডটি কাজ করবে না
গৌরাঙ্গ যাদিয়া

18
এটি আমার জন্য আইই 11, 10 এবং 9 তে কাজ করে। এছাড়াও এটি এফএফ এবং অপেরা পাশাপাশি ক্রোমের ক্ষেত্রেও কাজ করে। আমি এটি নিয়ে কোনও সমস্যায় পড়ি না।
জেরেমেসউইজ

4
এখনও 1995 কারিগরি সর্বশেষ দোলনা তাদের জন্য, window.self !== window.topআয় trueযখন বিষয়বস্তু মধ্যে থেকে চালানো frame, বা iframe
জেরোমি ফ্রেঞ্চ

84

যখন পিতামাতার মতো একই উত্সের কোনও আইফ্রেমে থাকে, তখন window.frameElementপদ্ধতিটি সেই এলিমেন্টটি (যেমন iframeবা object) প্রদান করে যেখানে উইন্ডোটি এমবেড করা থাকে। অন্যথায়, যদি কোনও শীর্ষ-স্তরের প্রসঙ্গে ব্রাউজ করা হয়, বা পিতামাতা এবং সন্তানের ফ্রেমের আলাদা উত্স থাকে তবে তা মূল্যায়ন করবে null

window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

এটি সমস্ত আধুনিক ব্রাউজারে বেসিক সমর্থন সহ একটি এইচটিএমএল স্ট্যান্ডার্ড


2
নোট পড়ার চেষ্টা করা frameElementক্রস-অরিজিনের আইফ্রেমে একটি সিকিউরিটি ইরর ব্যতিক্রম ছুঁড়ে ফেলবে, ডব্লু 3 সি অনুসারে ( ডাব্লুএইচটিডাব্লু বলেছে যে এটির পরিবর্তে এটি বাতিল করা উচিত)। সুতরাং আপনি এটি কোনও try...catchবিবৃতিতে আবৃত করতে চাইতে পারেন ।
ওরিওল

5
পেয়ে nullভেতরে ও বাইরেiframe
OlehZiniak

4
এমডিএন- এর বর্ণনায় বলা হয়েছে যে "যে নথিতে এটি এমবেড করা আছে তার যদি অন্যরকম উত্স থাকে (যেমন কোনও আলাদা ডোমেন থেকে অবস্থিত) তবে এটি বাতিল।"
xeofin

রিটার্নটি কী হবে তা কেবল পরিষ্কার করার জন্য:Returns the element (such as <iframe> or <object>) in which the window is embedded, or null if the element is either top-level or is embedded into a document with a different script origin; that is, in cross-origin situations.
আর্ট

26

রবার্গ সঠিক, তবে আমি একটি পাশ নোট যুক্ত করতে চেয়েছিলাম।

আইই / / আইই 8-তে যখন মাইক্রোসফ্ট তাদের ব্রাউজারে ট্যাবগুলি যুক্ত করেছিল তারা এমন একটি জিনিস ভেঙে দিয়েছে যা আপনি যদি সাবধান না হন তবে আপনার জেএসের সাথে বিপর্যয় ডেকে আনবে।

এই পৃষ্ঠার বিন্যাসটি কল্পনা করুন:

MainPage.html
  IframedPage1.html   (named "foo")
  IframedPage2.html   (named "bar")
    IframedPage3.html (named "baz")

ফ্রেম "বাজ" এ আপনি একটি লিঙ্ক ক্লিক করেন (কোনও লক্ষ্য নেই, "বাজ" ফ্রেমে লোড হয়) এটি দুর্দান্ত কাজ করে।

যদি পৃষ্ঠাটি লোড হয়ে যায়, তবে এটিকে বিশেষ এইচটিটিএমএল বলতে দাও, "এটির" "বার" নামক কোনও প্যারেন্ট ফ্রেম রয়েছে কিনা তা সত্য (প্রত্যাশিত) ফিরে আসবে কিনা তা পরীক্ষা করতে জেএস ব্যবহার করে।

এখন আসুন আমরা বলতে পারি যে স্পেশাল এইচটিএমএল পৃষ্ঠাটি যখন লোড হয় তখন পিতামাতার ফ্রেমটি পরীক্ষা করে (অস্তিত্ব এবং এর নামের জন্য, এবং যদি এটি "বার" হয় তবে বার বারে এটি নিজেকে পুনরায় লোড করে eg

if(window.parent && window.parent.name == 'bar'){
  window.parent.location = self.location;
}

এ পর্যন্ত সব ঠিকই. এখন বাগ আসে।

আসল লিঙ্কটি স্বাভাবিকের মতো ক্লিক করার পরিবর্তে এবং "বাজ" ফ্রেমে স্পেশাল এইচটিএমএল পৃষ্ঠাটি লোড করার পরিবর্তে আপনি এটি মাঝখানে ক্লিক করেছেন বা এটি একটি নতুন ট্যাবে খুলতে পছন্দ করেছেন chose

যখন নতুন ট্যাবটি লোড হয় ( কোনও প্যারেন্ট ফ্রেম ছাড়াই! ) পৃষ্ঠা পৃষ্ঠা লোডিংয়ের একটি অন্তহীন লুপ প্রবেশ করবে! কারণ জাভাস্ক্রিপ্টে আইআর ফ্রেম কাঠামোটিকে "অনুলিপি করে" যেমন নতুন ট্যাবটির কোনও পিতা বা মাতা থাকে এবং সেই পিতামাতার নাম "বার" থাকে।

সুসংবাদ, এটি যাচাই করা হচ্ছে:

if(self == top){
  //this returns true!
}

নতুন ট্যাবে সত্য ফিরে আসে, এবং এইভাবে আপনি এই বিজোড় অবস্থার জন্য পরীক্ষা করতে পারেন।


এর মধ্যে কি বাগ ঠিক করা হয়েছে? আমি IE8 এ এটি পুনরুত্পাদন করতে পারি না। আমি সবসময় সঠিক পেতে window.parent
ব্যবহারকারী 123444555621

1
নিশ্চিত নয় - আমি আবার আই 9 এর বিপরীতে আমার টেস্ট স্যুটটি চালাব এবং একটি আপডেট পোস্ট করব।
স্কানলিফ

18

ফায়ারফক্স .0.০ এক্সটেনশন (অ্যাডন-এসডিকে ১.০) এর লিখিত লিখিত স্ক্রিপ্টের ভিতরে স্বীকৃত উত্তরটি আমার পক্ষে কাজ করে না: ফায়ারফক্স প্রতিটি লিখিত স্ক্রিপ্টটি সম্পাদন করে: শীর্ষ স্তরের উইন্ডো এবং সমস্ত আইফ্রেমে।

সামগ্রী স্ক্রিপ্টের অভ্যন্তরে আমি নিম্নলিখিত ফলাফলগুলি পেয়েছি:

 (window !== window.top) : false 
 (window.self !== window.top) : true

এই আউটপুট সম্পর্কে আশ্চর্যের বিষয় হ'ল কোডটি যদি কোনও আইফ্রেমে বা শীর্ষ স্তরের উইন্ডোর অভ্যন্তরে চালিত হয় তবে তা সর্বদা সমান।

অন্যদিকে গুগল ক্রোম শীর্ষস্থানীয় উইন্ডোর মধ্যে একবারে আমার কন্টেন্ট স্ক্রিপ্টটি সম্পাদন করে বলে মনে হয়, সুতরাং উপরেরগুলি এগুলি কার্যকর হয় না।

উভয় ব্রাউজারে একটি সামগ্রী স্ক্রিপ্টে অবশেষে আমার জন্য যা কাজ করেছে তা হ'ল:

 console.log(window.frames.length + ':' + parent.frames.length);

এই প্রিন্টগুলি iframes ছাড়াই 0:0একটি শীর্ষ স্তরের উইন্ডোতে একটি ফ্রেম প্রিন্ট করে 1:1এবং একটি নথির একমাত্র iframe এ এটি মুদ্রণ করে 0:1

এটি আমার এক্সটেনশনটিকে উভয় ব্রাউজারে যদি কোনও আইফ্রেমে উপস্থিত থাকে এবং তা যদি ফায়ারফক্সে এটি যদি কোনও আইফ্রেমের অভ্যন্তরে চালিত হয় তবে তা নির্ধারণ করতে দেয়।


1
চেষ্টা করুন document.defaultView.self === document.defaultView.topবা window !== window.top। ফায়ারফক্সের অ্যাড-অন এসডিকে সামগ্রীর স্ক্রিপ্টে, গ্লোবাল selfঅবজেক্ট এমন একটি জিনিস যা মূল স্ক্রিপ্টের সাথে যোগাযোগের জন্য ব্যবহৃত হয়।
রব ডাব্লু

13

আমি নিশ্চিত না যে এই উদাহরণটি পুরানো ওয়েব ব্রাউজারগুলির জন্য কীভাবে কাজ করে তবে আমি এটি IE, ফায়ারফক্স এবং ক্রোম ছাড়াই এবং ইস্যু ছাড়া ব্যবহার করি:

var iFrameDetection = (window === window.parent) ? false : true;

6
বা সহজভাবে!(window===window.parent)
ক্যালকুলেটরফলাইন

11
উইন্ডো! == উইন্ডো.পিতা
ইভান লিওনেনকো

5

আমি এটি ব্যবহার করছি:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

কেন আপনি এই করছেন .indexOf("HTMLIFrameElement"):?
লুক

.indexOf ('foobarbaz')> -1 হ'ল "সাবস্ট্রিং ম্যাচ" (যেমন 'ফুবারবাজ' স্ট্রিংয়ের মধ্যে কোথাও পাওয়া যাবে?) যাচাই করার একটি উপায়, তবে নিয়মিত অভিব্যক্তি ব্যবহার না করেই। এটি যৌক্তিকভাবে। ম্যাচ (/ foobarbaz /) এর সমতুল্য। এটি (অভ্যস্ত :-) ব্রাউজারগুলির বিস্তৃত পরিসরে কাজ করে এবং এখনও অভ্যাসের বাইরে বা নিয়মিত এক্সপ্রেশন যন্ত্রপাতিটির কার্যকারিতা সম্পর্কে ভয়ের কারণে ব্যবহার করা যেতে পারে।
চক কলার্স

2

এটি কীভাবে সম্পাদন করা যায় তার উদাহরণ হিসাবে এই জাভাস্ক্রিপ্ট ফাংশনটি ব্যবহার করুন।

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

2

এখনকার সেরা লেগ্যাসি ব্রাউজার ফ্রেম ব্রেকিং স্ক্রিপ্ট

অন্যান্য সমাধানগুলি আমার পক্ষে কার্যকর হয়নি। এইটি সমস্ত ব্রাউজারে কাজ করে:

ক্লিকজ্যাকিংয়ের বিরুদ্ধে রক্ষার একটি উপায় হ'ল প্রতিটি পৃষ্ঠায় একটি "ফ্রেম-ব্রেকার" স্ক্রিপ্ট অন্তর্ভুক্ত যা ফ্রেম করা উচিত নয়। নিম্নলিখিত পদ্ধতিটি এমন কোনও ওয়েবপৃষ্ঠাটিকে এমনকি লিগ্যাসি ব্রাউজারগুলিতে ফ্রেম হওয়া থেকে বিরত রাখবে, যা এক্স-ফ্রেম-বিকল্পগুলি-শিরোনামকে সমর্থন করে না।

নথি হেড উপাদানটিতে, নিম্নলিখিতগুলি যুক্ত করুন:

<style id="antiClickjack">body{display:none !important;}</style>

প্রথমে নিজে শৈলীর উপাদানটিতে একটি আইডি প্রয়োগ করুন:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

এইভাবে, সমস্ত কিছু নথি হেডে থাকতে পারে এবং আপনার এপিআইতে আপনার কেবল একটি পদ্ধতি / ট্যাগলিব প্রয়োজন।

তথ্যসূত্র: https://www.codemagi.com/blog/post/194


1
ফ্রেমিং কেবল হুমকি নয়, আপত্তি জানার বিষয়ে কী বোঝায় (HTML5 অবজেক্ট ট্যাগ ব্যবহার করে যা iframe ট্যাগ প্রতিস্থাপন করে) .. আমি মনে করি এটি এর বিপরীতে কাজ করবে না ..
রায়মন্ড নিজল্যান্ড 17


1

যেহেতু আপনি কোনও ফেসবুক অ্যাপের প্রসঙ্গে জিজ্ঞাসা করছেন, প্রাথমিক অনুরোধ করা হয়ে গেলে আপনি সার্ভারে এটি সনাক্তকরণ বিবেচনা করতে চাইতে পারেন। ফেসবুক যদি আইফ্রেমে ফোন করা হয় তবে fb_sig_user কী সহ একাধিক কোয়েরি স্ট্রিং ডেটা দিয়ে যাবে।

যেহেতু আপনার অ্যাপ্লিকেশনটিতে আপনার সম্ভবত এই ডেটাটি পরীক্ষা এবং ব্যবহার করা দরকার, তাই রেন্ডার করার উপযুক্ত প্রসঙ্গটি নির্ধারণ করতে এটি ব্যবহার করুন।


1

আমি আসলে উইন্ডো.প্যারেন্টটি যাচাই করতাম এবং এটি আমার পক্ষে কাজ করেছিল, তবে ইদানীং উইন্ডোটি একটি চক্রাকার বস্তু এবং সর্বদা পিতামাতার কী, আইফ্রেমে বা কোনও আইফ্রেমে থাকে না।

মতামতগুলি উইন্ডো.পিতা কাজগুলির সাথে কঠোর তুলনা করার পরামর্শ দেয়। নিশ্চিত নয় যে এটি কাজ করবে কিনা যদি iframe ঠিক পিতামাতার মতো একই ওয়েবপৃষ্ঠা হয়।

window === window.parent;

ক্রোমে মূল উইন্ডো প্রসঙ্গে window.parent === windowসত্য। সুতরাং আপনার উত্তরটি ভুল। এবং এই তুলনাটি চেকের জন্য ব্যবহার করা যেতে পারে (কমপক্ষে ক্রোমে, এটি অন্য ব্রাউজারগুলিতে পরীক্ষা করে নি)।
মার্কোসায়ান আর্টুর

আইফ্রেমের প্রসঙ্গে কাজ করে না, তবে `যদি (উইন্ডো === উইন্ডো.পিতা) {` করে। আমি কেন আপনাকে চিহ্নিত করছি না কেন জানি না কেন এটি কাজ করে না
www-0av-Com

-1

এটি কোডের একটি প্রাচীন অংশ যা আমি কয়েকবার ব্যবহার করেছি:

if (parent.location.href == self.location.href) {
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

এনেকো অ্যালোনসোতে যুক্ত করতে: এই কাজ করে(parent.location == self.location)
piotr_cz

@ পাইওটার_সিজেড, কেবলমাত্র একই-উত্স নীতিতে অ্যাক্সেসের অনুমতি দিলে এটি কাজ করে parent.location। অন্যথায় একটি ব্যতিক্রম নিক্ষেপ করা হয়েছে
ড্যান

-1

আপনি যদি জানতে চান যে ব্যবহারকারী আপনার অ্যাপ্লিকেশনটিকে ফেসবুক পৃষ্ঠা ট্যাব থেকে অ্যাক্সেস করছে বা স্বাক্ষরিত অনুরোধটির জন্য ক্যানভাস চেক করছে। যদি আপনি এটি না পান, সম্ভবত ব্যবহারকারী ফেসবুক থেকে অ্যাক্সেস করছে না। সাইন ইন হওয়া_জুরি ক্ষেত্রের কাঠামো এবং ক্ষেত্রের সামগ্রী নিশ্চিত করার জন্য তা নিশ্চিত করুন।

পিএইচপি-এসডিকে দিয়ে আপনি স্বাক্ষরিত অনুরোধটি এই জাতীয়ভাবে পেতে পারেন:

$signed_request = $facebook->getSignedRequest();

আপনি এখানে স্বাক্ষরিত অনুরোধ সম্পর্কে আরও পড়তে পারেন:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

এবং এখানে:

https://developers.facebook.com/docs/reference/login/signed-request/


-1

এটি আমার পক্ষে সহজ সমাধান হিসাবে শেষ হয়েছে।

    <p id="demofsdfsdfs"></p>

<script>

if(window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>

-4
if (window.frames.length != parent.frames.length) { page loaded in iframe }

তবে কেবল যদি আপনার পৃষ্ঠা এবং পৃষ্ঠায় আইফ্রেমের সংখ্যা পৃথক হয় যারা আপনাকে আইফ্রেমে লোড করছে। এই কোডের ফলাফলের 100% গ্যারান্টি থাকতে আপনার পৃষ্ঠায় কোনও আইফ্র্যাম তৈরি করবেন না


উইন্ডোটি আইফ্রেমের অভ্যন্তরে রয়েছে কিনা তা নির্ধারণের জন্য খুব মার্জিত সমাধান নয় এবং আপনি প্যারেন্ট.ফ্রেমগুলি থেকে পড়তে সক্ষম হবেন এমন কোনও গ্যারান্টি নেই।
পার্সি

-4

প্রতিটি পৃষ্ঠায় এই জাভাস্ক্রিপ্ট লিখুন

if (self == top)
  { window.location = "Home.aspx"; }

তারপরে এটি স্বয়ংক্রিয়ভাবে হোম পৃষ্ঠায় পুনঃনির্দেশ করবে।


4
আপনার পুনর্নির্দেশ কাজ করবে যখন আপনি যদি ফ্রেম না হন। সুতরাং আমি আপনার সাইটে নেভিগেট করতে সক্ষম হব না। দ্বিতীয়ত, প্যারেন্ট পৃষ্ঠা থেকে পুনঃনির্দেশ থেকে বিরত থাকার জন্য কৌশলগুলি বিদ্যমান exists
মারিয়াস বালিয়েটাইস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.