Clipboard API and events

1. Introduction

This section is non-normative.

This specification defines the common clipboard operations of cutting, copying and pasting, in such a way that they are exposed to Web Applications and can be adapted to provide advanced functionalities. Its goal is to provide for compatibility where possible with existing implementations.

2. Use Cases

This section is non-normative.

There are many use cases for being able to change the default clipboard operations (cut/copy/paste). We have collected a few samples to demonstrate possible uses, although these may not all be supported by this specification.

2.1. Rich content editing

When copying text which contains hyperlinks or other structure, it is often useful to be able to reformat the content to preserve important information.

2.2. Graphics with built-in semantics

In order to make web applications which allow the manipulation of rich text, or of graphic content such as [SVG11], it is useful to provide a mechanism that allows for copying more than just the rendered content.

2.3. Mathematical information

With content such as mathematics, simply copying rendered text and pasting it into another application generally leads to most of the semantics being lost. MathML often needs to be transformed to be copied as plain text, for example to make sure "to the power of" is shown with the caret "^" sign in a formula plain-text input. The XML source could also be placed in the clipboard with the appropriate transformation occurring at paste time.

3. Terminology

The term editable context means any element that is either an editing host, a textarea element, or an input element with its type attribute set to any of "text", "search", "tel", "url", "email", "password" or "number".

4. Model

The platform provides a system clipboard.

The system clipboard has a list of clipboard items that are collectively called the system clipboard data. The system clipboard data is a DataTransfer object that mirrors the contents of the clipboard.

5. Clipboard Events

5.1. Clipboard event interfaces

The ClipboardEvent interface extends the Event interface.

dictionary ClipboardEventInit : EventInit {
  DataTransfer? clipboardData = null;
};

[Constructor(DOMString type, optional ClipboardEventInit eventInitDict), Exposed=Window]
interface ClipboardEvent : Event {
  readonly attribute DataTransfer? clipboardData;
};

The interface can be used to construct events. An example is given below:

var pasteEvent = new ClipboardEvent('paste');
pasteEvent.clipboardData.items.add('My string', 'text/plain');
document.dispatchEvent(pasteEvent);

Note: Synthetic clipboard events will not actually modify the clipboard or the document. In other words, while the script above will fire a paste event, the data will not be pasted into the document.

5.2. Clipboard events

5.2.1. The clipboardchange event

The clipboardchange event fires whenever the contents of the system clipboard are changed. These changes could be due to any of the following (non-exhaustive):

• User-initiated cut or copy actions

• Scripts that use the §7 Asynchronous Clipboard API to write to the clipboard

• Actions that update the clipboard outside the user agent

If the clipboard contents are changed outside the user agent, then the clipboardchange event MUST fire when the user agent regains focus.

Since synthetic cut and copy events do not update the system clipboard, they will not trigger a "clipboardchange" event.

5.2.2. The copy event

When the user initiates a copy action, the user agent fires a clipboard event named copy.

If the event is not canceled, the currently selected data will be copied to the system clipboard. The current document selection is not affected.

The copy event bubbles and is cancelable.

See §8.1 The copy action for a detailed description of the processing model for this event.

A synthetic copy event can be manually constructed and dispatched, but it will not affect the contents of the system clipboard.

5.2.3. The cut event

When the user initiates a cut action, the user agent fires a clipboard event named cut.

In an editable context, if the event is not canceled the action will place the currently selected data on the system clipboard and remove the selection from the document. The cut event fires before the selected data is removed. When the cut operation is completed, the selection is collapsed.

In a non-editable context, the clipboardData will be an empty list. Note that the cut event will still be fired in this case.

The cut event bubbles and is cancelable.

See §8.2 The cut action for a detailed description of the processing model for this event.

A synthetic cut event can be manually constructed and dispatched, but it will not affect the contents of the document or of the system clipboard.

5.2.4. The paste event

When a user initiates a paste action, the user agent fires a clipboard event named paste. The event fires before any clipboard data is inserted into the document.

If the cursor is in an editable context, the paste action will insert clipboard data in the most suitable format (if any) supported for the given context.

The paste action has no effect in a non-editable context, but the paste event fires regardless.

The paste event bubbles and is cancelable.

See §8.3 The paste action for a detailed description of the processing model for this event.

A synthetic paste event can be manually constructed and dispatched, but it will not affect the contents of the document.

5.3. Integration with other scripts and events

5.3.1. Event handlers that are allowed to modify the clipboard

Event handlers may write to the clipboard if any of the following is true:

• The action which triggers the event is invoked from the user-agent’s own user interface, e.g. from a "Copy" menu entry or shortcut key.

• The action which triggers the event is invoked from a scripting thread which is allowed to show a popup.

The implementation may allow other trusted event types to modify the clipboard if the implementation authors believe that those event types are likely to express user intention. The implementation may also support configuration that trusts specific sites or apps to modify the clipboard regardless of the origin of the scripting thread.

Synthetic cut and copy events must not modify data on the system clipboard.

5.3.2. Event handlers that are allowed to read from clipboard

Event handlers may read data from the system clipboard if either of the following is true

• The action that triggers the event is invoked from the user-agent’s own user interface, e.g. a "Paste" menu entry or shortcut key.

• The script that triggers the action is running on a site which through an implementation-dependant mechanism is given permission to read data from the clipboard.

• The action that triggers the event is triggered in an app with permissions to read the clipboard.

Synthetic paste events must not give a script access to data on the real system clipboard.

5.3.3. Integration with rich text editing APIs

If an implementation supports ways to execute clipboard commands through scripting, for example by calling the document.execCommand() method with the commands "cut", "copy" and "paste", the implementation must trigger the corresponding action, which again will dispatch the associated clipboard event.

These are the steps to follow when triggering copy, cut or paste actions through a scripting API:

1. Execute the corresponding action synchronously.

2. Use the action’s return value as the return value for the API call.

Note: Copy and cut commands triggered through a scripting API will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. Paste commands triggered through a scripting API will only fire paste events and give access to clipboard contents if the implementation is configured to allow this. How implementations can be configured to allow read or write access to the clipboard is outside the scope of this specification.

5.3.4. Interaction with other events

If the clipboard operation is triggered by keyboard input, the implementation must fire the corresponding event that initiates the clipboard operation. The event is asynchronous but must be dispatched before keyup events for the relevant keys.

The cut and paste actions may cause the implementation to dispatch other supported events, such as textInput, input, change, validation events, DOMCharacterDataModified and DOMNodeRemoved / DOMNodeInserted. Any such events are queued up to fire after processing of the cut/paste event is finished.

The implementation must not dispatch other input-related events like textInput, input, change, and validation events in response to the copy operation.

5.3.5. Event listeners that modify selection or focus

If the event listener modifies the selection or focusable area, the clipboard action must be completed on the modified selection.

6. Synchronous Clipboard API

The Synchronous Clipboard API allows you to override the default cut, copy and paste behavior of the user agent.

Synchronous access to the clipboard is performed using the standard DataTransfer methods to mutate the items on a ClipboardEvent's clipboardData attribute. One consequence of this is that the synchronous clipboard APIs can only access clipboard data in the context of a ClipboardEvent handler.

Note: If you need to access the clipboard outside of a clipboard event handler, see §7 Asynchronous Clipboard API.

6.1. Overriding the copy event

To override the default copy event behavior, a copy event handler must be added and this event handler must call preventDefault() to cancel the event.

Canceling the event is required in order for the system clipboard to be updated with the data in clipboardData. If the ClipboardEvent is not canceled, then the data from the current document selection will be copied instead.

// Overwrite what is being copied to the clipboard.
document.addEventListener('copy', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');

  // This is necessary to prevent the current document selection from
  // being written to the clipboard.
  e.preventDefault();
});

6.2. Overriding the cut event

To override the default cut event behavior, a cut event handler must be added and this event handler must call preventDefault() to cancel the event.

Canceling the event is required in order for the system clipboard to be updated with the data in clipboardData. If the ClipboardEvent is not canceled, then the data from the current document selection will be copied instead.

Note that canceling the cut event will also prevent the document from being updated (i.e., the current selection will not be removed). The event handler will need to manually update the document to remove the currently selected text.

// Overwrite what is copied to the clipboard.
document.addEventListener('cut', function(e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard as part of the cut.
  // Write the data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', 'Hello, world!');
  e.clipboardData.setData('text/html', '<b>Hello, world!</b>');

  // Since we will be canceling the cut operation, we need to manually
  // update the document to remove the currently selected text.
  deleteCurrentDocumentSelection();

  // This is necessary to prevent the document selection from being
  // written to the clipboard.
  e.preventDefault();
});

6.3. Overriding the paste event

To override the default paste event behavior, a paste event handler must be added and this event handler must call preventDefault() to cancel the event.

Canceling the event is required so that the user agent does not update the document with data from the system clipboard.

Note that canceling the paste event will also prevent the document from being updated (i.e., nothing will be pasted into the document). The event handler will need to manually paste the data into the document.

Also note that, when pasting, the drag data store mode flag is read/only, hence calling setData() from a paste event handler will not modify the data that is inserted, and not modify the data on the clipboard.

// Overwrite what is being pasted onto the clipboard.
document.addEventListener('paste', function(e) {
  // e.clipboardData contains the data that is about to be pasted.
  if (e.clipboardData.types.indexOf('text/html') > -1) {
    var oldData = e.clipboardData.getData('text/html');
    var newData = '<b>Ha Ha!</b> ' + oldData;

    // Since we are canceling the paste operation, we need to manually
    // paste the data into the document.
    pasteClipboardData(newData);

    // This is necessary to prevent the default paste action.
    e.preventDefault();
  }
});

7. Asynchronous Clipboard API

7.1. Navigator Interface

partial interface Navigator {
  [SecureContext, SameObject] readonly attribute Clipboard clipboard;
};

7.2. Clipboard Interface

[SecureContext, Exposed=Window] interface Clipboard : EventTarget {
  Promise<DataTransfer> read();
  Promise<DOMString> readText();
  Promise<void> write(DataTransfer data);
  Promise<void> writeText(DOMString data);
};

navigator.clipboard.read().then(function(data) {
  for (var i = 0; i < data.items.length; i++) {
    if (data.items[i].type == "text/plain") {
      console.log(“Your string: ”, data.items[i].getAs(“text/plain”));
    } else {
      console.error(“No text/plain data on clipboard.”);
    }
  }
});

navigator.clipboard.read().then(function(data) {
  console.log(“Your string: ”, data);
});

var data = new DataTransfer();
data.items.add("text/plain", "Howdy, partner!");
navigator.clipboard.write(data).then(function() {
  console.log(“Copied to clipboard successfully!”);
}, function() {
  console.error(“Unable to write to clipboard. :-(”);
});

navigator.clipboard.writeText("Howdy, partner!").then(function() {
  console.log(“Copied to clipboard successfully!”);
}, function() {
  console.error(“Unable to write to clipboard. :-(”);
});

8. Clipboard Actions

This section defines clipboard actions and the processing model for event dispatch.

Each clipboard action has two flags called script-triggered and script-may-access-clipboard.

The script-triggered flag is set if the action runs because of a script, for example a document.execCommand() call. Future scripting APIs that interact with the clipboard should also use these actions, and the script-triggered flag must be set accordingly.

8.1. The copy action

8.2. The cut action

8.3. The paste action

For the paste action, the script-may-access-clipboard flag depends on an implementation-specific permission mechanism for determining what sites or apps may read from the clipboard. When a paste action is triggered by a script, the implementation must not make clipboard contents available without the user’s permission. If the permission has not already been granted, the permission prompt must include the hostname of the document associated with the script thread.

9. Clipboard Permissions

This section defines how the clipboard permissions control access to the clipboard APIs.

Note: Clipboard permissions currently only apply to the Async Clipboard API. This will updated in a future version of this specification (so it applies to all Clipboard interactions).

9.1. Clipboard read permission

9.2. Clipboard write permission

10. Mandatory data types

The implementation must recognise the native OS clipboard format description for the following data types, to be able to populate the DataTransferItemList with the correct description for paste events, and set the correct data format on the OS clipboard in response to copy and cut events.

10.1. Reading from the clipboard

These data types must be exposed by paste events if a corresponding native type exists on the clipboard:

• text/plain

• text/uri-list

• text/csv

• text/css

• text/html

• application/xhtml+xml

• image/png

• image/jpg, image/jpeg

• image/gif

• image/svg+xml

• application/xml, text/xml

• application/javascript

• application/json

• application/octet-stream

10.2. Writing to the clipboard

These data types must be placed on the clipboard with a corresponding native type description if added to a DataTransfer object during copy and cut events.

• text/plain

• text/uri-list

• text/csv

• text/html

• image/svg+xml

• application/xml, text/xml

• application/json

Warning! The data types that untrusted scripts are allowed to write to the clipboard are limited as a security precaution. Untrusted scripts can attempt to exploit security vulnerabilities in local software by placing data known to trigger those vulnerabilities on the clipboard.

11. Security Considerations

Enabling authors to change what is copied by a user, or to make an automated copy of something that was never selected and allowing unrestricted calls to paste information can raise various security and privacy concerns.

An example scenario of a problem is where a user selects a link and copies it, but a different link is copied to the clipboard. The effect of this can range from an unexpected result on pasting to an attempted "phishing" attack.

11.1. Pasting HTML and multi-part data

This section is non-normative.

There are certain security risks associated with pasting formatted or multi-part data.

• The user might paste hidden data without realising is there. This may happen if, for example, the markup includes <input type="hidden"> tags or HTML comments. Such hidden data might contain sensitive information.

• The user might paste malicious JavaScript into a trusted page.

• The implementation might grant scripts access to local files the user did not intend to expose.

To determine what policies to use, the factors we consider are:

• The origin of the data being pasted

• The origin of data sub-parts such as referenced images

• The origin of the running script

This is an overview of the scenarios and the possible security policies:

Some implementations mitigate the risks associated with pasting rich text by stripping potentially malicious content such as SCRIPT elements and javascript: links by default when pasting rich text, but allow a paste event handler to retrieve and process the original, un-sanitized data.

11.2. General security policies

The implementation must not download referenced online resources, or expose their contents in the files list or DataTransferItemList.

If the data on the clipboard is not from a local application, the implementation must not give access to any referenced local files. For example, if the data contains <img src="file://localhost/example.jpg"> but the data’s origin is an online resource, the implementation must not add an entry for example.jpg to the clipboardData.items list.

11.3. Nuisance considerations

Scripts may use the DataTransfer API to annoy and confuse users by altering the data on the system clipboard from copy and cut events. This specification does not attempt to prevent such nuisances, though implementations may add additional restrictions.

Implementations must handle scripts that try to place excessive amounts of data on the clipboard gracefully.

12. Privacy Considerations

Untrusted scripts should not get uncontrolled access to a user’s clipboard data. This specification assumes that granting access to the current clipboard data when a user explicitly initiates a paste operation from the user agent’s trusted chrome is acceptable. However, implementors must proceed carefully, and as a minimum implement the precautions below:

• Objects implementing the DataTransfer interface to return clipboard data must not be available outside the ClipboardEvent event handler.

• If a script stores a reference to an object implementing the DataTransfer interface to use from outside the ClipboardEvent event handler, all methods must be no-ops when called outside the expected context.

• Implementations must not let scripts create synthetic clipboard events to get access to real clipboard data except if configured to do so.

• Implementations should not let scripts call document.execCommand("paste") unless the user has explicitly allowed it.

Implementations may choose to further limit the functionality provided by the DataTransfer interface. For example, an implementation may allow the user to disable this API, or configure which web sites should be granted access to it.

13. Acknowledgements

This section is informative

The editors would like to acknowledge the contributions of the former editors who helped shepherd this specification through various meetings and mailing-list discussions to bring it to its current state.

• Hallvord R. M. Steen

The editors would also like to acknowledge their intellectual debt to the documentation of Data Transfer functionalities from Microsoft [MICROSOFT-CLIP-OP] and earlier drafts of the [HTML5] specification. We are also grateful for the draft "safe copy and paste" from Paul Libbrecht (this draft is no longer available on the Web).

And finally, we would like to acknowledge the contributions made by the following:

Adam Barth, Shawn Carnell, Daniel Cheng, Daniel Dardailler, Al Gilman, James Graham, James Greene, Ian Hickson, Lachlan Hunt, Philip Jägenstedt, Anne van Kesteren, Aaron Leventhal, Jim Ley, Paul Libbrecht, "Martijn", Glenn Maynard, Chris Mills, ms2ger, Ryosuke Niwa, Robert O’Callahan, Dave Poehlman, "ROBO Design", Janina Sajka, Rich Schwerdtfeger, Jonas Sicking, Maciej Stachowiak, Mihai Sucan, Dmitry Titov, Ojan Vafai, Tarquin Wilton-Jones, Tom Wlodkowski, and Boris Zbarsky.

Appendix A: Algorithms