Error: Permission Denied to Access Property "Document"

Error: Permission denied to access property "document"

You can still bypass this issue with the help of YQL even though you don't have access to the header part of the receiving window. With the Postmessage method also you need to edit the recipient window script. But using this method you can load any iframe without touching their scripts. Check this out!

<html>
<iframe src="https://google.com/" width="500" height="300"></iframe>

<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
else if (data && data.error && data.error.description) loadHTML(data.error.description);
else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
url = src;
var script = document.createElement('script');
script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
document.body.appendChild(script);
};
var loadHTML = function (html) {
iframe.src = 'about:blank';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
iframe.contentWindow.document.close();
}

loadURL(iframe.src);
</script>
</html>

Error: Permission denied to access property 'document'

I very recently had this issue myself.
Finally I solved it with the postMessage method.

  1. In the document included to the iFrame I check whether it's actually running from an iFrame.

    function inIframe(){
    if(top != self){
    var contentHeight = $('#myIframeContent').height(); //Just this part I did with jQuery as I was sure that the document uses it
    postSize(contentHeight);
    }
    }
  2. If the document is running within an iFrame, call a function that we will call postSize.

    function postSize(height){
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);

    if(typeof target != "undefined" && document.body.scrollHeight){
    target.postMessage(height, "*");
    }
    }
  3. Add the following code to the document that includes your iFrame

    function receiveSize(e){
    if(e.origin === "http://www.mywebsite.net"){
    var newHeight = e.data + 35;
    document.getElementById("myIframeID").style.height = newHeight + "px";
    }
    }

    window.addEventListener("message", receiveSize, false);

Unfortunately I cannot remember the exact sources of all this as I was viewing a lot of different solutions here on Stackoverflow, but also different websites. But this solution works good for me.

Cheers

Snippet produces "Error: Permission denied to access property Symbol.toPrimitive"

The problem is likely caused by your definition of top.
I think you're overwriting global variables which causes the original script to go belly up.

window.top is a legal variable, meaning "the above most window container" when you're using frames, or "this window" when not in frames.

Variables that don't have a scope are defined against the window object.

With your original function you overwrote window.top as defined by the browser, then tried to modify that variable. But that variable is subject to cross domain policies, and the stacksnippet domain does not have an allow cross origin for the Stack Overflow domain. Which in essence means, the stacksnippet domain may not look into who window.top is.

Which then caused your problem.

By placing your snippet in a scoped function everything works fine.

+function() {    var popup = document.querySelector('section img');    var top = popup.offsetTop;
document.getElementById('more').onclick = function() { if (document.getElementById('more').checked) popup.style='top: '+top+'px; margin:0'; else { popup.style=''; top = popup.offsetTop; } };}();
section {  position: relative;}
#more:not(:checked)~p { display: none}
section img { position: absolute; left: 50%; top: 0; bottom: 0; margin: auto 0;}
<section>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  <input id="more" type="checkbox"><label for="more"> Show more</label>  <p>Hoc est clamabunt angustia vocatione in fodienda navis rubrum nanum. De cantavit sunt mortuis, occidit per radialis effluo. Solus superstites es dave lister, qui erat in suspensa animationem in cladis, et suus gravida felis, qui tuto signati in præsidium.    Revixit tres decies annis post, lister scriptor tantum comites a vita forma qui evoluta ex suus cattus, et a hologram simulatio unum mortuorum cantavit. Nuntius fines.</p>  <img src="https://placehold.it/150x100" alt="150x100"/></section>

Permission denied to access property "document"

Guys I found the solution to this problem ages ago, sorry forgot to post it, switching the mozilladriver to chromedriver should solve this issue. Cheers :)



Related Topics



Leave a reply



Submit