[Target 4.10.1] Support Content Security Policy

[compulim]

Fixes #3393.

Changelog Entry

Breaking changes

• To support Content Security Policy, glamor is being replaced by create-emotion. The CSS hash and rule name is being prefixed with webchat--css with a random value.

Changed

• Support Content Security Policy, in PR #3443 by @compulim
  • Moved from glamor@2.20.40 to create-emotion@10.0.27
  • Inlined assets are now using blob: scheme, instead of data: scheme
  • Detect Web Worker support by loading a dummy Web Worker, instead of checking window.MessagePort and window.Worker
  • Data URI used in image of attachments will be converted to blob:
  • Bumped dependencies
    • react-film@3.0.0
    • react-scroll-to-bottom@4.0.0

Samples

• Added Content Security Policy sample, by @compulim, in PR #3443

Description

This feature enables Web Chat to be embedded on a page with Content Security Policy enabled.

Design

Please refer to CONTENT_SECURITY_POLICY.md for design.

Specific Changes

• Defined a baseline CSP
• Added a new prop nonce
  • Currently, this is for injecting <style> element, but not <img> and other media tags (see/vote [Content Security Policy] Add nonce support for <img> and other tags #3445)
• Moved from glamor to create-emotion
  • Updated CSS prefix from css-* to webchat--css-xxxxx-*
  • The CSS prefix will now have a randomized value to support multiple nonces
• Inlined assets are now using blob: scheme, instead of data: scheme
  • CSP directive img-src data: is insecure
• Image attachments using data URI will be parsed and converted to URL with scheme of blob:
• Web Worker detection is now done by loading a dummy Web Worker, instead of checking window.Worker
• Bumped dependencies to support CSP
  • react-film@3.0.0
  • react-scroll-to-bottom@4.0.0
• Added new internal hook useStyleToEmotionObject to convert from object style to emotion object
  • This is internal as we do not want to take emotion as part of our long-term dependency, this is also true for glamor and most of our dependencies
• Added new internal hook useNonce for nonce prop

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Tests reviewed (coverage, legitimacy)

[corinagum]

approved pending a couple comments