Vue Data GridSecurity

The grid allows you to work with security tools and parameters to make your application meet your business requirements.

Content Security Policy (CSP) Copy

The basic information on Content Security Policy can be found on the MDN web docs website and will cover the necessary information on the subject. The grid works with CSP, but some basic configuration is necessary to have your application load correctly. Below is detailed what the minimum set of CSP rules for the grid is and why.

script-src Copy

Some optional grid features compile string expressions into code, and if you're using these then the script-src 'unsafe-eval' directive is required. But it is possible to avoid this.

1. Using expressions instead of functions is an option for many grid properties such as Cell Class Rules and Value Getters. For example, in the cellClassRules property of a column definition:

   • { 'is-negative': 'value < 0' } requires unsafe-inline so that 'value < 0' can be compiled into a function.
   • { 'is-negative': params => params.value < 0 } does not because you have provided a function.

2. By default, Advanced Filter also requires script-src 'unsafe-eval', however this can be disabled by Suppressing Advanced Filter Function Evaluation.

style-src Copy

Themes work by injecting CSS styles into the DOM when the grid initialises. By default this requires a style-src 'unsafe-inline' directive in your CSP.

You can avoid this using the styleNonce grid option.

<ag-grid-vue
    :styleNonce="styleNonce"
    /* other grid options ... */>
</ag-grid-vue>

// The nonce should be a random value that changes with each page load.
this.styleNonce = "416d1177";

This sets the nonce attribute on the style tag, so the grid will now work with the CSP directive style-src 'nonce-416d1177'.

CSP nonces are global to a page, where a page has multiple grids, every one must have the same styleNonce set. Consider using global grid options.

img-src Copy

The img-src data: directive is required because the grid uses data urls to embed SVG images in CSS files.

font-src Copy

If you are using legacy themes then the font-src data: directive is required. This is because legacy themes use data urls to embed the icon font CSS files. Theming API themes use SVG icons and so do not require this.

If you use the loadThemeGoogleFonts grid option, fonts will be loaded from the Google font CDN, which requires the font-src fonts.gstatic.com directive.

Example locked-down CSP Copy

This example CSP allows the grid to be run in a secure manner.

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'self' 'nonce-123xyz'; img-src 'self' data:">

It assumes:

1. The application loads assets from the same server ('self')
2. You do not use string expressions in grid options
3. You are using Theming API not legacy themes, and are not using loadThemeGoogleFonts
4. The random string passed to gridOptions.styleNonce on this page load is "123xyz"

Security Vulnerability Testing Copy

Applications may be required to pass an Application Security Test prior to being put into production. If your application is using AG Grid, you will want to make sure that AG Grid has also been tested for security vulnerabilities.

AG Grid is tested for a wide variety of security vulnerabilities using the SonarQube automatic security testing tool. SonarQube performs testing using a number of security rules, covering well-established security vulnerability standards such as CWE, SANS Top 25 and OWASP Top 10. For more details please refer to the section on Security-related Rules.

SonarQube Results Copy

The SonarQube security test results for our main NPM packages are shown below:

AG-Grid Package	Result
ag-grid-community
ag-grid-enterprise

Results for AG-Charts are available distinctly: AG Charts - SonarQube Results