The cut, copy, and paste events fire whenever the user initiates a clipboard action in the browser - typically with right-click menus or the keyboard shortcuts mentioned above. Try copying image data from a graphics application, then use the paste button. This works in a similar way to the text demonstration, in that copy and paste buttons must point to DOM elements using a CSS selector in data-copyblob and data-pasteblob attributes. Refer to clipboardblob.js for the JavaScript. View the Clipboard API image demonstration (supported in Chromium-based browsers). The Clipboard API is available when navigator.clipboard returns a truthy result. It’s also possible to examine and request the status using the Permissions API. It shouldn’t cause any issues, given that the API is asynchronous and returns a Promise. This alert is shown when a page first requests clipboard access. When necessary, the user will be prompted for permission to read clipboard data: The API is only available to the active browser tab (not background tabs) and can only be triggered by a user interaction such as a click. When running in an iframe, the parent page must also grant clipboard-read and/or clipboard-write permissions: To avoid potential issues, the Clipboard API can only be used on pages served over HTTPS ( localhost is also permitted). A nefarious page could replace copied text with a dangerous command or even an executable file. Pages should be restricted when adding data to the clipboard.Users often copy passwords or private information so no page should be able to arbitrarily read clipboard data.Offering easy-to-use cut and paste icons can be useful.Īdditionally, you may want to modify content when a clipboard action is completed, such as adding or removing formatting.Īccessing the clipboard programmatically raises several security concerns: They may also be using a touch-screen device where keyboard shortcuts aren’t available. Those with less computing experience won’t necessarily have that knowledge. Why Would an App Need to Access the Clipboard?Īs a developer, you’ll know how the clipboard works and regularly use the following keyboard shortcuts: It’s new, and no browser supports all features, but it’s easier to use and more robust. It’s finally been superseded by a new asynchronous Clipboard API. the API could never be considered elegant.permissions access varies across browsers, and.support is patchy, especially on older versions of Safari on macOS and iOS.clipboard access is synchronous, which has performance and security implications.Accessing the OS clipboard using browser JavaScript has been possible for several years using document.execCommand().