Make download attribute work with Sanity CDN cross-origin URLs

The HTML download attribute doesn't work with cross-origin URLs due to browser security restrictions implemented in Chrome 65 and other modern browsers. This is a standard browser behavior documented in MDN - the download attribute is ignored for cross-origin URLs to prevent security issues.

However, Sanity provides a built-in solution: you can append the ?dl query parameter to any Sanity CDN file URL to force the browser to download the file instead of displaying it. This works by setting the appropriate Content-Disposition header on the CDN response.

Here's how to implement it:

<a href={fileUrl + '?dl'}>Download this file</a>

If you want to specify a custom filename for the download, you can add it after the dl parameter:

<a href={fileUrl + '?dl=my-custom-filename.pdf'}>Download this file</a>

This approach works because the ?dl parameter tells Sanity's CDN to serve the file with a Content-Disposition: attachment header, which triggers the browser's download behavior regardless of cross-origin restrictions.

Why this works better than the download attribute:

• The download attribute is a client-side hint that browsers ignore for cross-origin URLs (same-origin only security restriction)
• The ?dl parameter is a server-side instruction that Sanity's CDN respects by setting proper HTTP headers
• This makes the download work reliably across all browsers without CORS issues

This solution works for any file asset hosted on cdn.sanity.io, whether it's a PDF, document, ZIP file, or other file type stored in your Sanity Content Lake.