document.execCommand() should do nothing when the document is invisible

[masayuki-nakano]

When we're investigating Mozilla's crash bug, I found a incompatible issue between browsers. When web apps does execCommand("insertText", false, "foo") in invisible <iframe>, Firefox and Chrome do nothing. However, Safari and Edge oddly they accept execCommand and inputs from user into the hidden document.

testcase: https://jsfiddle.net/d_toybox/edzpr9h3/9/

I think that browsers shouldn't accept any input including execCommand() in invisible document since it might try to steal user input. I.e., I think that the behavior of Firefox and Chrome is better.

[masayuki-nakano]

Ccing @travisleithead, @rniwa and @garykac.

[rniwa]

What do you by invisible though? Outside of the viewport? Occluded by other elements? We don't load iframe that's dispaly: none anyway.

@whsieh

[whsieh]

What do you by invisible though? Outside of the viewport? Occluded by other elements? We don't load iframe that's dispaly: none anyway.

@whsieh

^ Also add opacity: 0, and being completely clipped within an overflow: hidden container to that list as well. In fact, this is how many major rich text editors that customize text selection/input around the web (such as Google Docs and CodeMirror) work.

[masayuki-nakano]

I tried just display: none case (after loading). I have no idea for minimized document like height: 0. And I don't think that outside of viewport is matter. I was really surprised that Edge and Safari does not stop handling user input even after parent <iframe> is invisible due to display: none.

[johanneswilm]

In fact, this is how many major rich text editors that customize text selection/input around the web (such as Google Docs and CodeMirror) work.

For this reason it seems like a bad idea to turn this off.

At the same time, it should be noted that there are 0 (zero) occurrences of the browser's execCommand in the CodeMirror source code [1]. There are a number of occurrences of cm.exexCommand which is a CodeMirror internal JavaScript command which only happens to share the same name as the browser native command. I cannot tell for sure about Google Docs as the source code isn't open. So again - document.execCommand does not seem to be used a lot if at all by any of the editors we have found over the past few years.

[1] https://github.com/codemirror/CodeMirror/search?p=2&q=execCommand&unscoped_q=execCommand

[whsieh]

At the same time, it should be noted that there are 0 (zero) occurrences of the browser's execCommand in the CodeMirror source code [1].

Ah, I was referring more to the fact that many editors out there use hidden contenteditable areas to override and customize editing behavior (citing CodeMirror and Google Docs as examples).

I cannot tell for sure about Google Docs as the source code isn't open. So again - document.execCommand does not seem to be used a lot if at all by any of the editors we have found over the past few years.

I think Google Docs would surely use execCommand to implement their in-page Edit > Copy and Edit > Paste menu items. The alternative (navigator.clipboard API) isn’t currently implemented in Safari, but the Copy button still works.

[johanneswilm]

Ah, I was referring more to the fact that many editors out there use hidden contenteditable areas to override and customize editing behavior (citing CodeMirror and Google Docs as examples).

That's also how I understood your comment. I just wanted to make sure that no-one read this thread and got the impression that execCommand is a central part of the leading web apps in 2019.

I think Google Docs would surely use execCommand to implement their in-page Edit > Copy and Edit > Paste menu items. The alternative (navigator.clipboard API) isn’t currently implemented in Safari, but the Copy button still works.

Clipboard actions are known to have required execCommand, and yes, I think you are right about that. But I would be surprised if they use it for any of the other things covered by execCommand.