Collect.js & Show.js

Note: please also review the HTTP proxy sections above, as Collect.js and Show.js are built on a foundation of those technologies.

Content Security Policy (CSP)

A Content Security Policy (CSP) is a computer security standard that adds a strong layer of security to your web applications. It helps to detect and mitigate Cross-Site Scripting (XSS), clickjacking, code injection, and packet sniffing attacks that can result from the execution of malicious input to your webpages. Such attacks can result in data theft, site defacement, the distribution of malware, and more.

CSPs provide a method to declare the approved origin of content that web browsers can load on a website, from JavaScript to CSS, HTML frames, fonts, images, and more. They block all other unwanted and potentially malicious input by hardcoding security rules called directives.

To enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header. It gives your enterprise website administrator the ability to control the resources a user agent is allowed to load in a webpage. It specifies server origins and script endpoints. Here is the syntax: Content-Security-Policy: <policy-directive>; <policy-directive>.

VGS strongly recommends enabling CSP for your web applications; however, when using VGS Collect or VGS Show, changes will be required to allow them to load within your application.

You will need a policy for the following domain:

• connect-src https://js.verygoodvault.com https://js3.verygoodvault.com https://vgs-collect-keeper.apps.verygood.systems

• frame-src https://js.verygoodvault.com https://js3.verygoodvault.com

• script-src https://js.verygoodvault.com https://js3.verygoodvault.com

Please use the following directives:

• default-src ‘self’

  Serves as a fallback for the other fetch directives.

• form-action ‘self’

  Restricts the URLs that can be used as the target of a form submission.

• style-src ‘self’ ‘unsafe-inline’

  Specifies valid sources for stylesheets.

• img-src ‘self’

  Specifies valid sources of images and favicons.

• media-src ‘none’

  Specifies valid sources for media using <audio>, <video>, and <track> elements.

• object-src ‘none’

  Specifies valid sources for <object>, <embed>, and <applet> elements.

• child-src ‘self’

  Defines valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.

• block-all-mixed-content Prevents loading any assets using HTTP when the page is loaded using HTTPS.