Security

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

Content Security Policy (CSP)

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

The script-src policy will work only with 'self' rule. If you are working with expressions / code parsing inside of the grid instead of functions, it will be necessary to add the unsafe-eval rule to your policy.

Using expressions instead of functions is an option for many grid properties such as Cell Class Rules and Value Getters. Below demonstrates the difference where expressions are used instead of functions.

// this column definition does NOT use expressions. // no need for unsafe-eval let colDef = { cellClassRules: { 'rag-green': function(params) { return params.value < 20; }, 'rag-amber': function(params) { return params.value >= 20 && params.value < 25; }, 'rag-red': function(params) { return params.value >= 25; } }, valueGetter: function(params) { return params.data.price * params.data.fx; } }; // this column definition does use expressions // ******** unsafe-eval is needed let colDef = { cellClassRules: { 'rag-green': 'x < 20', 'rag-amber': 'x >= 20 && x < 25', 'rag-red': 'x >= 25' }, valueGetter: 'data.price * data.fx' };

style-src

The style-src policy requires the unsafe-inline due to the DOM Row and Column Virtualisation. The technique the grid uses to display position rows requires explicit positioning of the rows and columns. This positioning is only possible using CSS style attributes to set explicit X and Y positions. This is a feature that all data grids have. Without it, the data grid would have a very low limit on the amount of data that could be displayed.

img-src

The img-src policy requires the data: rule. This is because the grid pre-loads SVG images as data strings. One example of such an image is the filter menu section divider. If the image was not preloaded, the grid would flicker when the menu shows, while the image is getting loaded.

font-src

The font-src policy also requires the data: rule. This is for the same reason the grid pre-loads SVG images as strings, it also pre-loads the icon WebFont as a string. This is to make sure icons will not be initially empty and suddenly appear after the font is downloaded.

Summary

In summary, the minimal rule to load the grid is: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src data:"> However if you are using expressions / code parsing, the rule is: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src data:">

Security Vulnerability Testing

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.

The SonarQube security test results for the latest release of ag-grid-community and ag-grid-enterprise are shown below:

SonarQube Results on ag-grid-community

ag-grid-community report

SonarQube Results on ag-grid-enterprise

ag-grid-enterprise report