search

slackhq / csp-html-webpack-plugin

A plugin which, when combined with HTMLWebpackPlugin, adds CSP tags to the HTML output.
MIT License
164 stars 40 forks source link

using with .cshtml and such #48

Closed anvlkv closed 4 years ago

anvlkv commented 5 years ago

Description

I'm using the plugin with .cshtml file. My template is like this:

@using System.Threading;
@using SOME.Controllers;
@{
    var app = ViewBag.NgModule != null ? ViewBag.NgModule : "SOME";
    var ie8 = IsIE() && GetIEVersion() <= 8;
}
<!DOCTYPE html>
<html lang="en" ng-app="@app" id="ng-app" class="height100">
<head>
    <meta charset="utf-8" />
    @if (string.IsNullOrWhiteSpace(ViewBag.Title))
    {
        <title>SOMEShare &amp; Collect</title>
    }
    else
    {
        <title>@ViewBag.Title</title>
    }
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta http-equiv="content-security-policy" content="" />
...

The output I'm getting is like this:

<html lang="en" ng-app="@app" id="ng-app" class="height100"><head><meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'self' 'unsafe-eval' 'nonce-n1st7Y/9LxdP2jtjoIB/RA=='; style-src 'self' 'unsafe-inline'; default-src 'self' https://some.rocket.chat; worker-src 'slef' blob: data: 'unsafe-eval' 'unsafe-inline'; frame-src 'self' https://some.rocket.chat; font-src 'self' https://kendo.cdn.telerik.com data:; img-src 'self' data:; connect-src 'self' https://some.rocket.chat"></head><body class="height100">@using System.Threading;
@using SOME.Controllers;
@{
    var app = ViewBag.NgModule != null ? ViewBag.NgModule : "SOME";
    var ie8 = IsIE() && GetIEVersion() <= 8;
}

    <meta charset="utf-8">
    @if (string.IsNullOrWhiteSpace(ViewBag.Title))
    {
        <title>SOME Share & Collect</title>
    }
    else
    {
        <title>@ViewBag.Title</title>
    }
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <meta http-equiv="content-security-policy" content>

What type of issue is this? (place an x in one of the [ ])

Requirements (place an x in each of the [ ])

Question OR Enhancement

In order for webpack-html-plugin to work with these files I'm using this in my .cshtml template

    <%= Object.keys(htmlWebpackPlugin.files.chunks).map(k => {
      return `<script src="~/Scripts${htmlWebpackPlugin.files.chunks[k].entry}"></script>`;
    }).join('\n') %>

It seems I need something similar for the csp-html-webpack-plugin. Is there a better way to do it, that is not documented?

AnujRNair commented 5 years ago

Hi @anvlkv

This functionality currently doesn't exist, but we would accept pull requests for you to add these attributes onto the relevant tags.

If you are interested in doing so, you would need to replicate similar functionality to what the SRI Plugin has here: https://github.com/waysact/webpack-subresource-integrity/blob/master/index.js#L266-L287

You'll then be able to access the hashes and nonces via the htmlWebpackPlugin variable like you do for files above