How to Inject jQuery with Chrome in Developer Console?

Unfortunately, now because of what appears to be the newest craze in preventing "XSS" (cross-site scripting), those plugins no longer work. There may be a noble purpose behind these changes, and I'm just trying to understand WHAT changed. I think it has something to do with "content security policy", which I've only recently heard of and have very little knowledge of.

Yes. The reason why these plugins don't work is because they're indistinguishable from MITM (man-in-the-middle) attacks where malicious attackers can inject arbitrary JavaScript. CSP (Content-Security-Policy) is designed to prevent this from happening by only running trusted JavaScript from a whitelist of sources. Unfortunately, there's currently no easy way to deal with this in either Chrome or Firefox until the developers whitelist injected JavaScript/CSS from plugin authors. This is unlikely to happen since Chrome has a guide for app developers on how to comply with the CSP policy.

In the meanwhile, I recommend you get caught up on the OWASP article's on XSS so you can learn why it is so important.

Not recommended approach

You can download the "Disable Content-Security-Policy" addon from the Chrome store. Use this only for local development. Keep in mind if you do this, a malicious ISP or dedicated attacker can still inject scripts in a MITM attack (if they have control of your router for example).

Recommended approach

Don't inject jQuery, but put it in your page. Add a CSP tag:

<meta http-equiv="Content-Security-Policy" content="...">

Here you would put something like default-src 'self'; script-src https://cdn.com/jquery where cdn.com is where you're downloading jQuery from. Go one step further and add a subresource integrity hash. If the CDN ever gets compromised, becomes malicious, or you become MITM'd, the hash will not match and the malicious script won't be loaded. Furthermore, you can never really trust addons for the same reason.

If you decide not to use a CDN, you can use a package manager (like node or Bower) that will download a specific version of jQuery for you. Then just load it locally. Of course for production, you generally want to be using the CDN so that your visitors can download from a closer data-center. Also if you are using Cloudflare, it's likely that they'll have cached that specific version of jQuery, so they don't have to keep downloading it.

Prototyping

If your motivation is prototyping, then there are workarounds:

Not recommended: You can scrape the website, do your modifications, and then present to the client.

Recommended: Instead of doing modifications on a live website, you should be doing rapid prototyping. The advantages of this are:

• If you are doing a sitdown with the client, the client can see exactly what you're doing

• You are dealing with abstract prototypes and not concrete details, which should be laid down in the contract. See ux.stackexchange.com for questions on skeleton screens.

• You can explain to the client why you cannot do X (inject jQuery into live sites) when you should be doing Y (see rest of answer) which will hopefully convince them to adopt better security practices

• The prototypes can be stood up and quickly thrown away, and you can even keep revisions around for comparison purposes. Changes to a live site don't make this easy

Use Snippets.

1. Copy the jQuery code, and paste it into a Snippet.
2. Run the Snippet.

Here is a direct method that has always worked for me:

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

Just paste each line into the console, one at a time. (Actually, it works fine if you select the lines and paste them into DevTools Console all-at-once).

You might immediately see an error: Uncaught ReferenceError: jQuery is not defined. Ignore it - DevTools is pulling your leg. (Google's weak attempt at humor, maybe...)

Then, in DevTools console, test it:

$('div').length; //press Enter

If you get an error, try it this way:

jQuery('div').length

Hopefully, the first will work - but sometimes you'll need to use the second method.

This code is thanks to jondavidjohn, from this original post.