[Clipboardchange] - Event handler contains native mime types

As per the latest explainer changes, to make clipboardchange event
interop, the API should let it's clients read native clipboard mime
types using the event handler, without making any additional API calls.
To reduce the risk of fingerprinting attacks, this API intentionally omits support for exposing custom MIME types.

This CL ensures that the clipboardchange event contains native mime type
as part of event payload. Just before renderer is about to dispatch the
event (after focus check), the renderer requests the browser process for
available mime types using an existing method. The list is filtered to
only contain Chromium supported native mime types (a hard-coded list).

Considered alternative: Instead of renderer requesting for types just
before event dispatch, the browser could instead send types as part of
OnClipboardChange MOJOM call, reducing 1 mojo call. However this is not
efficient when there are multiple frames listening to the clipboard
since all the frames will try to read the available types in quick
succession which can cause performance issue.

Bug: 41442253
Change-Id: I5a0d5335c1a007f496aacbd039a59382db596904
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6511791
Reviewed-by: Dan Clark <[email protected]>
Commit-Queue: Rohan Raja <[email protected]>
Reviewed-by: Sambamurthy Bandaru <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1463867}

Author: roraja

clipboard-apis/async-navigator-clipboard-change-event.tentative.https.html

@@ -25,48 +25,79 @@
       });
     }
 
+    let typesToSet_ = ["text/html", "web txt/csv"];
     button.onclick = () => document.execCommand("copy");
     document.oncopy = (ev) => {
       ev.preventDefault();
-      ev.clipboardData.setData("text/html", `<div>Test html</div>`);
+      for (let i = 0; i < typesToSet_.length; i++) {
+        const type = typesToSet_[i];
+        const data = new Blob([`Test data for ${type}`], {type: type});
+        ev.clipboardData.setData(type, data);
+      }
     };
 
-    function triggerCopyToClipboard() {
+    function triggerCopyToClipboard(typesToSet) {
+      if (typesToSet) {
+        typesToSet_ = typesToSet;
+      }
       return test_driver.click(button);
     }
 
     promise_test(async (test) => {
       let clipboardChangeEventCount = 0;
       let eventType = "";
+      let capturedEventTypes = null;
       navigator.clipboard.addEventListener("clipboardchange", (ev) => {
         clipboardChangeEventCount++;
         eventType = ev.type;
+        capturedEventTypes = ev.types;
       });
       await triggerCopyToClipboard();
       assert_equals(clipboardChangeEventCount, 1, "clipboardchange event should be called exactly once");
       assert_equals(eventType, "clipboardchange", "Event type should be 'clipboardchange'");
+      assert_true(capturedEventTypes.includes("text/html"), "types should contain 'text/html'");
+      assert_false(capturedEventTypes.includes("web txt/csv"), "types should not contain custom MIME type");
     }, "clipboardchange event is invoked");
 
     promise_test(async (test) => {
       await tryGrantWritePermission();
       let clipboardChangeEventCount = 0;
+      let capturedEventTypes = null;
       navigator.clipboard.addEventListener("clipboardchange", (ev) => {
         clipboardChangeEventCount++;
+        capturedEventTypes = ev.types;
       });
       await navigator.clipboard.writeText("Test text");
       await waitForRender();
       assert_equals(clipboardChangeEventCount, 1, "clipboardchange event should be called exactly once");
+      assert_true(capturedEventTypes.includes("text/plain"), "types should contain 'text/plain'");
     }, "clipboardchange event is invoked with async clipboard API");
 
     promise_test(async (test) => {
       let onClipboardChangeAttributeCount = 0;
-      navigator.clipboard.onclipboardchange = () => {
+      let capturedEventTypes = null;
+      navigator.clipboard.onclipboardchange = (ev) => {
         onClipboardChangeAttributeCount++;
+        capturedEventTypes = ev.types;
       };
       await triggerCopyToClipboard();
       assert_equals(onClipboardChangeAttributeCount, 1, "onclipboardchange attribute should be called exactly once");
+      assert_true(capturedEventTypes.includes("text/html"), "types should contain 'text/html'");
+      assert_false(capturedEventTypes.includes("web txt/csv"), "types should not contain custom MIME type");
     }, "clipboardchange event is invoked using onclipboardchange attribute");
 
+    promise_test(async (test) => {
+      let onClipboardChangeAttributeCount = 0;
+      let capturedEventTypes = null;
+      navigator.clipboard.onclipboardchange = (ev) => {
+        onClipboardChangeAttributeCount++;
+        capturedEventTypes = ev.types;
+      };
+      await triggerCopyToClipboard(["web txt/csv"]);
+      assert_equals(onClipboardChangeAttributeCount, 1, "onclipboardchange attribute should be called exactly once");
+      assert_equals(capturedEventTypes.length, 0, "clipboardchange event should have no types");
+    }, "clipboardchange event is invoked even when only custom MIME types are set");
+
     promise_test(async (test) => {
       let listenerCallCount = 0;
       function clipboardChangeListener() {
@@ -89,6 +120,55 @@
       assert_equals(listenerCallCount, 2, "Event listener should be called exactly once after re-adding");
     }, "clipboardchange event listener behavior when adding, removing, and re-adding");
 
+    promise_test(async (test) => {
+      // https://w3c.github.io/clipboard-apis/#mandatory-data-types-x
+      const standardTypes = [
+        "text/plain",
+        "text/html",
+        "image/png",
+      ];
+      const unsupportedTypes = [
+        "web application/custom",
+        "web web/proprietary",
+        "web x-custom/type",
+        "txt/json",
+        "text/rtf",
+        "image/svg+xml",
+        "text/uri-list",
+      ];
+      const allTypesToSet = [...standardTypes, ...unsupportedTypes];
+
+      let clipboardChangeEventCount = 0;
+      let capturedEventTypes = null;
+
+      navigator.clipboard.addEventListener("clipboardchange", (ev) => {
+        clipboardChangeEventCount++;
+        capturedEventTypes = ev.types;
+      });
+
+      await triggerCopyToClipboard(allTypesToSet);
+
+      assert_true(clipboardChangeEventCount == 1, "clipboardchange event should be invoked once");
+
+      // Check that types is a frozen array
+      assert_true(Array.isArray(capturedEventTypes), "types should be an array");
+      assert_true(Object.isFrozen(capturedEventTypes), "types should be frozen");
+
+      // Verify all standard types are included
+      for (const type of standardTypes) {
+        assert_true(capturedEventTypes.includes(type), `types should contain standard MIME type '${type}'`);
+      }
+
+      // Verify custom types are filtered out
+      for (const type of unsupportedTypes) {
+        assert_false(capturedEventTypes.includes(type), `types should not contain custom MIME type '${type}'`);
+      }
+
+      // Verify we have exactly the standard types and nothing else
+      assert_equals(capturedEventTypes.length, standardTypes.length,
+        "clipboardchange event types should contain exactly the standard MIME types");
+    }, "clipboardchange event exposes all standard MIME types and filters non-standard ones");
+
     promise_test(async (test) => {
       // Focus the document and acquire permission to write to the clipboard
       await test_driver.click(document.body);
@@ -97,6 +177,7 @@
       const iframe = document.getElementById('iframe');
 
       let frameEventCount = 0;
+      let capturedEventTypes = null;
       let focusEventFired = false;
       iframe.contentWindow.addEventListener("focus", () => {
         focusEventFired = true;
@@ -106,6 +187,7 @@
       iframe.contentWindow.navigator.clipboard.addEventListener("clipboardchange", () => {
         assert_true(focusEventFired, "focus event should fire before clipboardchange event");
         frameEventCount++;
+        capturedEventTypes = event.types;
       });
 
       // Ensure iFrame doesn't have the focus
@@ -114,14 +196,23 @@
 
       // Trigger multiple clipboard changes
       await navigator.clipboard.writeText("Test text");
-      await navigator.clipboard.writeText("Test text 2");
+
+      // Write HTML to clipboard to ensure the event captured only html and not txt
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob(["<p>Test HTML</p>"], {type: "text/html"})
+        })
+      ]);
       await waitForRender();
 
       assert_equals(frameEventCount, 0, "iframe should not recieve any clipboardchange event yet");
 
       iframe.focus();
       assert_true(iframe.contentWindow.document.hasFocus(), "iFrame should have focus");
       assert_equals(frameEventCount, 1, "iframe should receive event only 1 event after focus");
+      assert_equals(capturedEventTypes.length, 1, "clipboardchange event should only have one type");
+      assert_true(capturedEventTypes.includes("text/html"), "clipboardchange event should only have text/html type");
     }, "clipboardchange event should only fire in the focused context");
+
   </script>
 </body>