Blockierung des Zugriffs auf die Zwischenablage aufheben

Sichererer Zugriff auf die Zwischenablage für Texte und Bilder

Der Zugriff auf die Systemzwischenablage erfolgte üblicherweise über document.execCommand() für Interaktionen in der Zwischenablage. Obwohl diese Methode des Schneidens und Das Einfügen von Inhalten war kostenpflichtig: Der Zugriff auf die Zwischenablage erfolgte synchron und konnte nur und in das DOM schreiben.

Das ist für kurze Textabschnitte in Ordnung, aber es gibt viele Fälle, in denen das Blockieren für die Übertragung in die Zwischenablage ist keine gute Nutzererfahrung. Zeitaufwendige Bereinigungen oder Möglicherweise ist eine Bilddecodierung erforderlich, bevor Inhalte sicher eingefügt werden können. Der Browser müssen möglicherweise verknüpfte Ressourcen aus einem eingefügten Dokument laden oder inline einfügen. Das würde die Seite während des Wartens auf dem Laufwerk oder Netzwerk blockieren. Berechtigungen hinzufügen Der Browser muss die Seite während der Anfrage blockieren. Zugriff auf die Zwischenablage. Gleichzeitig werden die Berechtigungen document.execCommand() für Interaktionen in der Zwischenablage sind lose definiert und variieren. zwischen Browsern.

Die Async Clipboard API Probleme behoben und ein klar definiertes Berechtigungsmodell bereitgestellt wird, um die Seite zu blockieren. Die Async Clipboard API ist auf die Verarbeitung von Text und Bildern beschränkt. in den meisten Browsern. Die Unterstützung variiert jedoch. Browser genau analysieren Kompatibilitätsübersicht für jeden der folgenden Abschnitte.

Kopieren: Daten in die Zwischenablage schreiben

writeText()

Rufe writeText() auf, um Text in die Zwischenablage zu kopieren. Da diese API asynchron ist, gibt die Funktion writeText() ein Versprechen zurück, das die werden abgelehnt, je nachdem, ob der übergebene Text kopiert wurde:

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

write()

writeText() ist im Grunde nur eine bequeme Methode für die generische write(). , mit der Sie auch Bilder in die Zwischenablage kopieren können. Wie bei writeText() gibt es auch ist asynchron und gibt ein Versprechen zurück.

Um ein Bild in die Zwischenablage zu schreiben, benötigen Sie das Bild als blob Eine Möglichkeit, fordern Sie das Image mithilfe von fetch() von einem Server an und rufen Sie dann blob() im Antwort.

Für einen Nutzer ist es möglicherweise nicht wünschenswert oder möglich, ein Bild vom Server anzufordern. aus verschiedenen Gründen. Glücklicherweise können Sie das Bild auch auf einen Canvas zeichnen Canvas aufrufen“ toBlob() .

Übergeben Sie als Nächstes ein Array von ClipboardItem-Objekten als Parameter an die write() . Derzeit können Sie nur jeweils ein Bild übergeben. Wir hoffen jedoch, in Zukunft mehrere Bilder unterstützt. ClipboardItem verwendet ein Objekt mit Der MIME-Typ des Bildes als Schlüssel und das Blob als Wert. Für Blob Objekte, die aus fetch() oder canvas.toBlob() abgerufen wurden, dem Attribut blob.type enthält automatisch den richtigen MIME-Typ für ein Bild.

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      // The key is determined dynamically based on the blob's type.
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
}

Alternativ kannst du ein Promise in das ClipboardItem-Objekt schreiben. Für dieses Muster müssen Sie den MIME-Typ der Daten im Voraus kennen.

try {
  const imgURL = '/images/generic/file.png';
  await navigator.clipboard.write([
    new ClipboardItem({
      // Set the key beforehand and write a promise as the value.
      'image/png': fetch(imgURL).then(response => response.blob()),
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
}

Das Kopierereignis

Wenn ein Nutzer das Kopieren in die Zwischenablage startet und ruft nicht preventDefault() auf, der copy-Ereignis enthält eine clipboardData-Eigenschaft mit den Elementen, die bereits das richtige Format haben. Wenn Sie Ihre eigene Logik implementieren möchten, müssen Sie preventDefault() aufrufen, das Standardverhalten zugunsten Ihrer eigenen Implementierung verhindern. In diesem Fall ist clipboardData leer. Nehmen wir einmal eine Seite mit Text und einem Bild. Wenn die Nutzenden alle und ein Kopieren in die Zwischenablage initiiert, sollte Ihre benutzerdefinierte Lösung Text verwerfen und nur kopieren Sie das Bild. Sie können dies wie im Codebeispiel unten gezeigt erreichen. In diesem Beispiel wird nicht behandelt, wie auf das vorherige APIs, wenn die Clipboard API nicht unterstützt wird

<!-- The image we want on the clipboard. -->
<img src="kitten.webp" alt="Cute kitten.">
<!-- Some text we're not interested in. -->
<p>Lorem ipsum</p>

document.addEventListener("copy", async (e) => {
  // Prevent the default behavior.
  e.preventDefault();
  try {
    // Prepare an array for the clipboard items.
    let clipboardItems = [];
    // Assume `blob` is the blob representation of `kitten.webp`.
    clipboardItems.push(
      new ClipboardItem({
        [blob.type]: blob,
      })
    );
    await navigator.clipboard.write(clipboardItems);
    console.log("Image copied, text ignored.");
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Für das copy-Ereignis:

Für ClipboardItem:

Einfügen: Daten werden aus der Zwischenablage gelesen.

readText()

Um Text aus der Zwischenablage vorzulesen, rufe navigator.clipboard.readText() auf und warte bis das zurückgegebene Promise aufgelöst wird:

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

read()

Die Methode navigator.clipboard.read() ist ebenfalls asynchron und gibt ein versprochen. Um ein Bild aus der Zwischenablage zu lesen, rufen Sie eine Liste mit ClipboardItem und dann iterieren.

Jede ClipboardItem kann ihren Inhalt in verschiedenen Typen enthalten. Deshalb müssen Sie iterieren Sie über die Liste der Typen, wieder mit einer for...of-Schleife. Für jeden Typ Rufen Sie die Methode getType() mit dem aktuellen Typ als Argument auf, um die Methode entsprechenden Blob. Wie zuvor ist dieser Code nicht an Bilder gebunden. zukünftige Dateitypen verwenden können.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        console.log(URL.createObjectURL(blob));
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Mit eingefügten Dateien arbeiten

Es ist hilfreich für Nutzende, wenn sie Tastenkombinationen für die Zwischenablage verwenden können, z. B. Strg + C und Strg + V. Chromium zeigt schreibgeschützt Dateien in der Zwischenablage an, wie unten beschrieben. Diese Option wird ausgelöst, wenn der Nutzer die standardmäßige Tastenkombination zum Einfügen des Betriebssystems verwendet oder wenn der Nutzer in der Menüleiste des Browsers auf Bearbeiten und dann auf Einfügen klickt. Es ist kein weiterer Klempnercode erforderlich.

document.addEventListener("paste", async e => {
  e.preventDefault();
  if (!e.clipboardData.files.length) {
    return;
  }
  const file = e.clipboardData.files[0];
  // Read the file's contents, assuming it's a text file.
  // There is no way to write back to it.
  console.log(await file.text());
});

Ereignis „Einfügen“

Wie bereits erwähnt, gibt es Pläne, Ereignisse einzuführen, die mit der Clipboard API funktionieren, aber vorerst können Sie das vorhandene paste-Ereignis verwenden. Funktioniert problemlos mit dem neuen asynchrone Methoden zum Lesen von Text in der Zwischenablage. Wie beim copy-Ereignis sollten Sie vergessen, preventDefault() anzurufen.

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  console.log('Pasted text: ', text);
});

Mehrere MIME-Typen verarbeiten

Bei den meisten Implementierungen werden für einen einzelnen Schnitt mehrere Datenformate in die Zwischenablage eingefügt. oder einen Kopiervorgang ausführen. Dafür gibt es zwei Gründe: Als App-Entwickler die Funktionen der App nicht kennen, in die Nutzende Text oder Bilder kopieren möchten, und viele Anwendungen unterstützen das Einfügen strukturierter Daten als Nur-Text. Das ist normalerweise Der Menüpunkt Bearbeiten mit einem Namen wie Einfügen und Übereinstimmungsstil oder Ohne Formatierung einfügen aus.

Das folgende Beispiel zeigt, wie das geht. In diesem Beispiel wird mit fetch() Folgendes ermittelt: Bilddaten stammen, kann aber auch <canvas> oder die File System Access API verwenden.

async function copy() {
  const image = await fetch('kitten.png').then(response => response.blob());
  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
  const item = new ClipboardItem({
    'text/plain': text,
    'image/png': image
  });
  await navigator.clipboard.write([item]);
}

Sicherheit und Berechtigungen

Der Zugriff auf die Zwischenablage stellt für Browser schon immer ein Sicherheitsproblem dar. Ohne Berechtigungen erteilt, könnte eine Seite unbemerkt alle Arten schädlicher Inhalte kopieren in die Zwischenablage einfügen, die nach dem Einfügen katastrophale Folgen haben würden. Angenommen, eine Webseite kopiert automatisch rm -rf / oder einen Dekomprimierungsbombenbild in die Zwischenablage.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Noch mehr Möglichkeiten, Webseiten uneingeschränkten Lesezugriff auf die Zwischenablage zu gewähren ärgerlich. Nutzer kopieren routinemäßig vertrauliche Informationen wie Passwörter und persönlichen Daten in die Zwischenablage legen, die dann von jeder Seite gelesen werden können, Wissen der Nutzenden.

Wie bei vielen neuen APIs wird die Clipboard API nur für Seiten unterstützt, die über HTTPS Um Missbrauch besser vorzubeugen, ist der Zugriff auf die Zwischenablage nur erlaubt, wenn eine Seite auf dem aktiven Tab. Seiten auf aktiven Tabs können in die Zwischenablage schreiben, ohne Berechtigung anfordern. Zum Lesen aus der Zwischenablage ist jedoch immer eine Berechtigung.

Berechtigungen zum Kopieren und Einfügen wurden hinzugefügt. Permissions API verfügbar. Die Berechtigung clipboard-write wird Seiten automatisch gewährt, wenn auf dem aktiven Tab. Sie müssen die Berechtigung clipboard-read anfordern, die Sie indem wir versuchen, Daten aus der Zwischenablage zu lesen. Der folgende Code zeigt Letzteres:

const queryOpts = { name: 'clipboard-read', allowWithoutGesture: false };
const permissionStatus = await navigator.permissions.query(queryOpts);
// Will be 'granted', 'denied' or 'prompt':
console.log(permissionStatus.state);

// Listen for changes to the permission state
permissionStatus.onchange = () => {
  console.log(permissionStatus.state);
};

Sie können auch festlegen, ob eine Nutzergeste zum Ausschneiden oder mit der Option allowWithoutGesture einfügen. Der Standardwert für diesen Wert variiert je nach Browser, daher sollten Sie sie immer einbeziehen.

Hier kommt der asynchrone Charakter der Clipboard API besonders gut an: Beim Versuch, Daten aus der Zwischenablage zu lesen oder zu schreiben, wird der Nutzer automatisch aufgefordert, wenn sie nicht bereits gewährt wurde. Da die API versprechen-basiert ist, Dies ist vollkommen transparent und ein Nutzer, der die Berechtigung für die Zwischenablage ablehnt, das Versprechen abzulehnen, damit die Seite entsprechend reagieren kann.

Da Browser nur den Zugriff auf die Zwischenablage erlauben, wenn eine Seite der aktive Tab ist, werden Sie feststellen, dass einige der Beispiele nicht funktionieren, wenn sie direkt in die Konsole des Browsers, da die Entwicklertools der aktive Tab sind. Es gibt einen Trick: das Verschieben mit setTimeout() auf die Zwischenablage zugreifen und dann schnell in die Seite klicken, fokussieren Sie es, bevor die Funktionen aufgerufen werden:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Integration von Berechtigungsrichtlinien

Um die API in iFrames zu verwenden, müssen Sie sie mit Berechtigungsrichtlinie definiert einen Mechanismus, mit dem selektiv Deaktivierung verschiedener Browserfunktionen und APIs Sie müssen entweder oder sowohl clipboard-read als auch clipboard-write, abhängig von den Anforderungen Ihrer App.

<iframe
    src="index.html"
    allow="clipboard-read; clipboard-write"
>
</iframe>

Funktionserkennung

Um die Async Clipboard API zu verwenden und gleichzeitig alle Browser zu unterstützen, testen Sie navigator.clipboard und Fallback auf frühere Methoden. Hier sehen Sie zum Beispiel, können Sie das Einfügen auch für andere Browser implementieren.

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText();
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
});

Das ist nicht die ganze Geschichte. Vor der Async Clipboard API gab es eine Mischung aus verschiedene Implementierungen für das Kopieren und Einfügen bei verschiedenen Webbrowsern. In den meisten Browsern kann das Kopieren und Einfügen des Browsers mit document.execCommand('copy') und document.execCommand('paste'). Wenn der Text eine Zeichenfolge ist, die nicht im DOM vorhanden ist, muss in das DOM und ausgewählt:

button.addEventListener('click', (e) => {
  const input = document.createElement('input');
  input.style.display = 'none';
  document.body.appendChild(input);
  input.value = text;
  input.focus();
  input.select();
  const result = document.execCommand('copy');
  if (result === 'unsuccessful') {
    console.error('Failed to copy text.');
  }
  input.remove();
});

Demos

In den Demos unten können Sie die Async Clipboard API ausprobieren. Bei Glitch You kann die Textdemo remixen oder die Bilddemo mit ihnen experimentieren.

Das erste Beispiel zeigt, wie Text in die Zwischenablage und aus der Zwischenablage verschoben wird.

Verwenden Sie diese Demo, um die API mit Bildern auszuprobieren. Denken Sie daran, dass nur PNGs unterstützt werden. und nur in in einigen Browsern.

Weitere Informationen

• MDN
• Benutzerdefinierte Webformate

Danksagungen

Die Asynchronous Clipboard API wurde von Darwin implementiert, Huang und Gary Kačmarčík Darwin hat auch die Demo zur Verfügung gestellt. Vielen Dank an Kyarik und Gary Kačmarčík einige Teile dieses Artikels.

Hero-Image von Markus Winkler auf Unsplash (Unsplash).