Preventing Content Security Policy violations with ESLint

Content Security Policy (CSP) stands as an essential element in bolstering the security of web applications. In this article, I will demonstrate different approaches for harnessing ESLint to proactively identify common programming patterns that can lead to CSP breaches.

“Unsafe-eval”: script-src

It’s generally recommended to establish a strict Content Security Policy to mitigate security risks, which often includes disallowing ‘unsafe-eval’.

By preventing the page from executing text-to-JavaScript functions like eval(), the website will be safer from vulnerabilities.

In the following examples, a malicious user could change a URL parameter and get it dynamically executed under the application context.

eval

var op1 = getUrlParameter("op1");
var sum = eval(`${op1}`);

To avoid the “unsafe-eval” alert, you should not use eval() and add the following ESLint rule:

"no-eval": "error"

new Function

var op1 = getUrlParameter("op1");
new Function('alert("' + op1 +'")');

To avoid the “unsafe-eval” alert, you should not use new Function() and add the following ESLint rule:

"no-new-func": "error",

setTimeout

var op1 = getUrlParameter("op1");
var sum = setTimeout(`${op1}`, 100);

To avoid the “unsafe-eval” alert, you should pass a function as the first parameter to setTimeout instead of a string. For example, use setTimeout(function() { /* your code here */ }, delay).

Use of the following ESLint rule will stop this vulnerability entering your codebase:

"no-implied-eval": "error",

setInterval

To avoid the “unsafe-eval” alert, you should pass a function as the first parameter to setTimeout instead of a string. For example, use setInterval(function() { /* your code here */ }, delay).

var op1 = getUrlParameter("op1");
var sum = setInterval(`${op1}`, 1000);

Use of the following ESLint rule will stop this vulnerability entering your codebase:

"no-implied-eval": "error",

setImmediate

To avoid the “unsafe-eval” alert, you should pass a function as the first parameter to setTimeout instead of a string. For example, use setImmediate(function() { /* your code here */ }).

var op1 = getUrlParameter("op1");
setImmediate(`${op1}`)

Use of the following ESLint rule will stop this vulnerability entering your codebase:

"no-implied-eval": "error",

“unsafe-inline”: style-src

It’s generally recommended to establish a strict Content Security Policy to mitigate security risks, which often includes disallowing ‘unsafe-inline’.

let element = document.querSelector("div");
div.setAttribute("style", "color:red;")

To avoid the “unsafe-inline” alert, you should either use a CSS class or use the element.style property directly. For Example: element.style.color=”red”;

In order to prevent developers adding inline styles using JavaScript. I.e using the element.setAttribute(“style”,”…”), you can use the following ESLint rule:

"no-restricted-syntax": [
    "error",
    {
        "selector": "CallExpression[callee.property.name='setAttribute'][arguments.0.value='style']",
        "message": "You must not use setAttribute('style') to set styles. Use element.style or a css class instead."
    }
],

For more information on this rule and how to create other similar rules see this post

Conclusion

By implementing these rules, you can ensure that developers don’t use these anti patterns and encourage them to utilize safer alternatives within your web applications.

{
rules: {
        "no-eval": "error",
        "no-new-func": "error",
        "no-implied-eval": "error",
        "no-restricted-syntax": [
            "error",
            {
                "selector": "CallExpression[callee.property.name='setAttribute'][arguments.0.value='style']",
                "message": "You must not use setAttribute('style') to set styles. Use element.style instead."
            }
        ],
   }
}