Is utilizing the "sandbox attribute for iframes" a secure practice?

lies an interesting update regarding a technique mentioned in Dean's blog. It seems that the said technique may not work well in Safari based on comments received. Therefore, there is a query about its compatibility with modern browsers, especially Safari. A recent blog post mentions support for sandboxed natives in various browsers, including Safari 2.0+. However, it also states that the iframe technique is not supported by Safari, leading to some unconventional methods involving faked constructors and __proto__. This raises questions about the shared nature of prototypes between different windows, particularly in cross-domain iframe scenarios. The discussion delves into modifying prototypes in one frame without impacting those in another, addressing security concerns surrounding potential vulnerabilities. The term "work" here refers to the ability to modify prototypes independently in separate windows. In the original post, the focus was on extending native types in JavaScript without altering the types themselves directly. Various solutions were considered, ultimately leading to a strategy involving creating a separate window to add functionality to prototypes of native constructs. An example showcases the extension of Array as My.Array with an each function and String as My.String with an alert function. There are queries about the precedent of this approach, its naming conventions, availability of additional information, potential pitfalls, and alternative methods to obtain a distinct global scope. Subsequent updates mention this method being referred to as an iframe sandbox, distinct from the HTML5 iframe sandbox attribute. Relevant links to further explore these topics are provided at the end of the text.

Answer №1

After testing this page in multiple browsers (Safari, Opera, IE7-9, Chrome), the results were consistent across all except for Firefox. In Firefox, the prototypes are sandboxed and the second test fails for unknown reasons. The iframe prototype does not get immediately augmented in Firefox, but if augmentation was not intended, then it may not matter. It is recommended to run additional tests in more browsers to ensure compatibility.

It should be noted that this method does not thoroughly test any quirks, such as how My.Array().slice would behave and could potentially return different array objects depending on the browser. This approach may pose risks and is considered unreliable.

In conclusion, this process seems excessive and may involve unnecessary effort with little to no real benefits.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
(function(){
    var ifr = document.createElement("iframe"),
        callbacks = [],
        hasReadyState = "readyState" in ifr;

    ifr.style.display = "none";


    document.body.appendChild(ifr);
    ifrDoc = ifr.contentWindow.document;
    ifrDoc.open();
    ifrDoc.write( "<!DOCTYPE html><html><head></head><body>"+"<"+"script"+">var w = this;"+"</"+"script"+">"+"</body></html>");
    ifrDoc.close();

    if( hasReadyState ) {

        ifr.onreadystatechange = function(){
            if( this.readyState === "complete" ) {
                fireCallbacks();
            }
        };

    }

    function fireCallbacks(){
        var i, l = callbacks.length;
        window.My = ifr.contentWindow.w;

        for( i = 0; i < l; ++i ) {
            callbacks[i]();
        }

        callbacks.length = 0;


    }

    function checkReady(){

        if( hasReadyState && ifr.readyState === "complete" ) {
        fireCallbacks();
        }
        else if( !hasReadyState ) {
        fireCallbacks();
        }
    }

    window.MyReady = function(fn){
        if( typeof fn == "function" ) {
            callbacks.push( fn );
        }
    };


window.onload = checkReady; //Change this to DOMReady or whatever
})()


MyReady( function(){

    My.Object.prototype.test = "hi";

    var a = new My.Object(),
        b = new Object();

    console.log( Math.random(), My.Object !== Object && b.test !== "hi", a.test === "hi" );

});
</script>

</body>
</html>

Answer №2

When working with frames that contain content from separate domains, it is important to remember that modern browsers prioritize security and do not allow interaction between them at the JavaScript level. To confirm how this would work in your specific case, conducting a test would be advisable. However, based on general knowledge, it should be safe to proceed with your described scenario in most browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for improving modularity in my frontend JavaScript code?

I'm currently developing a unique Node.js / Express application that visually represents text notes as a network to offer users a clear summary of the connections between different notes. The project heavily relies on frontend functionalities, requir ...

Babylon entities failing to run

Encountering a strange issue in my current project. I am working on a react application that incorporates Babylonjs for 3D rendering. While I am able to successfully load objects into the scene, I am facing a problem when attempting to create a PBR Materia ...

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

What is the best way to merge multiple statements into one before passing them into a JavaScript method?

I am faced with several javascript statements like the ones listed below: $('#' + xxx_slot_name1).children().remove(); $('#' + xxx_ad_slot_name2).children().remove(); $('#' + xxx_ad_slot_name3).children().remove(); $('#& ...

Can these similar functions be combined into a single, unified function?

Currently, I have 3 functions - and more to come soon - that all perform the same task. However, they control different enumerated divs/variables based on which div triggers the mousewheel event. I am wondering if there is a way to condense these very si ...

Dynamically binding image URLs in VUEJS

Below is the JSON data containing button names and their corresponding image URLs: buttonDetails= [ { "name": "button1", "images": [{ "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bb ...

What are some effective techniques for handling asynchronous operations while utilizing [displayWith] in an autocomplete

In my angular reactive form, I am struggling with an autocomplete functionality. I want to show the name (myObject.name) but use the ID (myObject.id) as the value. However, when the form is populated with existing values, there is a delay in retrieving th ...

Creating a type definition for the createSelector function based on the useQuery result

Struggling to find the correct typings for the createSelector res parameter from redux-js, especially in TypeScript where there are no examples or explanations available. The only guidance is provided in JS. const selectFacts = React.useMemo(() => { ...

Preserve the height of the previous div following an AJAX request

I am currently facing an issue where I have a script that utilizes ajax to receive a response containing a cart string (html code) with items from the cart. Inside the response handler, there is another script that sets the height of each div in the cart s ...

Troubleshooting: jQuery.load function not functioning properly within ASP.NET MVC

I'm facing an issue with my code setup. Currently, I have the following components in different files: @Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html"))) This is included in my Razor file. <li><a href="#">Personal Re ...

Utilizing BehaviourSubject for cross-component communication in Angular

My table is populated with data from a nodeJS API connected to methods inside my service. I attempted using a Behavior Subject in my service, initialized as undefined due to the backend data retrieval: Service: import { Injectable } from "@angular/core" ...

What are some ways to lazily load directives in AngularJS?

Currently, I am exploring the capabilities of angularjs and aiming to dynamically load directives only when they are required instead of loading all of them initially on the page. My focus is on creating custom directives for the plugins that I use frequen ...

Having trouble receiving the response from PHP after making an AJAX request

Can you help me figure out why I'm not receiving any return value from the ajax data post? Take a look at my code and let me know where I might be going wrong. Here is a snippet of my jQuery code: $("#btnlogin").click(function(){ var email = $( ...

How can I implement a jQuery modal dialog that loads a form page with pre-existing jQuery code for Autocomplete functionality?

I am facing an issue where I have a dynamically generated form on a web page and I want to display it using the jQuery UI modal dialog. Previously, I was suggested a solution that worked when my form did not already contain jQuery UI components like Autoc ...

showing javascript strings on separate lines

I need assistance with displaying an array value in a frontend Angular application. How can I insert spaces between strings and show them on two separate lines? x: any = [] x[{info: "test" + ',' + "tested"}] // Instead of showing test , teste ...

Arranging and Filtering an Object Array Based on their Attributes

Here is an example of a JSON array called items: var items = [ { Id: "c1", config:{ url:"/c1", content: "c1 content", parentId: "p1", parentUrl: "/p1", parentContent: "p1 content", } }, { Id: "c2", ...

Ensuring props are resilient even when an incorrect type is provided during testing

In my development using the MERN stack and Redux, I encountered an issue while testing props on one of my components. Despite defining all types and running tests, they still pass even with incorrect data entered. I have tried specifying the shape of each ...

Go to a different webpage containing HTML and update the image source on that particular page

I am facing an issue with my html page which contains multiple links to another page. I need to dynamically change the image references on the landing page based on the link the user clicks. The challenge here is that the link is inside an iframe and trigg ...

What is the best way to add JSON data to a table?

I have developed a php script to create json data. However, I am facing an issue while trying to display this generated json data in a table. While my php code successfully generates the data, it is unable to insert it into the table. I would appreciate an ...

Using vanilla JavaScript with AJAX, the second asynchronous post will only be sent once the first post has been successfully sent

I am in the process of creating a HotSpot that offers internet access once users input their email addresses. To make this function properly, I need to execute two separate AJAX posts: The first one sends hidden username and password details to the rout ...