6/27/2023 0 Comments Iframe example![]() content from sites which deliver content through iFrames such as Google Picasa web albums, YouTube etc.another Moodle course, a network file of html page content from network locations outside the current Moodle course e.g.calendars from external sites such as Google calendar, Microsoft Outlook web calendars, Apple Mobileme calendars etc.In Moodle, it is a good way to display content such as: run it within the directory and choose to display window.IFrame ( Inline Frame) is piece of HTML code that creates a frame or window within an HTML page to display content from another URL.setup a small local server (I use for this ) for both of the files.copy the code from both files (I named them window.html and iframe.html) into a directory.In order for the iframe.html to show a response we also need to setup a receiveMessage() function there and bind it to the iframe’s window via window.addEventlistener(‘message’, receiveMessage, false). We will trigger () with a one second delay from our window.html to visualize the chronology of the functions getting triggered. We use event.source to get a reference to our iframe and trigger the postMessage() function from it. But what if we want to have a two way communication and send something back from our outer window to the iFrame? If we embed our iFrame on the same domain as the window we can use the postMessage() function and event.source for achieving exactly this. So far we looked at a one way communication in which we receive a message from an iFrame. Then we listen via the addEventListener method for the message event and bind the receiveMessage() function to it. We will create a receiveMessage Function on our outer window, check if the event.origin is the domain of our iframe and if event.data is the message we exppect. postMessage() = function we call in order to pass data to another window.event.source = Reference to the window that sent the message.event.data = The data that gets passed through with the postMessage function.event.origin = The origin of the window that sent the message at the time postMessage was called.It is therefore important to verify the event.origin of the window that send the message and only allow controlled event.data to reach our outer window. Allowing the outer window to receive messages from an embedded iframe is a potential risk for cross-site scripting attacks. Listening for a messageįirst we need to setup a listener function on our window (we will call it outer window from now on to differentiate since each iFrame also owns its own window) which executes code when the message event gets fired from our iFrame via postMessage(). It is important to be aware of these pitfalls before we use it in production. PostMessage used incorrectly could potentially make your website vulnerable for crosssite-scripting attacks. The window.postMessage() method enables cross-origin communication between a window object and an embedded iFrame and therefore provides a mechanism to circumvent this restriction. In general the same-origin policy forbids scripts on different pages to access each other unless they share the same protocol, port number and host. ![]() In this article I will explain how to communicate between a window and an embedded iFrame. A common way to display these ads is through iFrames. Many websites, especially blogs or newssites, earn money with advertising.
0 Comments
Leave a Reply. |