The
read()
method of the
Clipboard
interface requests a copy of the clipboard's contents, fulfilling the returned
Promise
with the data.
The method can in theory return arbitrary data (unlike
readText()
, which can only return text).
Browsers commonly support reading text, HTML, and PNG image data.
An
Array
of strings containing MIME types of data formats that should not be sanitized when reading from the clipboard.
Certain browsers may sanitize the clipboard data when it is read, to prevent malicious content from being pasted into the document. For example, Chrome (and other Chromium-based browsers) sanitizes HTML data by stripping
<script>
tags and other potentially dangerous content. Use the
unsanitized
array to specify a list of MIME types that should not be sanitized.
The remaining code reads the clipboard when the destination element is clicked and copies the image data into the destinationImage element.
It logs an error if it is unable to use the read() method, or if the clipboard does not contain data in PNG format.
js
const destinationImage = document.querySelector("#destination");
destinationImage.addEventListener("click", pasteImage);
async function pasteImage() {
try {
const clipboardContents = await navigator.clipboard.read();
for (const item of clipboardContents) {
if (!item.types.includes("image/png")) {
throw new Error("Clipboard does not contain PNG image data.");
const blob = await item.getType("image/png");
destinationImage.src = URL.createObjectURL(blob);
} catch (error) {
log(error.message);
Result
Copy the butterfly image on the left by right-clicking the image and selecting "Copy image" from the context menu.
Then click on the empty frame on the right.
The example will fetch the image data from the clipboard and display the image in the empty frame.
Note:
If prompted, grant permission in order to paste the image.
The remaining code reads the clipboard when the destination element is clicked and displays each ClipboardItem element along with its MIME type.
It logs an error it is unable to use the read() method, or if the clipboard contains any other MIME type.
Copy some text or the butterfly (JPG) image below (to copy images right-click on them and then select "Copy image" from the context menu).
Select the indicated frame below to paste this information from the clipboard into the frame.
Notes:
Even though the butterfly image is a JPG file, when read from the clipboard it is a PNG.
If prompted, you will need to grant permission in order to paste the image.
This example uses the formats parameter to read HTML data from the clipboard and get the code in its original form, without the browser sanitizing it first.
const copyButton = document.getElementById("copy");
const pasteButton = document.getElementById("paste_normal");
const pasteUnsanitizedButton = document.getElementById("paste_unsanitized");
const sourceTextarea = document.getElementById("source");
const destinationTextarea = document.getElementById("destination");
copyButton.addEventListener("click", async () => {
const text = sourceTextarea.value;
const type = "text/html";
const blob = new Blob([text], { type });
const data = [new ClipboardItem({ [type]: blob })];
try {
await navigator.clipboard.write(data);
} catch (error) {
destinationTextarea.value = `Clipboard write failed: ${error}`;
async function getHTMLFromClipboardContents(clipboardContents) {
for (const item of clipboardContents) {
if (item.types.includes("text/html")) {
const blob = await item.getType("text/html");
const blobText = await blob.text();
return blobText;
return null;
pasteButton.addEventListener("click", async () => {
try {
const clipboardContents = await navigator.clipboard.read();
const html = await getHTMLFromClipboardContents(clipboardContents);
destinationTextarea.value =
html || "Could not find HTML data in the clipboard.";
} catch (error) {
destinationTextarea.value = `Clipboard read failed: ${error}`;
pasteUnsanitizedButton.addEventListener("click", async () => {
try {
const clipboardContents = await navigator.clipboard.read({
unsanitized: ["text/html"],
const html = await getHTMLFromClipboardContents(clipboardContents);
destinationTextarea.value =
html || "Could not find HTML data in the clipboard.";
} catch (error) {
destinationTextarea.value = `Clipboard read failed: ${error}`;
Result
First click the "Copy HTML" button to write the HTML code from the first textarea to the clipboard. Then either click the "Paste HTML" button or the "Paste unsanitized HTML" button to paste the sanitized or unsanitized HTML code into the second textarea.
