Blazor client side send an email

Question

I included a contact form in a razor page, so an user can fill it with his email, a subject and a body. When he submit it, the email is send to my email adress.

My code looks like this example

But when i submit my form, i had this error

Operation is not supported on this platform.

It's not supported because i'm running it on the browser (client side).

I would like to know if someone as a turnaround for this case, without using a smtp server (since the user can access the credentials of the server) or

[email protected]

Thank you.

Regards, Samih.

Answer 1

This blog post may be helpful to you: Blazor (Wasm) – How to Send Email from a PWA. It invokes the user's native mail application instead of relying on a server-based or API-based implementation.

Excerpted, "...for very basic email needs is to leverage the old-school technique of using “mailto:” anchor links combined with injecting Blazor’s IJSRuntime."

protected void SendLocalEmail(string toEmailAddress, string subject, string body)
{
      JsRuntime.InvokeAsync<object>("blazorExtensions.SendLocalEmail",
      new object[] { toEmailAddress, subject, body });
}

Then, in your wwwroot folder, you should have a corresponding .js file (i.e. GlobalFunctions.js) that contains the corresponding JavaScript SendLocalEmail() function

window.blazorExtensions = {
  SendLocalEmail: function (mailto, subject, body) {
    var link = document.createElement('a');
    var uri = "mailto:" + mailto + "?";
    if (!isEmpty(subject)) {
        uri = uri + "subject=" + subject;
    }

    if (!isEmpty(body)) {
        if (!isEmpty(subject)) { // We already appended one querystring parameter, add the '&' separator
            uri = uri + "&"
        }
 
        uri = uri + "body=" + body;
    }
 
    uri = encodeURI(uri);
    uri = uri.substring(0, 2000); // Avoid exceeding querystring limits.
    console.log('Clicking SendLocalEmail link:', uri);
 
    link.href = uri;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
  }
};

function isEmpty(str) {
  return (!str || str.length === 0);
}

Finally, be sure you include a reference to your .js file in the index.html file (also in the wwwroot folder):

<script src="GlobalFunctions.js"></script>

I place the above script reference below this line:

<script>navigator.serviceWorker.register('service-worker.js');</script>

Answer 2

This is not possible, because browsers have security restrictions which forbids sending E-Mails. This restrictions doesn't come from Blazor or ASP.NET Core. It won't work with JavaScript either. Or at least not with questionable hacks.

I won't recommend to use projects like smtp.js which are trying to work around those limitations: They're doing the only suiteable method by using a server-side API. But the problem here is, that you expose those credentials at least to smtp.js cause by generating a security token, they store your credentials on their servers so the API could fetch them when you call their Email.send() method from JS.

To realize this securely, you need some kind of API on the server side for sending those mails using a mailserver (mostly with SMTP). Since you say it runs on the browser, I'm assuming that you're using Blazor WebAssembly. So either create an API project which could be called using e.g. Ajax from your WASM project or switch to Blazor Server which allows you to run the code directly on the server, if this is suiteable for the use-case.

Important: Keep an eye on misuse!

Even with your own API using credentials stored secretly on your own server, it's important to prevent misuse. If there is an API that could send Mails to anyone with your account without any limitations, it will be only a matter of time until bots will abuse them to send spam - even when the credentials are not exposed!

This can harm your on many ways:

• Spam or even malicious content in your name
• Your mail account got taken down
• Desired mails won't be send cause your mail is on every spam-list
• ...

For that reasons it should be in your interest to send mails only from your servers with proper limits on that API like allowing only whitelisting senders, rate limits and so on.