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...

Embedded DevTools is blocked from using clipboard APIs #4540

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions