5

A snippet I posted just now gives me this error in Firefox when I invoke a JavaScript function (by clicking the checkbox):

"message": "Error: Permission denied to access property Symbol.toPrimitive",
"filename": "https://stacksnippets.net/js",
"lineno": 39,
"colno": 5

and this one in Chrome:

"message": "Uncaught SecurityError: Blocked a frame with origin \"null\" from accessing a cross-origin frame.",
"filename": "https://stacksnippets.net/js",
"lineno": 39,
"colno": 24

and I don't understand why. I don't access any other elements than the ones on the page, and a jsfiddle with identical code works fine, without warnings.

So my questions are

  • What goes wrong? Is this a bug in the snippet system?

  • If it's not a bug, but a security feature, how do I work around it? What could I have written instead of the current JavaScript to make it function just like the jsfiddle?

This is the snippet that produces the error

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>

6
  • I can't seem to reproduce the issue (FireFox 60.0.1 (64-bit))
    – Cerbrus
    Commented May 25, 2018 at 7:05
  • 2
    Repro-ed in Chrome / Win 10
    – rene
    Commented May 25, 2018 at 7:11
  • Can repro on original snippet Chrome 66.0.3359.181 (Officiële build) (64-bits) Windows 7 Commented May 25, 2018 at 8:50
  • 1
    The error occurs only when clicking the checkbox. Sorry if that wasn't clear. I get it in various browser versions under different OSes. Also, some experimenting shows some indication as to what the culprit is (and I managed to the the original snippet working), but that doesn't explain why it works differently in the snippet than in the fiddle. The original snippet is now here: meta.stackexchange.com/a/310574/184981 but I'm not done experimenting. Stand by.
    – Mr Lister
    Commented May 25, 2018 at 8:52
  • 1
    I edited in the original snippet in your question because you modified the original question. Commented May 25, 2018 at 8:55
  • 1
    I can repro under FF 60.0.1 64-bit (Windows 7). Dunno why Stijn and Cerbrus can't (you do need to click the show more to trigger it).
    – Erik A
    Commented May 25, 2018 at 9:19

1 Answer 1

8

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>

11
  • Why are you using +function(){}() instead of (function(){})()?
    – Cerbrus
    Commented May 25, 2018 at 12:03
  • 2
    Good. Side notes: 1) So the fact that it works in jsfiddle is a side effect of jsfiddle not using a sandboxed frame rather than a flaw in StackSnippet. 2) It would also have worked if I really had created a new variable rather than repurposing an existing one, and then I wouldn't have noticed I was doing something wrong!
    – Mr Lister
    Commented May 25, 2018 at 12:16
  • 1
    Because + function also works. It forces the function to be evaluated and saves a couple of brackets. We're not choding LISP here Commented May 25, 2018 at 13:12
  • @MrLister yes and yes. Prefably you'd always encompass your functions within their own scope. Then you won't run into tricky stiff like thos or having to track globals. Commented May 25, 2018 at 13:14
  • 1
    @Tschallacka: I know it also works. I was just curious why you used + over the more commonly used brackets.
    – Cerbrus
    Commented May 25, 2018 at 13:36
  • Ah, okay :-) my main reason is pbs.twimg.com/media/CukkQOkWgAA5C8G.jpg Commented May 25, 2018 at 14:36
  • 2
    Ah, LISP. xkcd.com/297
    – Mr Lister
    Commented May 25, 2018 at 19:10
  • 2
    @MrLister about your side note 1, it is actually because jsfiddle by default wraps your code in an onload event handler, if you had chosen "no wrap in body" option for your js execution (same as what StackSnippets do) you would have experienced the same issue there.
    – Kaiido
    Commented May 26, 2018 at 1:05
  • @Kaiido Hey, you're right. Thanks for the explanation! But you should have posted it as an answer, since it actually provides an answer to my question, and then I could have upvoted.
    – Mr Lister
    Commented May 26, 2018 at 6:18
  • 1
    The answer would have been almost the same as this one regarding this meta-question: not a bug of stacksnippet per se. Besides, I usually don't rep farm, so even less when there is no rep in game ;-)
    – Kaiido
    Commented May 26, 2018 at 6:52
  • @Kaiido I still think your remark is valuable, even if it doesn't gain you rep. Maybe you should consider editing Tschallacka's answer and adding it in.
    – Mr Lister
    Commented May 26, 2018 at 10:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .