feat: add CSP support to fast-element for ElementStyles

[nicholasrice]

🙋 Feature Request

@microsoft/fast-element exposes several API's to programmatically add style elements to light and shadow DOMs when constructable stylesheets are not supported. Because these stylesheets are injected into the document via JavaScript, they are susceptible to Content Security Policy (CSP) restrictions.

This could take several forms:

JavaScript configuration fast-element should implement a mechanism to provide a nonce attribute and value to all style elements it creates. Something like the following:

// Configure nonce for fast-element.
FASTElement.styleNonce = "{nonce}";

<style nonce="{nonce}"></style>

I think this mechanism is preferred because it provides authors more flexibility into how the nonce is retrieved on the client.

Embed nonce in HTML fast-element could look for a nonce meta element, emitting the style element with the nonce value if it finds one.

<meta property="csp-nonce" content="{nonce}" />
...
<style nonce="{nonce}"></style>

related discussion: https://github.com/microsoft/fast/issues/4510

[awentzel]

we should add this feature for production sites that incorporates nonces to avoid using unsafe-eval (scriptSrc) and unsafe-inline (styleSrc) references. We do not have this feature today, but, it would improve our security posture. The solution should also ensure that unsafe is not used in the CSP.

There may also be an opportunity, to document best practices using this implementation for those constructing sites with FAST. It's these hard concepts that sample patterns and implementations could improve fast adoption for quality enterprise applications using FAST.

[mikecentola]

I was able to use CSP with vscode-webview-ui-toolkit by adding the <meta property='csp-nonce' content='{cspNonce}'> to my extension, but I think it should either use <meta name='csp-nonce' ... or check for both in https://github.com/microsoft/fast/blob/master/packages/utilities/fast-web-utilities/src/dom.ts

I can create a PR with this change as it is a pretty simple non-breaking change.

[awentzel]

I was able to use CSP with vscode-webview-ui-toolkit by adding the <meta property='csp-nonce' content='{cspNonce}'> to my extension, but I think it should either use <meta name='csp-nonce' ... or check for both in https://github.com/microsoft/fast/blob/master/packages/utilities/fast-web-utilities/src/dom.ts

I can create a PR with this change as it is a pretty simple non-breaking change.

That would be excellent. Please document the changes so others can learn and apply to their apps as well if you don't mind. thanks for your contribution.

[mikecentola]

@awentzel do you need me to add more to the PR? I can try to add some to the docs too?

[awentzel]

@awentzel do you need me to add more to the PR? I can try to add some to the docs too?

I would add the minimum requirements for this change and then documentation would be great so people understand why it's important and how to implement. I don't think we have any security documentation right now, so adding in the package readme.md would be sufficient under a Security section.

[mikecentola]

@awentzel do you need me to add more to the PR? I can try to add some to the docs too?

I would add the minimum requirements for this change and then documentation would be great so people understand why it's important and how to implement. I don't think we have any security documentation right now, so adding in the package readme.md would be sufficient under a Security section.

Roger that. I'll add to this PR with the additional README documentation.