Use Blob Objects for Download Links

Lightning Web Security (LWS) blocks the use of data: URIs in anchor links because that approach has various security issues. Use a blob: URI instead.

This example shows an approach to creating a dynamic plain text file download link that uses a data: URI. This approach requires allowing data: URIs generally, which is insecure.

1// EXAMPLE OF INSECURE DOWNLOAD LINK
2// This technique is prevented by LWS
3const textEncoded = `data:text/plain,${encodeURIComponent( 'text string' )}`;
4let anchorTag = document.createElement('a');
5anchorTag.setAttribute('href', textEncoded);
6anchorTag.setAttribute('download', 'nameoffile.crt');
7anchorTag.click();

Instead, create a Blob to hold the data, and use the blob: URL scheme to make it available for download.

1const blob = new Blob(['text string'], { type: 'text/plain' });
2const blobUrl = URL.createObjectURL(blob);
3const anchorTag = document.createElement('a');
4anchorTag.setAttribute('href', blobUrl);
5anchorTag.setAttribute('download', 'nameoffile.crt');
6anchorTag.click();
7URL.revokeObjectURL(blobUrl);

data: URIs embed content directly inline as a URL. This creates several security risks that LWS blocks. A blob: URL is bound to the origin that created it — it inherits the page’s origin, and is subject to same-origin policy. This and other attributes make blob: a controlled, auditable mechanism for a legitimate use case (file downloads) without the open-ended risks of data:.