Clipboard API and events

Table of Contents

• 1. Conformance
• 2. Introduction
• 3. Use Cases
• 4. Events
  • 4.1 Event types and Requirements details Mathematical information
    • 4.1.1 copy event
    • Rich content editing 4.1.2 cut event
    • Advanced application interfaces 4.1.3 paste event
    Conformance
• 5. Processing model
• Security issues 6. Clipboard event interfaces
  User Interface Issues
  • 6.1 Dictionary ClipboardEventInit Members
  • Select, Cut, Copy, Paste 6.2 Attributes Drag
• 7. Integration with other scripts and drop processing events Setting
• 8. Pasting HTML and getting the multi-part data to be transferred
  • 8.1 Security risks
  • 8.2 General security policies
  • 8.3 Cross-origin HTML paste sanitization algorithm
  Extensibility
• 9. Other security and privacy considerations
• Glossary 10. Mandatory data types
• A. References
  • A.1 Normative references: references
  • A.2 Informative References references
  Acknowledgements

1. Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words must , must not , required , should , should not , recommended , may , and optional in this specification are to be interpreted as described in [ RFC2119 ].

2. Introduction

This section is informative

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 implmentations. Recognising that "drag and drop" operations are essentially a common user interface extension of cut or copy, move, and paste, it also defines how the events currently implemented for "drag and drop" operations relate to the less device-specific approach of general clipboard operations. A common interface design in the traditional WIMP (Windows, Icons, Mouse Pointer) interface is to move the pointer to an icon or to a highlighted selection, press the mouse key and drag a copy of the icon to the target where s/he wants to drop the object, then release the mouse key. There are, of course, many alternatives. In a graphic user interface without a mouse a user might select an object for dragging through a context menu, navigate to another object through standard navigation, and then select to drop the held object. implementations.

3. Use Cases

This section is informative

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

Advanced application interfaces

Rich content editing

Allowing for interfaces that use a thumbnail image to refer to a block of content, When copying text which can then contains hyperlinks or other structure, it is often useful to be dragged able to insert reformat the block of content represented in another part of a to preserve important information.

Graphics with built-in semantics

In order to make web page. The common Drag-and-drop pardigm must be implementable in applications which allow the manipulation of rich text, or of graphic content such a way that as SVG, it is accessible to users who are unable useful to use a mouse (such as those on provide a phone where there is no mouse) and must rely on keyboard or other interfaces. mechanism that allows for copying more than just the rendered content.

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. The following example, when copied, typically adds two lines containing the text "2 x = 7" to the clipboard. But in the MathML source of this text, and for any human reader familiar with normal western conventions for mathematical layout, this leads to incorrect copying. The first line would often needs to be transformed to be better, if copied as plain text, as "2^x = 7", or if 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 when pasting. Example 1: Mathematical information at paste time.

The equations "2^x = 7" and "2x = 7" represented in Presentation MathML contain the same sequence of characters, but have different semantics. 4. Events

5. Processing model

These are well-understood operations for users. There are the general steps to follow when firing clipboard events fired during selection, cut/copy and paste in some systems already which can .

1. Let the event object's clipboardData property be captured, cancelled, and whose effects can a DataTransfer object [ HTML5-DND ]
2. Let clear-was-called be overwritten. In particular, what is copied to false
3. Let types-to-clear be an empty list
4. Let clipboard-entry be the sequence number of the current clipboard may content, or null if the OS clipboard does not support sequence numbers
5. If the context is editable, let event target be the rendered content element that contains the start of the selection in document order, or the BODY element if there is selected, no selection or may cursor. If the context is not editable, let event target be some other modified version. (See security implications and annoying the user, and focused node, or the setData method's ). BODY element if no node has focus.

6. If the event type is paste

   Set the associated DataTransfer object's drag data store mode flag to read-only

   Each copy-paste operation has 4 distinct phases: For each part on the OS clipboard, carry out these steps:

   Source Selection If the current clipboard part contains plain text:

   This typically uses

   1. Ensure the standard selection mechanism text is in the encoding the scripting engine uses internally
   2. Add one entry for the system User Interface text to set the source node DataTransferItemList for any clipboard operation. with drag data item kind set to string and drag data item type string set to text/plain

   Copy If the current clipboard part represents file references:

   This uses the setData method

   1. Determine MIME type of referenced files
   2. Add one entry per file reference to copy the source node DataTransferItemList to the clipboardData object. It with drag data item kind set to may file also copy the and drag data item type string set to a dataTransfer object. @@Issue: This makes drag and drop more flexible, e.g. for accessibility. the corresponding MIME type

      What is if the downside? MIME type is unknown? Use application/octet-stream?

   Target Selection/Content Confirmation If the current clipboard part contains HTML- or XHTML-formatted text, according to the operating system's convention for describing such clipboard formats

   In a typical usage scenario, this will in fact

   If the implementation supports pasting HTML, the implementation must process the markup according to the following steps:

   1. Add one entry to the DataTransferItemList with drag data item kind set to Plain Unicode string , drag data item type string set to text/html or application/xhtml+xml accordingly. Let mainPartIndex be the same user interface mechanism that is used for Source Selection. It sets index of this entry in the current target DataTransferItemList . Content Insertion into Target This fires
   2. Extract the markup from the clipboard and use the relevant parser to construct a paste event on DOM tree
   3. If the current target . The default effect markup's source URL is that where applicable (for example known, resolve all relative URLs in editable text such HREF and SRC attributes using the source URL as an input) base URL, and set the content which is held in respective attributes to the clipboard is inserted at resolved absolute URL
   4. If the target. The markup's source content may be either structured or unstructured. Unstructured content URL is known, and the origin differs from the origin of the document the paste event will fire on, the user agent may apply a single simple type such as text or an image bitmap. Structured content cross-origin HTML paste sanitization algorithm
   5. If the markup's origin is composed either of mixed content types, or from a combination of several items local application, check whether there are references to local files and/or other parts of the same content type. @@Issue: Actually, this isn't how it works in IE. We should think about this bit more... Selection may OS clipboard's contents. If such references are found, references to sub-parts must be accomplished replaced by content-id references using the cid: URL scheme [ RFC2392 ]. To do so, process each attribute referencing a local file or clipboard part according to the following steps:
      1. Let itemNumber be the number of means - see User Interface Issues above. items on the DataTransferItemList

      2. Choose the appropriate steps from this list:

         If the DataTransferItemList copy places a copy of the current DataTransfer object selected into already contains an entry for the referenced file or clipboard part

         set itemNumber to the index of the existing entry

         Otherwise

         1. Add a clipboard. The current selection must not be affected. new entry to the DataTransferItemList with cut index should delete the object selected, set to itemNumber , drag data item kind set to "file", and place it into drag data item type string set to the clipboard. In MIME type of the case file or clipboard part if known.

            If unknown..? Should we simply ignore embeds with file types we don't "know"?

         2. Let the new entry's internal file name be the file name part of read-only content (such as a document which is not editable by the user) HTML attribute contents
         3. Let the content should not new entry's last modified date be removed, but the timestamp of the referenced file or 0 if the entry references a copy clipboard part

      3. Update the DOM attribute that referenced the local file or clipboard part to contain the string 'cid:' followed by itemNumber .
   6. Serialize the processed DOM and update the DataTransferItemList entry referenced by mainPartIndex with the resulting HTML code

   If the current clipboard part contains data in another supported binary or text-based format :

   1. Determine the MIME type of the data
   2. Add one entry to the DataTransferItemList with drag data item kind set to should be placed file , drag data item type string set to the corresponding MIME type

   Otherwise

   Do nothing

   Update the files property to match entries in the keyboard as for a copy operation. [@@Issue: nice idea, does it reflect current reality? Opera/Safari on Mac don't do that...] . DataTransferItemList .

   Update the paste types triggers an event on property to match entries in the current target (usually DataTransferItemList .

   Copy / cut event

   Set the current selection). @@Issue: For associated DataTransfer object's drag and drop compatibility should it trigger data store mode flag to drop read/write and paste , or vice versa?

   Drag and drop processing

7. Drag Fire the event [ DOM-LEVEL-2-EVENTS ]. Implementation requirements for access to data during event dispatch are defined in [ HTML5-DND ]. Some additional clipboard event-specific processing rules are given below:

   If script calls clearData() or items.clear() and drop the DataTransfer object's drag data store mode flag is essentially a special case of a cut read/write

   set the clear-was-called flag to true. If an argument is given, add the argument to the types-to-clear list.

   If script calls setData() or copy, moving modifies items and the clear-was-called flag is true

   If the types-to-clear list is empty

   set the clear-was-called flag to select some false

   else, if setData() 's type argument or the new target, and then a paste operation, which item's drag data item type string is implemented for mouse-based devices. The main differences found in drag-and-drop are that the object being dragged types-to-clear list

   remove it from the list. If the list is can fire a dragover event on various possible targets before being dropped onto them, now empty, set the clear-was-called flag to false

   If script calls getData() or accesses items in the DataTransferItemList and clipboard-entry is set

   check that the object selected clipboard data's sequence number matches clipboard-entry . If the clipboard no longer contains the same entry, set the DataTransferItemList object's drag data store mode to the disabled mode

   Warning: A malicious script listening to a paste event may be copied set up a never-ending loop in order to read what the user places on the clipboard in the future. On platforms where a temporary drag-specific clipboard. Compare clipboard sequence number is not available, other limitations should be implemented.

8. Process the default action or the data from the script per the following phases with those in copy and paste: instructions:

   Source Selection Paste event

   This may use

   If the same user interface mechanism as for copy and paste ( @@Issue: event was cancelled

   Do nothing, terminate this algorithm.

   Otherwise

   If the cursor or selection is in an editable context, insert the data from the clipboard and queue tasks to fire any events that should fire due to the same events? ). modification, see interaction with other events for details

   Copy Initiation / cut event

   In a typical Drag and Drop implementation, this

   If the event is initiated by dragging was cancelled

   Update the currently selected source. This must fire a dragstart event. It must copy clipboard contents with the source node into dataTransfer . It should set data from the effectAllowed property to determine whether a drag operation copies, moves, links, etc script, as given by the source node. See [ MDT DataTransferItemList ] for further documentation . Process each part as follows:

   If the list of how this works items is empty and the clear-was-called flag is true

   If the types-to-clear list is empty

   Clear the clipboard

   else

   Remove types in Internet Explorer. ( @@Issue: Can it just use the copy interface? Where does dataTransfer come from? Can you start a drag using types-to-clear list from the existing copy buffer? ) clipboard in an operating system and implementation-specific way

   Target Selection If data type is text/plain

   This process

   1. Ensure encoding is repeated, and fires three events: dragenter , dragover , correct per OS and dragleave . This may be locale conventions
   2. Normalize line endings according to platform conventions
   3. Place text on clipboard

   Otherwise

   Place part on clipboard with the same mechanism as used for selection, although typical implementations provide a seperate mechanism. These events appropriate OS clipboard format description

   Note: Due to limitations in the implementation of operating system clipboards, scripts should not fired assume that custom formats will be available to other applications on the source, so until system. For example, there is a dragenter event fired, a drop event should not be fired. Any action which would have caused a drop limit to how many custom clipboard formats can be fired before registered in Microsoft Windows. While it is possible to use any dragenter event has fired should cancel the drag. string for setData()'s type argument, sticking to well-known types is strongly recommended.

   Content Insertion into Target Otherwise

   When a drop operation

   If there is performed, a drop event is fired at selection

   Place contents of selection on the target. In order to protect clipboard

   If the user from pasting unexpected content, user agents event was a may cut not allow this event to be fired when not triggered by direct user interaction. In a drag operation this normally destroys and the dataTransfer object. @@Issue: what context is editable, remove selection contents and collapse the selection

   Otherwise

   Do nothing, terminate this algorithm

   Calling setData() without calling preventDefault() has no effect, even if there is no selection - the operation default action is not successful? to do nothing.

6. Clipboard event interfaces

However it The ClipboardEvent interface extends the Event interface [ DOM-LEVEL-2-EVENTS ].

The interface can be used to construct event objects per [ DOM-CORE-DRAFT ]. An example is implemented in an interface, drag and drop operations must have given below:

var pasteEvent = new ClipboardEvent('paste', { bubbles: true, cancelable: true, dataType: 'text/plain', data: 'My string' } );
document.dispatchEvent(pasteEvent);

There should be a starting point (e.g. where the mouse was clicked, or the when way a selection or element script can check if a clipboard format is selected for the drag), may have any number of intermediate steps (elements that registered and whether the mouse moves over during a drag, or elements that implementation allows writing this format to the user picks as possible drop points clipboard! event.clipboardData.isTypeSupported('mime/type')? "Supported" means: if you give me data labelled as she cycles through possibilities), this type, I know the OS description and must either have an end point (the element above which (if applicable) the mouse button was released, or relevant meta data and formatting for this type, and can write it to the element clipboard so that was finally selected), other native apps can make use of it. If data labelled with the OS's native name or be canceled. The end point must be constant for this type is on the last element selected as clipboard, I can map it to the mime type and extract the data in a possible drop point before way the drop occurs. If there script can use. Additionally, if a blob of data in this format is no dragenter event fired after dropped on my window, I'll know what to do about it, and if you drag this data *from* my window to another application on the system, I can format and label it in a dragstart , then way the drop targe app will understand."

A synthetic paste event should must not be cancelled, but give a script access to data on the real system clipboard. Synthetic cut and copy events may must not be fired modify data on the source node . system clipboard.

Then, regardless of whether the Synthetic paste events do not have any default action. Even if such an event was canceled or not, drag feedback (e.g. the mouse cursor or other clear indication to is dispatched in an editable context, the user) implementation should must not be updated to match the kind of operation indicated by the event's dataTransfer object's dropEffect attribute, as follows: @@Issue: More info about setting the dropEffect would be useful insert any data.

dropEffect Drag operation none No operation allowed. copy Data will be copied. link

dictionary ClipboardEventInit : EventInit {
    attribute DOMString data;
    attribute DOMString dataType;
};

Data will be linked.

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

7. to Integration with other scripts and events

Integration with rich text editing APIs

If an implementation supports the element this document.execCommand method and allows calling it with the commands "cut", "copy" and "paste", the implementation must fire the corresponding events. The event is fired on. @@Issue: syncronous and may prevent the execCommand() call from having its normal effect.

Interaction with other events

If it the clipboard operation is fired triggered by keyboard input, the implementation must fire the corresponding event as the default action of the keydown event that initiates the clipboard operation. For example, if the user presses Ctrl-C to copy, dispatching a copy event must be the default action of the C key's keydown event. The event is asynchronous but must be dispatched before keyup events for the relevant keys.

The default action of the cut and paste events 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.

Event listeners that modify selection or focus

If the event listener modifies the selection or focus, the clipboard action must be completed on the body, this text isn't right... dragleave modified selection.

Previous 8. target element Pasting HTML and multi-part data

9. Other security and privacy considerations

Don't extend this yet, we haven't even specified it. Thanks!!! 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.

Glossary Immediate User Selection Source Node The node which

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

Privacy concerns

Untrusted scripts should not get uncontrolled access to a user's clipboard data. This specification assumes that granting access to the object current clipboard data when a user explicitly initiates a paste operation from the UA'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 copied, dragged, etc. Target Element The node at which available outside the ClipboardEvent event handler.
• If a paste or drop script stores a reference to an object implementing the DataTransfer interface to use from outside the ClipboardEvent event will handler, all methods must be fired. References Normative references: no-ops when called outside the expected context.
• Implementations must not let scripts create synthetic clipboard events to get access to real clipboard data.

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.

Nuisance considerations

[RFC2119] The

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.

10. Mandatory data types

The implementation must recognise the native OS clipboard format description for how the following data types, to use english be able to specify normativity, as if it were a technical language. Available at http://rfc.net/rfc2119.html populate the DataTransferItemList Informative References [MDT] Microsoft's informatio with the correct description for paste events, and set the correct data format on the OS clipboard in response to copy and cut events.

• text/plain
• text/uri-list
• text/csv
• text/css
• text/html
• application/xhtml+xml
• image/png
• image/jpg
• image/gif
• image/svg+xml
• application/xml, text/xml
• application/javascript
• application/json

What about audio and video types? BMP? RTF? RTF was requested due to embedded images possibility (but this spec allows access to local images referenced in HTML fragments by design..).

Some standard Windows formats we don't handle
DataFormats.CF_RTFTEXT 
DataFormats.CF_WAVE 
DataFormats.CF_RIFF 
DataFormats.CF_BITMAP 
DataFormats.CF_DIB 
DataFormats.CF_DIF 
DataFormats.CF_METAFILEPICT 
DataFormats.CF_PALETTE 
DataFormats.CF_TIFF