Skip to content

CONTENT_SECURITY_POLICY.md

Latest commit

 

History

History
83 lines (61 loc) · 4.2 KB

CONTENT_SECURITY_POLICY.md

File metadata and controls

83 lines (61 loc) · 4.2 KB

Content Security Policy

Starting from 4.10.1, Content Security Policy is supported.

In this article, we are using a nonce of a1b2c3d. In production environment, it should be a value generated by random number generator (RNG) with high entropy. The value should change every time the policy is applied.

New in 4.19.0: img-src data: is required for display icons used in Web Chat.

To enable Web Chat in a CSP-enforced environment, the following directives must be configured:

img-src blob: data:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'

If Web Chat is used to connect to Azure Bot Services, the following additional directives must be configured:

connect-src https://directline.botframework.com wss://directline.botframework.com;

For example, in a strict CSP environment, the basic policy to connect to Azure Bot Services should be:

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'none'; base-uri 'none'; connect-src blob: https://directline.botframework.com wss://directline.botframework.com; img-src blob: data:; script-src 'strict-dynamic'; style-src 'nonce-a1b2c3d'"
/>

Additional source for script-src will be needed depending on whether nonce or 'self' source is used to load Web Chat.

Additional directives may be needed to operate the bot properly. For example, if the bot would display an image, an additional img-src directive may be added to allow images from a different domain. For details, please see [#3445](#3445.

Explanation of directives

  • default-src 'none'
    • For strict CSP: deny access unless otherwise specified
  • base-uri 'none'
  • connect-src blob: https://directline.botframework.com wss://directline.botframework.com
    • blob: is used for uploading attachments
    • REST call to https://directline.botframework.com for starting conversation, posting activities, etc.
    • Web Socket connection to wss://directline.botframework.com for receiving activities
    • When using protocols other than Direct Line or Web Chat channel, the source will be different
  • img-src blob:
    • blob: will allow images in Web Chat to be loaded via blob: scheme. Types of images using blob: scheme:
      • Bot attached images using data URI, will be converted to URL with scheme of blob:
      • User uploaded images are downscaled as thumbnails with scheme of blob:
  • img-src data:
    • data: will allow images in Web Chat to be loaded via data: scheme. Types of images using data: scheme:
      • Inlined assets. For example, connectivity status spinner and typing indicator
  • script-src 'strict-dynamic'
    • (Optional) strict-dynamic will allow Web Chat to use Web Worker to downscale image on upload
      • If strict-dynamic is not provided, Web Chat will fallback to main thread to downscale image
  • style-src 'nonce-a1b2c3d'
    • 'nonce-a1b2c3d' will allow CSS injection through this nonce. This should be a per-policy, unique, and unguessable value
    • Web Chat inject <style> element using emotion with nonce attribute
    • You will need to pass this nonce when rendering Web Chat

Setting up the nonce

When rendering Web Chat, pass the nonce as a prop named nonce.

WebChat.renderWebChat({
  directLine: createDirectLine({ token }),
  nonce: 'a1b2c3d'
});

Limitations

Currently, the nonce is used for injecting <style> elements only. It is not used for other elements, including <img> and other media elements. For details, please see #3445.

Nonce exposure

Any code executed inside Web Chat context could retrieve the nonce. When adding customization code to Web Chat, please make sure the nonce is not exposed.

Additional context

Please refer to Content Security Policy sample for a hosted live demo.