javascripthtmliframeframebusting

Cross-origin anti frame busting


I have a simple chrome extension that injects an iframe into the active page (not the important part)
I want to embed a game located at http://diep.io, but this site has some frame-busting techniques implemented. I still want to be able to load this into an iframe to make this mini-window like thing using the Iframe (open to other tags such as embed or webview(however you can get that one to work) ).

So how might I get an anti-frame busting type thing going here?
Obviously, this is cross-origin so editing the DOM inside isn't really the easiest/ shouldn't be possible. I've tried the sandbox attribute but this just causes problems with the previous page inside the iframe (link-central type page) and makes it impossible to use.

So the main question here is how to do cross-origin embedded page anti frame busting without the sandbox attribute?


Solution

  • I have found a solution. My iframe is navigated with a button (with the HTML ID of 'deHBox') And my iframe is linked with a variable labeled 'Ifr'.

        document.getElementById("deHBox").addEventListener("click", function(){
        sandbox(false);
        Ifr.src = url;
        Ifr.style.height = 'calc(100% - 23px)';
        Ifr.style.width = '100%';
        setTimeout(function() {sandbox(true)}, 500);
    });
    
    
        setTimeout(function() {sandbox(true)}, 500);
    
    
    function sandbox(on) {
        if (on == true) {
            Ifr.sandbox = "allow-scripts allow-forms allow-pointer-lock allow-popups allow-same-origin";
        } else {
            Ifr.removeAttribute('sandbox');
        }
    }
    

    I just added this to my injected.js file...