Any ideas that could help with removing inline styles and scripts from orchard admin.

[tcobbfis]

I need to remove unsafe-inline from our csp headers. I've started adding nonce to the script and style blocks inside of the admin by overwriting those views in my new "secure admin". I'm not sure how to account for the stuff that is using vue.js yet. Any tips? Has anyone else done something similar?

[hishamco]

We are already using VueJS in many places, including the culture picker and the media app .. etc.

In case you need to control the security, you could use the OC.Security module

[tcobbfis]

I can set the headers. The problem I'm running into is after setting the headers. There is a heavy use of inline scripts and styles that get blocked by the browser when removing "unsafe-inline" in the Admin theme. I'm currently setting a nonce with the headers, but it looks like I may have to extend the resource manager in order to have it used globally. Still trying to work it out.

public ValueTask UpdateAsync(IDictionary<string, string> securityPolicies, HttpContext context)
{
    bool dev = context.RequestServices.GetRequiredService<IHostEnvironment>().IsDevelopment();

    var any = false;

    CspHelper.MergeValues(securityPolicies, BaseUri, Self);
    CspHelper.MergeValues(securityPolicies, DefaultSrc, Self);

    if (!PermittedStyleSources.IsEmpty)
    {
        any = true;
        CspHelper.MergeValues(securityPolicies, StyleSrc, PermittedStyleSources);
    }

    if (!PermittedScriptSources.IsEmpty)
    {
        any = true;
        CspHelper.MergeValues(securityPolicies, ScriptSrc, PermittedScriptSources);
    }

    if (!PermittedFontSources.IsEmpty)
    {
        any = true;
        CspHelper.MergeValues(securityPolicies, FontSrc, PermittedFontSources);
    }

    if (!PermittedFrameSources.IsEmpty)
    {
        any = true;
        CspHelper.MergeValues(securityPolicies, FrameSrc, PermittedFrameSources);
    }

    if (!PermittedImgSources.IsEmpty)
    {
        any = true;
        CspHelper.MergeValues(securityPolicies, ImgSrc, PermittedImgSources);
    }

    if (!PermittedConnectSources.IsEmpty)
    {
        any = true;

        if (dev)
        {
            PermittedConnectSources.Add("http://localhost:*");
            PermittedConnectSources.Add("ws://localhost:*");
            PermittedConnectSources.Add("wss://localhost:*");
        }

        CspHelper.MergeValues(securityPolicies, ConnectSrc, PermittedConnectSources);
    }

    if (any)
    {
        var allPermittedSources = PermittedStyleSources.Concat(PermittedScriptSources).Concat(PermittedFontSources);
        CspHelper.MergeValues(securityPolicies, ConnectSrc, allPermittedSources);
    }

    // Generate a nonce for this request
    var nonce = GenerateNonce();
    context.Items["CspNonce"] = nonce;

    // Add the nonce to the script-src directive
    var scriptSourcesWithNonce = PermittedScriptSources.Concat(new[] { $"'nonce-{nonce}'" });
    CspHelper.MergeValues(securityPolicies, ScriptSrc, scriptSourcesWithNonce);

    // Add the nonce to the style-src directive
    var styleSourcesWithNonce = PermittedStyleSources.Concat(new[] { $"'nonce-{nonce}'" });
    CspHelper.MergeValues(securityPolicies, StyleSrc, styleSourcesWithNonce);


    return ValueTask.CompletedTask;
}

[tcobbfis]

then in the view file I do this

<a id="addToDeploymentPlanBulkActions" class="dropdown-item" data-title="@T["Bulk Action"]" data-message="@T["Are you sure you want to add these items to a deployment plan?"]">@T["Add to deployment plan"]</a>

@{
   var nonce = Context.Items["CspNonce"] as string;
}

<script nonce="@nonce" at="Foot" depends-on="jQuery">
    $(function () {
        $('#addToDeploymentPlanBulkActions').on('click', function () {
            if ($(":checkbox[name='itemIds']:checked").length > 1) {
                var $this = $(this);
                confirmDialog({
                    ...$this.data(), callback: function (r) {
                        if (r) {
                            var modal = new bootstrap.Modal($('#modalAddToDeploymentPlanContentsBulkActionsDeploymentPlan'));
                            modal.show();
                        }
                    }
                });
            }
        });
    });
</script>

Trying to figure out if there is a better way than doing that a lot.

[Piedone]

There's no better way than what you're doing, unfortunately. We have an open issue to track this: #13389. While you're doing this already, couldn't you also contribute the changes to address this issue? The bulk of the task is to just copy your template overrides into the OC source.