AG Charts allows you to work with security tools and parameters to make your application meet your business requirements.
Content Security Policy (CSP) Copy Link
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. AG Charts 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 AG Charts is and why.
script-src Copy Link
The script-src policy will work only with 'self' rule.
style-src Copy Link
The style-src policy requires the unsafe-inline rule for a few reasons, including positioning tooltips, and styling canvases to accommodate for HiDPI screens.
However, you can avoid this requirement by using the styleNonce chart option as shown below. The styleNonce property should be set to a random value that changes with each page load.
{
styleNonce: '416d1177';
}
This sets the nonce attribute on any added style tags, so the chart will now work with the CSP directive style-src 'nonce-416d1177' without the need for 'unsafe-inline'.
CSP nonces are global to a page, so when a page has multiple charts, all charts must have the same styleNonce value.
Consider using a theme override in a custom theme to set the styleNonce property for all charts.
const myTheme = { overrides: { common: { styleNonce: '416d1177' }}};
const options = { theme: myTheme, ...};
img-src Copy Link
If you allow users to download charts, or use Background Images using data: urls, the img-src policy will require the data: rule.
Summary Copy Link
In summary, the minimal rule to load a chart is:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'" />
However if you are using all the features mentioned above, the rule is:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/>
Alternatively, you can use the styleNonce chart option to avoid the unsafe-inline requirement.
Security Vulnerability Testing Copy Link
Applications may be required to pass an Application Security Test prior to being put into production. If your application is using AG Charts, you will want to make sure that AG Charts has also been tested for security vulnerabilities.
AG Charts 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 Link
The SonarQube security test results for our main NPM packages are shown below:
| AG Charts Package | Result |
|---|---|
| ag-charts-community ag-charts-enterprise ag-charts-angular ag-charts-react ag-charts-vue3 |