Elements advanced integration features

BILL provides support for Content Security Policy (CSP). CSP is a security layer for protection against any cross-site scripting (XSS) and data injection attacks. In this section, we explain how you can implement a CSP in your web page.

If you have a CSP implementation for your website, set the Content-Security-Policy header at the web server level. It is recommended that you use a nonce in the CSP header for secure communication between server and client.

A nonce is a randomly-generated token that is generated at the web server level each time the CSP header is sent to the client. For example, each time your web page loads a BILL Element.

👍

nonce value requirements

The nonce value must be unique, not easily identifiable, and used only one time.

// CSP header sent from web server
Content-Security-Policy:
   default-src 'self' 'nonce-{nonce-value}';
   script-src 'nonce-{nonce-value}';

Nonce at the <script> level

Set the nonce value in the <script> tag of your integration.

// <script> tag in your integration
<script type="module" nonce="{nonce-value}">
  import { init } from 'https://widgets.stage.bdccdn.net/bootloader/index.js';
  
  // Element authentication & initialization

</script>

Nonce at the CSS level

Set the nonce value in the <style> tag of your integration.

// <style> tag in your integration
<style nonce="{nonce-value}">
  
  // Element CSS styling and theme
  
</style>