Products Technologies Demo Docs Blog Support Company

Securing the WebSocketHandler Endpoint in ASP.NET

The online document editor uses a WebSocket connection to synchronize the document. The initial connection is routed to an endpoint that creates the WebSocketHandler. This article shows how to add a security layer by adding an authentication filter to this endpoint.

Securing the WebSocketHandler Endpoint in ASP.NET

The online document editor uses a WebSocket connection to synchronize the document server-side. To initialize the editor, a connection is routed to the endpoint TXWebSocket that creates the WebSocketHandler. The WebSocketHandler is coordinating the traffic between the client and the backend service.

The WebSocket traffic itself uses the same security layer like the underlying HTTP (or HTTPS) protocol. The WebSocketHandler address is defined through the WebSocketURL property in the HtmlHelper. For example:

@Html.TXTextControl().TextControl(settings => {
    settings.WebSocketURL = "wss://localhost:1151/api/TXWebSocket";
}).Render()

Like other requests to controller or api controller methods, these requests should be secured by adding an authentication filter to this endpoint.

This very simple ActionFilterAttribute filter compares an access token passed in the query string with a hardcoded token. In real-worlds applications, this access token would be a dynamic OAuth access token or any other token of identity protocols.

public class WebSocketAuth : ActionFilterAttribute
{
    // stored access token usually retrieved from any storage
    // implemented thought OAuth or any other identity protocol
    private const string access_token = "821e2f35-86e3-4917-a963-b0c4228d1315";

    public override void OnActionExecuting(HttpActionContext actionContext)
    {
        // retrieve access token from query string
        var sAccess_token = HttpUtility.ParseQueryString(
            actionContext.Request.RequestUri.Query)["access_token"];

        // show case only: easy comparison of tokens 
        if (sAccess_token != access_token)
            throw new UnauthorizedAccessException();
    }
}

When adding the TX Text Control MVC NuGet package to an ASP.NET Web Application, the TXWebSocketController is added to the project. By adding the attribute [WebSocketAuth] to the controller, the filter is executed before the controller method.

[WebSocketAuth]
public class TXWebSocketController : ApiController {
    public HttpResponseMessage Get() {
     if (HttpContext.Current.IsWebSocketRequest) {
        var wsHandler = new WebSocketHandler();
        wsHandler.ProcessRequest(HttpContext.Current);
        return new HttpResponseMessage(HttpStatusCode.SwitchingProtocols);
     }
     return new HttpResponseMessage(HttpStatusCode.OK);
  }
}

In the HtmlHelper code, the access token is passed as a query string in the WebSocketURL property:

@using TXTextControl.Web.MVC

@{ 
    // use an access token (for example returned by OAuth)
    var sAccessToken = "821e2f35-86e3-4917-a963-b0c4228d1315";

    // build WebSocketURL including access token in query string
    var sProtocol = (Request.Url.Scheme == "https") ? "wss://" : "ws://";
    var sWebSocketURL = sProtocol + Request.Url.Authority +
      "/api/TXWebSocket?access_token=" + sAccessToken;
}

@Html.TXTextControl().TextControl(settings => {
    settings.WebSocketURL = sWebSocketURL; // pass built WebSocketURL
}).Render()

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

ASP.NETJavaScriptDocument Editor

Detect Toggle Button Changes Using a MutationObserver

This article shows how to detect changes of toggle buttons in the ribbon of the web editor using a MutationObserver. The state of a toggle button in the ribbon visualizes the state of a certain…


ASP.NETDocument EditorHTML5

Implementing Conditional Table Cell Colors with MailMerge

This ASP.NET MVC sample shows how to implement conditional table cell colors using the online document editor and an ASP.NET backend.


ASP.NET CoreHTML5Middleware

Adding a WebSocket Security Middleware to ASP.NET Core Web Applications

This article shows how to add a security middleware to ASP.NET Core Web Applications to secure the WebSocketHandler requests.


ASP.NETDocumentViewerHTML5

Creating an ASP.NET MVC DocumentViewer Application With Razor

Create a simple ASP.NET (MVC) application that uses the HTML5 document viewer.


ASP.NETHTML5Razor

Creating an ASP.NET MVC Application With Razor

This tutorial shows how to integrate TextControl.Web into an MVC application with Razor.