Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
clipboard-polyfill
Advanced tools
clipboard-polyfill
clipboard-polyfill
to copy text! ⚠️Note: As of 2020, you can use navigator.clipboard.writeText(...)
in the stable versions of all major browsers. This library will only be useful to you if you want to:
text/html
in Firefox,ClipboardItem
API in Firefox, orjsdom
).See the Compatibility section below for more details.
Makes copying on the web as easy as:
clipboard.writeText("hello world");
This library is a ponyfill/polyfill for the modern Promise
-based asynchronous clipboard API.
If you use npm
, install:
npm install clipboard-polyfill
Sample app that copies text to the clipboard:
import * as clipboard from "clipboard-polyfill";
function handler() {
clipboard.writeText("This text is plain.").then(
() => { console.log("success!"); },
() => { console.log("error!"); }
);
}
window.addEventListener("DOMContentLoaded", function () {
const button = document.body.appendChild(document.createElement("button"));
button.textContent = "Copy";
button.addEventListener("click", handler);
});
Notes:
button
click).
async
/await
syntaximport * as clipboard from "clipboard-polyfill";
async function handler() {
console.log("Previous clipboard text:", await clipboard.readText());
await clipboard.writeText("This text is plain.");
}
window.addEventListener("DOMContentLoaded", function () {
const button = document.body.appendChild(document.createElement("button"));
button.textContent = "Copy";
button.addEventListener("click", handler);
});
import * as clipboard from "clipboard-polyfill";
async function handler() {
console.log("Previous clipboard contents:", await clipboard.read());
const item = new clipboard.ClipboardItem({
"text/html": new Blob(
["<i>Markup</i> <b>text</b>. Paste me into a rich text editor."],
{ type: "text/html" }
),
"text/plain": new Blob(
["Fallback markup text. Paste me into a rich text editor."],
{ type: "text/plain" }
),
});
await clipboard.write([item]);
}
window.addEventListener("DOMContentLoaded", function () {
const button = document.body.appendChild(document.createElement("button"));
button.textContent = "Copy";
button.addEventListener("click", handler);
});
Check the Clipboard API specification for more details.
Notes:
async
functions for the await
syntax.text/plain
and text/html
are the only data types that can be written to the clipboard across most browsers.read()
may only return a subset of supported data types, even if the clipboard contains more data types. There is no way to tell if there were more data types.overwrite-globals
versionIf you want the library to overwrite the global clipboard API with its implementations, import clipboard-polyfill/overwrite-globals
. This will turn the library from a ponyfill into a proper polyfill, so you can write code as if the async clipboard API were already implemented in your browser:
import "clipboard-polyfill/overwrite-globals";
async function handler() {
const item = new window.ClipboardItem({
"text/html": new Blob(
["<i>Markup</i> <b>text</b>. Paste me into a rich text editor."],
{ type: "text/html" }
),
"text/plain": new Blob(
["Fallback markup text. Paste me into a rich text editor."],
{ type: "text/plain" }
),
});
navigator.clipboard.write([item]);
}
window.addEventListener("DOMContentLoaded", function () {
const button = document.body.appendChild(document.createElement("button"));
button.textContent = "Copy";
button.addEventListener("click", handler);
});
This approach is not recommended, because it may break any other code that interacts with the clipboard API globals, and may be incompatible with future browser implementations.
Promise
includedIf you need to grab a version that "just works", download clipboard-polyfill.window-var.promise.es5.js
and include it using a <script>
tag:
<script src="./clipboard-polyfill.window-var.promise.es5.js"></script>
<button onclick="copy()">Copy text!</button>
<script>
// `clipboard` is defined on the global `window` object.
function copy() {
clipboard.writeText("hello world!");
}
</script>
Thanks to the conveniences of the modern JS ecosystem, we do not provide tree shaken, minified, or CommonJS builds anymore. To get such builds without losing compatibility, pass clipboard-polyfill
builds through esbuild
. For example:
mkdir temp && cd temp && npm install clipboard-polyfill esbuild
# Minify the ES6 build:
echo 'export * from "clipboard-polyfill";' | npx esbuild --format=esm --target=es6 --bundle --minify
# Include just the `writeText()` export and minify:
echo 'export { writeText } from "clipboard-polyfill";' | npx esbuild --format=esm --target=es6 --bundle --minify
# Minify an ES5 build:
cat node_modules/clipboard-polyfill/dist/es5/window-var/clipboard-polyfill.window-var.promise.es5.js | npx esbuild --format=esm --target=es5 --bundle --minify
# Get a CommonJS build:
echo 'export * from "clipboard-polyfill";' | npx esbuild --format=cjs --target=es6 --bundle
clipboard-polyfill
?Browsers have implemented several clipboard APIs over time, and writing to the clipboard without triggering bugs in various old and current browsers is fairly tricky. In every browser that supports copying to the clipboard in some way, clipboard-polyfill
attempts to act as close as possible to the async clipboard API. (See above for disclaimers and limitations.)
See this presentation for for a longer history of clipboard access on the web.
clipboard-polyfill
adds support.Write support by earliest browser version:
Browser | writeText() | write() (HTML) | write() (other formats) |
---|---|---|---|
Safari 13.1 | ☑️ | ☑️ | ☑️ (image/uri-list , image/png ) |
Chrome 86ᵃ / Edge 86 | ☑️ | ☑️ | ☑️ (image/png ) |
Chrome 76ᵃ / Edge 79 | ☑️ | ✅ | ☑️ (image/png ) |
Chrome 66ᵃ / Firefox 63 | ☑️ | ✅ | ❌ |
Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41 | ✅ | ✅ᵇ | ❌ |
IE 9 | ✅ᶜ | ❌ | ❌ |
Read support:
Browser | readText() | read() (HTML) | read() (other formats) |
---|---|---|---|
Safari 13.1 | ☑️ | ☑️ | ☑️ (image/uri-list , image/png ) |
Chrome 76 ᵃ / Edge 79 | ☑️ | ❌ | ☑️ (image/png ) |
Chrome 66ᵃ | ☑️ | ❌ | ❌ |
IE 9 | ✅ᶜ | ❌ | ❌ |
Firefox | ❌ | ❌ | ❌ |
window.Promise
if you want the library to work.clipboard-polyfill
will always report success in this case.ClipboardItem
constructor.text/html
data type is not written using the expected CF_HTML
format. clipboard-polyfill
does not try to work around this, since 1) it would require fragile browser version sniffing, 2) users of Edge are not generally stuck on version < 17, and 3) the failure mode for other browsers would be that invalid clipboard HTML is copied. (Edge Bug #14372529, #73)clipboard-polyfill
uses a variety of heuristics to work around compatibility bugs. Please let us know if you are running into compatibility issues with any of the browsers listed above.
Browser | First version supportingnavigator.clipboard.writeText(...) | Release Date |
---|---|---|
Chrome | 66+ | April 2018 |
Firefox | 53+ | October 2018 |
Edge | 79+ (first Chromium-based release) | January 2020 |
Safari | 13.1+ | March 2020 |
This project dates from a time when clipboard access in JS was barely becoming possible, and ergonomic clipboard API efforts were stalling. (See this presentation for a bit more context.) Fortunately, an ergonomic API with the same functionality is now available in all modern browsers since 2020:
document.execCommand("copy")
call (with many, many issues).clipboard.js
(half a year before @zenorocha picked the same name 😛).crbug.com/593475
).clipboard-polyfill
to reflect a v2
API overhaul aligned with the draft spec.navigator.clipboard.writeText()
.navigator.clipboard.write()
(including text/html
support).Thanks to Gary Kacmarcik, Hallvord Steen, and others for helping to bring the async clipboard API to life!
If you only need to copy text in modern browsers, consider using navigator.clipboard.writeText()
directly: https://caniuse.com/mdn-api_clipboard_writetext
If you need copy text in older browsers as well, you could also try this gist for a simple hacky solution.
FAQs
A polyfill for the asynchronous clipboard API
We found that clipboard-polyfill demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.