Embedded DevTools is blocked from using clipboard APIs

We likely need to add an allow attribute to the iframe we use for embedding DevTools.

I'm apparently unable to make this work. Although clipboard access works inside the main VS Code iframe, it doesn't seem to work for other origins.

I modified the VS Code webview sample to have a button that copies to the clipboard, and also iframe a page that has a button the same:

Webview:

return `<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta http-equiv="Content-Security-Policy" content="default-src ${webview.cspSource} https: 'unsafe-inline'; frame-src ${webview.cspSource} https://gist.githubusercontent.com http://localhost:8000/ https;">
	</head>
	<body bgcolor="blue">
		<button onclick="window.navigator.clipboard.writeText('test');">Copy "test" to clipboard</button>

		<iframe src="http://localhost:8000/index.htm"  allow="clipboard-write" />
	</body>
	</html>`;

And the index.html:

<html>
<body style="background-color: white !important;">
    <h1>My Frame</h1>

    <button onclick="window.navigator.clipboard.writeText('test2222');">Copy "test2222" to clipboard</button>
</body>
</html>

Clicking the button in the outer frame works fine, but the inner frame fails:

Uncaught (in promise) DOMException: Write permission denied.

We've reported another VS Code clipboard issue that may be related (microsoft/vscode#129178). In there, it was noted:

Interestingly, we cannot access navigator.clipboard inside the child iframe in the webview even if we add allow="clipboard-read; clipboard-write;" to the iframe tag in the parent webview. This might be related to the following issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=1074489

However, that bug was apparently fixed. The are comments saying it doesn't work for deeply nested frames:

https://bugs.chromium.org/p/chromium/issues/detail?id=1074489#c40

But a contributor said it works (unfortunately the sample site is no longer available).

https://bugs.chromium.org/p/chromium/issues/detail?id=1074489#c42

Needs some more debugging...

This might be the answer:

https://stackoverflow.com/a/69741484/25124

It seems like because we're cross-origin, the parent allow="clipboard-write" on the VS Code iframe might not pass permissions to us unless it lists our domain. However, editing this in the developer tools doesn't help (but I don't know whether that applies immediately).

There are a fair few issues referenced at the bottom of microsoft/vscode#129178 suggesting this might still not be possible.

Since this same setup seems to work outside of VS Code (nested iframes crossing origins with allow=clipboard-wite) I've opened microsoft/vscode#182642 about this to see if the VS Code devs might consider this a VS Code bug.

Fixed by #4814, but requires the related change in DevTools

Seeing this issue again when trying to call Clipboard.setData from DevTools, which falls back to calling the VS Code workaround

  window.parent?.postMessage(
    {
      'command': 'clipboard-write',
      'data': data,
    }.jsify(),
    '*'.toJS,
  );

which also fails:

copy is not successful NotAllowedError: Failed to execute 'writeText' on 'Clipboard': Document is not focused.
main.dart.js:50566 Copy failed. This may be as a result of a known bug in VS Code. See https://github.com/Dart-Code/Dart-Code/issues/4540 for more information. Now attempting to use a fallback method of copying the that is a workaround for VS Code only.
VM7:49 Uncaught (in promise) DOMException: Failed to execute 'writeText' on 'Clipboard': Document is not focused.
    at <anonymous>:49:24

This looks like a different problem so I've moved to #5209

Navigation Menu

Repository navigation

Embedded DevTools is blocked from using clipboard APIs #4540

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Embedded DevTools is blocked from using clipboard APIs #4540

Description

Activity

DanTup commented on May 16, 2023

DanTup commented on May 16, 2023

DanTup commented on May 16, 2023

DanTup commented on Nov 23, 2023

kenzieschmoll commented on Jul 31, 2024

DanTup commented on Aug 1, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions