De Clipboard
van de Async Clipboard API biedt lees- en schrijftoegang tot de inhoud van het systeemklembord. Hierdoor kan een webapplicatie knip-, kopieer- en plakfuncties implementeren. U kunt gegevens vanuit het klembord in een applicatie plakken door de methode read()
aan te roepen en gegevens naar het klembord kopiëren door de methode write()
aan te roepen. Naast tekst , afbeeldingen in Portable Network Graphics (PNG)-formaat, geschoonde en ongeschoonde HTML en aangepaste webformaten ondersteunt de Async Clipboard API nu ook het kopiëren en plakken van SVG-afbeeldingen. Dit betekent dat u eindelijk kunt werken met beeldbewerkingssoftware die natuurlijker met SVG's omgaat door SVG-afbeeldingen te kopiëren en te plakken als afbeeldingen in plaats van als tekst of door onhandige oplossingen te gebruiken.
Functiedetectie SVG-ondersteuning
Detecteer ondersteuning voor SVG-afbeeldingen (en alle andere MIME-typen) door de statische methode ClipboardItem.supports()
aan te roepen en hieraan het gewenste MIME-type door te geven.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Een SVG-afbeelding kopiëren
Kopieer een SVG-afbeelding door het ClipboardItem
te vullen met een object. De blob met de SVG-afbeeldingsgegevens heeft de waarde en het blobtype (in dit geval 'image/svg+xml'
) als sleutel.
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);
}
});
Plak een SVG-afbeelding
Om een SVG-afbeelding te plakken, leest u het ClipboardItem
terug van het klembord en haalt u het gewenste type op (in dit geval 'image/svg+xml'
) met de getType()
methode. Dit retourneert een blob die, eenmaal omgezet naar een blob-URL, u kunt toewijzen aan het src
attribuut van een <img>
.
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;
});
Sanering
SVG is een krachtig formaat dat bijvoorbeeld ingebedde scripts mogelijk maakt. Dit kan gevaarlijk zijn wanneer de gebruiker content van onbekende bronnen plakt, waardoor de browser een opschoningsstap uitvoert. Wanneer gegevens worden gekopieerd, produceert de Async Clipboard API een correct opgemaakt SVG-document en schrijft dit vervolgens naar het klembord. Wanneer gegevens worden geplakt, produceert de fragmentparser een strikt verwerkt SVG-fragment. Daarom zijn de onclick
gebeurtenishandlerattributen vóór het plakken nog steeds aanwezig, maar na het plakken worden ze verwijderd.

Demonstratie
Ontdek het kopiëren en plakken van SVG's in de demo . Bekijk de broncode om te zien hoe het werkt. Probeer zeker eens op een van de cirkels te klikken voor en na het kopiëren en plakken. Na het plakken worden de potentieel gevaarlijke onclick
gebeurtenishandlerattributen verwijderd.
Gerelateerde links
- Productiesoftware die deze functionaliteit gebruikt:
- ChromeStatus-invoer
- Intentie tot verzending
- Chromium-bug
- WebKit-standaardpositie
- Mozilla Standards-positie
Dankbetuigingen
SVG-ondersteuning voor de Async Clipboard API in Chromium is geïmplementeerd door het Microsoft Edge-team. Deze post is beoordeeld door Rachel Andrew en Anupam Snigdha.