L'interface Clipboard de l'API Async Clipboard fournit un accès en lecture et en écriture au contenu du presse-papiers du système. Cela permet à une application Web d'implémenter les fonctionnalités Couper, Copier et Coller. Vous pouvez coller des données du presse-papiers dans une application en appelant la méthode read() et copier des données dans le presse-papiers en appelant la méthode write().
En plus du texte, des images au format Portable Network Graphics (PNG), du HTML nettoyé et non nettoyé, et des formats Web personnalisés, l'API Async Clipboard prend désormais également en charge la copie et le collage d'images SVG. Vous pouvez ainsi enfin interagir plus naturellement avec les logiciels de retouche d'images qui traitent les SVG en copiant et en collant des images SVG en tant qu'images plutôt qu'en tant que texte ou en utilisant des contournements.
Compatibilité avec la détection de fonctionnalités SVG
Détectez la prise en charge des images SVG (et de tout autre type MIME) en appelant la méthode statique ClipboardItem.supports(), en lui transmettant le type MIME souhaité.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Copier une image SVG
Copiez une image SVG en remplissant ClipboardItem avec un objet. Le blob contenant les données d'image SVG est la valeur, et le type du blob ('image/svg+xml' dans ce cas) est sa clé.
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
Coller une image SVG
Pour coller une image SVG, lisez ClipboardItem à partir du presse-papiers et obtenez le type souhaité ('image/svg+xml' dans ce cas) avec la méthode getType(). Cela renvoie un blob que vous pouvez attribuer à l'attribut src d'un <img> une fois converti en URL de blob.
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
Désinfection
Le format SVG est puissant et permet, par exemple, d'intégrer des scripts. Cela peut être dangereux lorsque l'utilisateur colle du contenu provenant de sources inconnues. Le navigateur exécute donc une étape de nettoyage. Lorsque des données sont copiées, l'API Async Clipboard produit un document SVG bien formé, puis l'écrit dans le presse-papiers. Lorsque des données sont collées, un fragment SVG strictement traité est généré par l'analyseur de fragments. Par conséquent, avant l'opération de collage, les attributs du gestionnaire d'événements onclick sont toujours présents, mais au moment du collage, ils sont supprimés.
Démo
Découvrez comment copier et coller des fichiers SVG dans la démo sur Glitch. Consultez le code source pour comprendre son fonctionnement. Veillez à essayer de cliquer sur l'un des cercles avant et après la copie et le collage. Après le collage, les attributs de gestionnaire d'événements onclick potentiellement dangereux sont supprimés.
Liens associés
- Logiciels de production utilisant cette fonctionnalité :
- Enregistrement ChromeStatus
- Intent to Ship
- Bug Chromium
- Position de WebKit concernant les normes
- Position de Mozilla sur les normes
Remerciements
La prise en charge du SVG pour l'API Async Clipboard dans Chromium a été implémentée par l'équipe Microsoft Edge. Cet article a été relu par Rachel Andrew et Anupam Snigdha.