Clipboard API access fails in Blazor Server (client-side interop) on macOS Safari

[VigneshwaranGovindharajan]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Environment

Framework: Blazor Server (.NET 8)
Browser: Safari (macOS)
Platform: macOS Ventura / Sonoma
Test Setup: Minimal Blazor Server app without any third-party components

Summary

Clipboard copy functionality using client-side JavaScript interop (navigator.clipboard.writeText) fails to work in Safari on macOS when triggered from Blazor Server. However, native HTML onclick copy actions (e.g., using ) work correctly in the same environment.

This suggests the issue is not specific to any third-party component, but rather a limitation or behavior difference in how clipboard access is handled via Blazor interop in Safari.

Expected Behavior

Clipboard copy via Blazor JS interop should behave consistently across browsers, including Safari on macOS.

Steps To Reproduce

Home.razor

`
@using Microsoft.JSInterop
@Inject IJSRuntime JSRuntime

Prompt Content

This is sample prompt text to copy.

Copy via Blazor Interop Copy via Native onclick @copyStatusPrompt

@code {
private bool copySuccessPrompt = false;
private string copyStatusPrompt = "Ready";

private async Task CopyPromptViaInterop()
{
    try
    {
        // Get the text from the DOM element and pass it to JS
        await JSRuntime.InvokeVoidAsync("copyToClipboard", "prompt-text");
        copySuccessPrompt = true;
        copyStatusPrompt = "Copied!";
        StateHasChanged();
        await Task.Delay(2000);
        copySuccessPrompt = false;
        copyStatusPrompt = "Ready";
        StateHasChanged();
    }
    catch (JSException ex)
    {
        copyStatusPrompt = "Failed: Check console";
        Console.WriteLine($"Clipboard error (Prompt): {ex.Message}");
        StateHasChanged();
    }
}

}
`

clipboard.js

window.copyToClipboard = async function (elementId) { try { const text = document.getElementById(elementId).textContent; await navigator.clipboard.writeText(text); console.log(Successfully copied text from ${elementId}); } catch (err) { console.error(Failed to copy text from ${elementId}: ${err}); throw err; // Let Blazor catch the error } };

1. Run the above sample in Safari on macOS.
2. Click both copy buttons (via native and interop) and observe that server-side (native onclick) copy actions work correctly on macOS while client-side (Blazor Interop) copy actions fail to work on macOS Safari.

Exceptions (if any)

No response

.NET Version

.Net9

Anything else?

No response

[MihuBot]

I'm a bot. Here are possible related and/or duplicate issues (I may be wrong):

• navigator.clipboard.writeText blocked in Safari (MacOS and iOS) #38211
• Request for an issue: Clipboard API via JSInterop Fails in Safari (macOS) #63433

[javiercn]

@VigneshwaranGovindharajan thanks for contacting us.

This is a browser behavior we don't control. Safari requires clipboard interactions to be synchronous with the user interaction. That's by definition impossible in Blazor since all interaction is asynchronous as it needs to go through a websocket.

In this case, your only option is to setup the event via javascript and have any information you need to put on the clipboard readily available so that you can avoid using JS interop.

Dupe of #38211