Adding nonce to style to support Content Security Policy

[compulim]

Feature Request

To enable Content Security Policy on the hosting page, Web Chat will need to be updated with nonce in the styles, i.e. changing the prefix for glamor.

Additional Context

https://portal.microsofticm.com/imp/v3/incidents/details/199836319/home

[Enhancement]

[v-aabro]

The team I work on uses BotFramework-WebChat along with TypeScript, React, and Redux. We transpile our code into app.bundle.js using Webpack on build. Another team uses our app.bundle.js in their site, but currently their Content Security Policy prevents them from loading our project because of the inline styles glamor adds.

Once the nonce is able to added to these inline styles, this should get us part of the way to solving the problem; however, my understanding is the nonce needs to be different for every HTTP request. If we have a dynamic nonce on the glamor style tags, how could we make it so that the other team can specify the same nonce in their Content Security Policy?

[v-aabro]

Also, once this fix is in we will have to upgrade to the latest version of BotFramework-WebChat, but we also are having CSP issues with the bot-framework streaming library referenced in these bugs:

microsoft/botbuilder-js#2620
microsoft/botbuilder-js#2647

The current solution for these bugs is to downgrade BotFramework-WebChat. Will these bugs be fixed in the same release as this bug? Otherwise, upgrading will just trade out one issue for another.

[compulim]

From @stevengum, those bugs (2620, 2647) should be fixed in R11, which should be 2-3 months from now (Oct-Nov timeframe).

For dynamic nonce, will this work for you?

+ const styleNonce = uuid.v4(); // Or anything that is a string with only alphanumerics.

  renderWebChat({
    directLine: createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
+   styleNonce
  }, document.getElementById('webchat'));

[v-aabro]

I think that would work, I was just confused how a team consuming our project on their own site would specify this nonce in their own CSP if it is changes with each HTTP request. This may be out of scope for your team to consider though, but any advice would be appreciated.