Add a customizable nonce attribute to injected style elements - CSP

[mcm-ham]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

No ability to define nonce attribute on style tag.

Expected behavior

I would like the ability to define a nonce generated on the server that angular will add to the inline styles.

What is the motivation / use case for changing the behavior?

So that I can comply with business requirements not to use 'unsafe-inline' in CSP.

Environment

Angular version: 6.1.8

Browser:
- [x] Chrome (desktop) version 69
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.11.0
- Platform:  Windows 10

Others:

[mcm-ham]

Note webpack already supports this:
https://webpack.js.org/guides/csp/
webpack-contrib/style-loader#319

Related:
#6361
angular/angular-cli#12378

[ExtraBB]

Any update on this? For a strict CSP this is essential.

[dbligh]

Very keen to see this implemented. Is there a workaround at the moment since webpack already supports the nonce approach?

[qortex]

Any update on this? I can't see how to enable a strict CSP with Angular at the moment.

Will Angular 9 & Ivy / Bazel allow it?

Coming from angular/angular-cli#12378. @clydin , maybe you have a take on this?

To clarify: I still need "style-src" to include 'unsafe-inline' because styles are injected it seems. I don't know the internals, but that's what I see. And also "'self'" for scripts which is not recommended by Google's CSP inspector

[limitedmage]

I'm having the same issue and can't seem to find a workaround (eg. by using __webpack_nonce__).

This is the offending code in platform-browser.js:

    _addStylesToHost(styles, host) {
        styles.forEach((/**
         * @param {?} style
         * @return {?}
         */
        (style) => {
            /** @type {?} */
            const styleEl = this._doc.createElement('style');
            styleEl.textContent = style;
            this._styleNodes.add(host.appendChild(styleEl));
        }));
    }

[bes1002t]

Still no progress? Angular is one of the leading Javascript frameworks, it should not hinder developers to use high security settings.

[arrigod]

Hello, what is the plan for this? Will this ever be addressed?

[cyraid]

For what I require I can't have inline style or javascript. Was really hoping Angular could be my go to, as I like Angular's templating and ease of use to get things done.. I guess I must use the manual approach.

[jasperbosch]

Out of sheer frustration that this issue hasn't been resolved yet, I've created a script that uses the nonce listed on the script tag to append the nonce to the style tag being injected.

First, the script queries the currentScript. This should be at the beginning of the script because later the value will be null (in FireFox) https://stackoverflow.com/questions/38769103/document-currentscript-is-null

Next, for each .createElement("style"), the nonce is placed on the element.

/**
 * This script adds nonce-functionality to the main.xxx.js file. This script should only be used if SCP-Headers requires
 * no `style-src "unsafe-inline"` is used. The script-tag for the "main.xxx.js"-file should have a "nonce"-attribute.
 *
 * https://stackoverflow.com/questions/38769103/document-currentscript-is-null
 */
const fs = require('fs');

const currentScript = 'var currentScript=document.currentScript;';
const addNonceScript = '.nonce=currentScript[\'nonce\'] || currentScript.getAttribute(\'nonce\');';
const styleRegexp = /[const|var] (?<varname>\w+)=([\w.]*?)\.createElement\("style"\);/ig;

/**
 * Add nonce to file.
 * @param filename
 */
function addNonce(filename) {
    let fileContent = fs.readFileSync(filename).toString('utf-8');

    if (!fileContent.startsWith(currentScript)) {
        fileContent = `${currentScript}${fileContent}`;

        // match is used for replace
        const match = fileContent.match(styleRegexp);
        // results is used for getting the correct variable-name.
        let results = styleRegexp.exec(fileContent);
        let index = 0;
        do {
            // replace (add) the nonce
            fileContent = fileContent.replace(match[index], `${match[index]}${results.groups.varname}${addNonceScript}`);
            index++;
        } while ((results = styleRegexp.exec(fileContent)));

        fs.writeFileSync(filename, fileContent, {encoding: 'utf-8'});
        console.log('Nonce added!')
    } else {
        console.log('\x1b[41m%s\x1b[0m', 'Nonce already added! No changes are made.')
    }
}

/**
 * Read folder recursive. If a file 'main.xxxx.js' is found, add nonce.
 *
 * @param folder
 */
function readDir(folder) {
    const foldercontent = fs.readdirSync(`${folder}`);
    foldercontent.forEach(filename => {
        if (fs.lstatSync(`${folder}/${filename}`).isDirectory()) {
            readDir(`${folder}/${filename}`);
        } else {
            if (filename.startsWith('main') && filename.endsWith('.js')) {
                console.log('found:', filename);
                addNonce(`${folder}/${filename}`);
            }
        }
    })
}


readDir('dist');

[Splaktar]

Hello, what is the plan for this? Will this ever be addressed?

I proposed solving this and a set of other CSP issues to the team this month. The proposal wasn't prioritized, but I believe that the plan is to prioritize each of the related issues (this one included). Discussions between the Angular team and the Google Security team have already started. That said, I can't promise any kind of ETA.

[drewfreyling]

Any updates on this one?

[bes1002t]

Seems this is more or less prioritized low

[stephanie-dm]

Since our CSP also doesn't allow inline CSS, I currently disabled the inline CSS by putting the following in the production configuration of angular.json:

"optimization": {
     "scripts": true,
     "styles": {
            "minify": true,
            "inlineCritical": false
       },
      "fonts": true
},

[jkosmala87]

Any chance to put higher priority on it? Allowing inline scripts is not best practice from security perspective.

[drewfreyling]

Or at least providing context from a security perspective why it isn't a priority to the community.

[A-Fitz-Nelnet]

This issue is resolved by #49444. See docs in #49561.

[muuvmuuv]

@A-Fitz-Nelnet yes, but does not seem to work well with inline critical option and CSP with only nonce and no unsafe-inline CSS.

[tomavic]

I've looked into many issues and seen that workaround of adding the optimization flag to angular.json

However, we need to know the official solution for such case as it is hard to find