jQuery & CSP Guide

jQuery css() function

The jQuery.css function uses the CSSOM (element.style.property=value) javascript api internally. Calls to jQuery's css() function to modify an element's inline styles may trigger CSP violations in older versions of jQuery (<3.0.0). Not because of the style assignment itself, but due to other internal jQuery operations (such as injecting <style> elements to compute default display values) that the call may invoke.

In jQuery 3.0+, these internal CSP issues were resolved. Where upgrading isn't possible, using addClass with predefined CSS classes instead of setting inline styles with css() can help avoid some CSP conflicts.

jQuery attr() function

jQuery code that calls the attr() function to set the style attribute, or any javascript event handler attribute (eg onclick, onmouseover, etc) of an element will be blocked by CSP.

For jQuery code that attempts to set a javascript event handler attribute, you should change such code to use jQuery's event handlers instead if possible. For example:

Don't do this:

$(selector).attr('onclick', 'doSomething()');

Do this instead:

$(selector).click(doSomething);

Using the jQuery click or on() event handlers hook directly into the browser events without needing to inject HTML attributes into the DOM. CSP is cool with that.

CSP Gotchas with jQuery

Potential 'unsafe-eval' in jQuery.globalEval

jQuery.globalEval() calls eval() internally. Any code path that uses it will require 'unsafe-eval' in script-src - or the code must be refactored.

Common triggers:

• $.globalEval() - direct eval wrapper
• $.getScript() - fetches a script and evaluates it (in older jQuery < 2.2.0; modern versions append a <script> tag instead, but for same-origin scripts they inject the code as text, which still triggers 'unsafe-eval')
• $.ajax() with dataType: "script" - same as $.getScript()
• jQuery < 1.9 JSON parsing — falls back to eval() when JSON.parse is unavailable (not an issue on modern browsers)

Inline Event Handlers in jQuery-Generated HTML

jQuery's .html(), .append(), .prepend(), .after(), .before(), .replaceWith() can inject HTML containing inline event handlers (e.g., onclick). These are subject to CSP just like static HTML.

If jQuery sees a <script> tag inside a string passed to one of these functions, it will strip it out and try to execute it via globalEval (triggering 'unsafe-eval').

Audit step: Search for .html(, .append( where the argument contains onclick=, onload=, <script, etc.

getScript Eval Issue

jQuery executes same-origin scripts by injecting their content into a script tag's .text property, which browsers block under the unsafe-eval policy.

For relative path requests like $.getScript("/x.js"), jQuery treats it as same-origin, fetches the text via XHR, and calls globalEval. In jQuery before 1.12.0 and 2.2.0 this process was used for all scripts, not just same-origin scripts.

You can rewrite as:

$.ajax({
  url: "/x.js",
  dataType: "script",
  crossDomain: true // Forces jQuery to use a <script> tag instead of eval even for same-domain
});

If only modern browsers need to be supported, use import("/x.js") instead of $.getScript(). It is natively CSP-compatible and doesn't require the crossDomain hack. Check that the application relies on modern browser features to see if this is a good choice, otherwise use the safer crossDomain option.

Audit step: Search for .getScript or dataType: "script" with local/relative paths.

Nonce Support in ajaxSetup

If using a nonce it can be passed to ajaxSetup (requires jQuery 3.4.0 or greater):

$.ajaxSetup({
    nonce: 'your-nonce'
});

Note: With cross-origin src attributes, jQuery does not automatically attach the nonce attribute to the tag. Developers must rely on allow listing the domain in script-src.

jQuery 1.x CSP Issues

In Firefox you may get an error when loading a jQuery 1.x version with a Content-Security-Policy header. The error might look like this:

Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src"). jquery-1.12.4.js:4743

If you look at that bit of code in jQuery, you will see this:

	// Support: IE<9 (lack submit/change bubble), Firefox (lack focus(in | out) events)
	...
	// Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)
	div.setAttribute( eventName, "t" );

You can see that the jQuery authors are well aware of CSP, but are trying to patch browser features that might be lacking.

jQuery Migrate

jquery-migrate is meant to be a development tool. In production, it can introduce security risks and loosen your CSP requirements.

• Versions 1.x: Used with jQuery 1.12/2.x. Restores many legacy behaviors that rely on string-to-code evaluation.
• Versions 3.x / 4.x: Used with jQuery 3.0+. Generally safer, but can still trigger violations if it forces jQuery to use legacy script-loading paths.

jQuery UI

jQuery UI widgets often inject inline styles via .css() calls. These are applied via the DOM API (not style attributes in HTML) and are CSP-compatible — they do not require 'unsafe-inline' in style-src.

However, jQuery UI ThemeRoller CSS should be loaded from an allowed origin in style-src.

jQuery UI versions below 1.13.0 are less CSP friendly (injects style tags for example), upgrading is recommended.

Loading jQuery from a CDN

If you are loading jQuery from a CDN, you'll need to either use a nonce, hash or add the CDN to the script-src directive.

Not all CDN's have the same risk level. For example allowing the domain code.jquery.com is considerably less risky than allowing the entire cdn.jsdelivr.net domain. The jquery CDN only serves jquery, but cdn.jsdelivr.net can serve any file in any github repository (https://cdn.jsdelivr.net/gh/user/repo@version/file). So if you allow the entire domain, you are allowing all of github, and it nullifies the benefit of CSP. If you want serve scripts from a public CDN using a CSP nonce is a much better approach.

Additionally ensure that you are adding the SRI integrity attribute to the script tag when loading from third party domains, to protect against compromise of the third party.

jQuery Plugins

Many jQuery plugins inject inline <style> blocks, use the eval() function, or Load resources from third-party CDNs. Review your plugins to ensure that they are CSP compatible.

Using Bootstrap? some versions of Bootstrap require jQuery, we have a Bootstrap CSP guide as well.

Other jQuery CSP Issues

Are you aware of other issues with implementing CSP with jQuery? Let me know, so we can update this page.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy