Using Microsoft client side validation with Content Security Policy

Question

I'm trying to use Microsoft's client side validation along with a Content Security Policy

In my ASP Net Core (v3.1) razor view I have the following:

<div asp-validation-summary="All" class="text-danger"></div>

When the page is first rendered, I get a list item with no text, just the red dot.

The HTML has been changed by the client side validation javascript (jquery-validation):

<div class="text-danger validation-summary-valid" data-valmsg-summary="true">
    <ul>
        <li style="display:none"></li>
    </ul>
</div>

My Content Security Policy (CSP) prevents inline styles, so the inline style display:none doesn't work, hence the red dot.

I discovered unsafe-hashes and changed my CSP to:

style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=';

Unfortunately although this works in Chrome, Firefox and Edge, it doesn't work in Safari on my iPhone (iOS 14.5) or my Mac Mini (v11.2.3)

Can anyone suggest a fix for Safari, or perhaps how to change the Microsoft client side validation to not use the inline style?

Answer 1

Can anyone suggest a fix for Safari

Safari does not support 'unsafe-hashes' nor for style-src nor for script-src. Currently there is only one way of use 'unsafe-hashes':

style-src 'unsafe-inline'; style-src-attr 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=';

Chrome will follow style-src-attr directive, other browsers (Safari/Firefox/Edge) do not support it and will use 'unsafe-inline' from the 'style-src'.

how to change the Microsoft client side validation to not use the inline style?

The style="display:none" is added by jQuery-validator via .attr() method, which internally calls the setAttribute("style", ...). CSP counts setAttribute(style) calls as inline style, while element.style.property = 'prop_value' is not treated as inline style.
Therefore the task is ro change setAttribute("style") calls to the set of equivalent element.style.property calls.

jQuery has a special plugin to fix inline styles by replacing .attr() method to a safe el.style.property calls.
Alternatively you can fix any JS library by use a rough hack working the same way.

Answer 2

This is a known issue. aspnetcore/issues/43714
The Tag Helper asp-validation-summary="All" renders this:

<div class="text-danger validation-summary-valid" data-valmsg-summary="true">
    <ul>
       <li style="display:none"> @*CSP problem*@
       </li>
    </ul>
</div>

Workaround: Use the Tag helper only when there is something to display.

@if (ViewData.ModelState.ErrorCount > 0)
{
    <div asp-validation-summary="All" class="text-danger"></div>
}