Make library compatible with CSP style-src nonce

[MglMX]

Are you requesting a feature, reporting a bug or asking a question?

Requesting a feature

What is the current behavior?

The library needs the CSP for style-src to be unsafe-inline.
The styles will not be applied if the CSP for style-src is set to nonce which prevents style injection.

What is the expected behavior?

It should be possible to provide a nonce to the style tag created by the StylesManager.

// stylesmanager.ts
export class StylesManager {
public static Nonce = "";
. 
.
.
static createSheet(styleSheetId: string) {
    let style = document.createElement("style");
    if(this.Nonce){
      style.setAttribute("nonce", this.Nonce)
    }
    style.id = styleSheetId;
    // Add a media (and/or media query) here if you'd like!
    // style.setAttribute("media", "screen")
    // style.setAttribute("media", "only screen and (max-width : 1024px)")
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    return <CSSStyleSheet>style.sheet;
  }
.
.
.
}

//index.js
Survey.StylesManager.Nonce = "MTIza"
Survey.StylesManager.applyTheme("bootstrap");

How would you reproduce the current behavior (if this is a bug)?

Inject a CSP for testing purpose. Add to HTML Head: <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-MTIz';">

Specify your

• surveyjs version: 1.8.23

[tsv2013]

What library are you using - survey-knockout, survey-angular, survey-jquery, survey-vue or survey-react?

[MglMX]

I am using survey-react.

[synth]

I hit a CSP issue using Knockout. It seems Knockout v3 hasn't been updated since 2019 and there is now Knockout v4 which supports CSP. Does this library support Knockout v4? Or does this library have any other issues with CSP we should know about?