Is it secure to store a CSRF token value in the DOM?

Question

I am validating a CSRF token with every call to an API request (the request just send an email to me). I have two methods of making the AJAX API call, one in JS and one in C# (JS is the primary, C# is just a backup if the user has JS disabled). My C# method retrieves the CSRF token from the header with the following code. (this C# method works perfectly so far)

//this is ASP.NET MVC 4.7 by the way 

public string TokenHeaderValue()
{
    string cookieToken, formToken;
    AntiForgery.GetTokens(null, out cookieToken, out formToken);
    return cookieToken + ":" + formToken;
}

https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html

This cheat sheet from OWASP (^) about CSRF says one option to retrieve the CSRF token with JS is to store the value in the DOM with

<meta name="csrf-token" content="{{ csrf_token() }}">

then you can retrieve it using JQuery with code like

var csrf_token = $('meta[name="csrf-token"]').attr('content');

I'm not professionally trained but this seems like a huge security risk. In the case of an XSS attack, the attacker could easily steal the token right?

Like isn't the whole point of the HttpOnly header on cookies to stop stuff like this?