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:">

OWASP Benchmark

It is normal for applications to be expected to pass Application Security Testing. If your application uses ag-Grid, then ag-Grid must also pass these standards.

To assist with this every production release of ag-Grid is tested against the OWASP Benchmark using the SonarQube utility. The project modules ag-grid-community and ag-grid-enterprise pass with 0 vulnerabilities.

Below are the results of running SonarQube against version 22.0.0 of ag-grid-community and ag-grid-enterprise.

SonarQube Results on ag-grid-community

ag-grid-community report

SonarQube Results on ag-grid-enterprise

ag-grid-enterprise report