#11249 closed bug (fixed)

Opened January 28, 2012 03:00AM UTC

Closed July 07, 2012 09:49PM UTC

CSP error in Chrome 18 when loading jQuery 1.7.1

Reported by:	adblockforchrome	Owned by:	dmethvin
Priority:	low	Milestone:	1.8
Component:	support	Version:	1.7.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

jQuery version 1.7.1

Chrome version 18.0.1003.1

Repro:

1. Load in Chrome the extension that is attached to this post (unzip the .zip then drag the .crx onto Chrome).

2. Open the Web Inspector Console on the page that appears.

Expected results:

No errors. The page does nothing but load jQuery.

Actual results:

5 "Refused to apply inline style because of Content-Security-Policy." errors.

Test case

You can unzip the attachment and drag the .crx onto Chrome to install it. Here is the contents of the extension. The important part is that manifest.json enables CSP, and page.html includes jQuery.

manifest.json:

{
  "name": "jQuery CSP fail",
  "version": "1",
  "permissions": [ "http://*/*", "https://*/*" ],
  "content_security_policy": "default-src 'self'",
  "background_page": "background.html"
}

background.html:

<script src="background.js"></script>

background.js:

chrome.tabs.create({url:"page.html"});

page.html:

<!DOCTYPE html>
<html>
  <head><script src="jquery.min.js"></script></head>
  <body>
    Open the Web Inspector console to see the jQuery errors.
  </body>
</html>

jquery.min.js:

The minified jQuery 1.7.1 code.

Attachments (0)

Change History (17)

Changed January 28, 2012 03:01AM UTC by sindresorhus comment:1

Some reading material here: http://code.google.com/chrome/extensions/trunk/contentSecurityPolicy.html

Changed January 28, 2012 03:04AM UTC by sindresorhus comment:2

description:	jQuery version 1.7.1 \ Chrome version 18.0.1003.1 \ \ Repro: \ 1. Load in Chrome the extension that is attached to this post (unzip the .zip then drag the .crx onto Chrome). \ 2. Open the Web Inspector Console on the page that appears. \ \ Expected results: \ No errors. The page does nothing but load jQuery. \ \ Actual results: \ 5 "Refused to apply inline style because of Content-Security-Policy." errors. \ \ --- \ \ You can unzip the attachment and drag the .crx onto Chrome to install it. Here is the contents of the extension. The important part is that manifest.json enables CSP, and page.html includes jQuery. \ \ == manifest.json: \ \ {{{ \ { \ "name": "jQuery CSP fail", \ "version": "1", \ "permissions": [ "http:///", "https:///" ], \ "content_security_policy": "default-src 'self'", \ "background_page": "background.html" \ } \ }}} \ \ == background.html: \ \ {{{ \ <script src="background.js"></script> \ }}} \ \ == background.js: \ \ {{{ \ chrome.tabs.create({url:"page.html"}); \ }}} \ \ == page.html: \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head><script src="jquery.min.js"></script></head> \ <body> \ Open the Web Inspector console to see the jQuery errors. \ </body> \ </html> \ }}} \ \ == jquery.min.js: \ The minified jQuery 1.7.1 code. → jQuery version 1.7.1 \ Chrome version 18.0.1003.1 \ \ Repro: \ 1. Load in Chrome the extension that is attached to this post (unzip the .zip then drag the .crx onto Chrome). \ 2. Open the Web Inspector Console on the page that appears. \ \ Expected results: \ No errors. The page does nothing but load jQuery. \ \ Actual results: \ 5 "Refused to apply inline style because of Content-Security-Policy." errors. \ \ [http://forum.jquery.com/viewFile.do?fileId=14737000002990073&forumGroupId=14737000000003003 Test case] \ \ --- \ \ You can unzip the attachment and drag the .crx onto Chrome to install it. Here is the contents of the extension. The important part is that manifest.json enables CSP, and page.html includes jQuery. \ \ == manifest.json: \ \ {{{ \ { \ "name": "jQuery CSP fail", \ "version": "1", \ "permissions": [ "http:///", "https:///" ], \ "content_security_policy": "default-src 'self'", \ "background_page": "background.html" \ } \ }}} \ \ == background.html: \ \ {{{ \ <script src="background.js"></script> \ }}} \ \ == background.js: \ \ {{{ \ chrome.tabs.create({url:"page.html"}); \ }}} \ \ == page.html: \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head><script src="jquery.min.js"></script></head> \ <body> \ Open the Web Inspector console to see the jQuery errors. \ </body> \ </html> \ }}} \ \ == jquery.min.js: \ The minified jQuery 1.7.1 code.

description:

jQuery version 1.7.1 \ Chrome version 18.0.1003.1 \ \ Repro: \ 1. Load in Chrome the extension that is attached to this post (unzip the .zip then drag the .crx onto Chrome). \ 2. Open the Web Inspector Console on the page that appears. \ \ Expected results: \ No errors. The page does nothing but load jQuery. \ \ Actual results: \ 5 "Refused to apply inline style because of Content-Security-Policy." errors. \ \ --- \ \ You can unzip the attachment and drag the .crx onto Chrome to install it. Here is the contents of the extension. The important part is that manifest.json enables CSP, and page.html includes jQuery. \ \ == manifest.json: \ \ {{{ \ { \ "name": "jQuery CSP fail", \ "version": "1", \ "permissions": [ "http://*/*", "https://*/*" ], \ "content_security_policy": "default-src 'self'", \ "background_page": "background.html" \ } \ }}} \ \ == background.html: \ \ {{{ \ <script src="background.js"></script> \ }}} \ \ == background.js: \ \ {{{ \ chrome.tabs.create({url:"page.html"}); \ }}} \ \ == page.html: \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head><script src="jquery.min.js"></script></head> \ <body> \ Open the Web Inspector console to see the jQuery errors. \ </body> \ </html> \ }}} \ \ == jquery.min.js: \ The minified jQuery 1.7.1 code. → jQuery version 1.7.1 \ Chrome version 18.0.1003.1 \ \ Repro: \ 1. Load in Chrome the extension that is attached to this post (unzip the .zip then drag the .crx onto Chrome). \ 2. Open the Web Inspector Console on the page that appears. \ \ Expected results: \ No errors. The page does nothing but load jQuery. \ \ Actual results: \ 5 "Refused to apply inline style because of Content-Security-Policy." errors. \ \ [http://forum.jquery.com/viewFile.do?fileId=14737000002990073&forumGroupId=14737000000003003 Test case] \ \ --- \ \ You can unzip the attachment and drag the .crx onto Chrome to install it. Here is the contents of the extension. The important part is that manifest.json enables CSP, and page.html includes jQuery. \ \ == manifest.json: \ \ {{{ \ { \ "name": "jQuery CSP fail", \ "version": "1", \ "permissions": [ "http://*/*", "https://*/*" ], \ "content_security_policy": "default-src 'self'", \ "background_page": "background.html" \ } \ }}} \ \ == background.html: \ \ {{{ \ <script src="background.js"></script> \ }}} \ \ == background.js: \ \ {{{ \ chrome.tabs.create({url:"page.html"}); \ }}} \ \ == page.html: \ \ {{{ \ <!DOCTYPE html> \ <html> \ <head><script src="jquery.min.js"></script></head> \ <body> \ Open the Web Inspector console to see the jQuery errors. \ </body> \ </html> \ }}} \ \ == jquery.min.js: \ The minified jQuery 1.7.1 code.

Changed January 28, 2012 10:10PM UTC by dmethvin comment:3

owner:	→ adblockforchrome
status:	new → pending

Chrome 18 is not released, right? Does it work in Chrome 16? If so it sounds like this should be reported to the Chrome bug tracker.

Changed January 30, 2012 01:58AM UTC by davidhong comment:4

Maybe refer to this: http://code.google.com/p/chromium/issues/detail?id=105796

Changed February 13, 2012 08:16AM UTC by trac-o-bot comment:5

resolution:	→ invalid
status:	pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Changed March 20, 2012 12:05AM UTC by rwaldron comment:6

#11487 is a duplicate of this ticket.

Changed March 20, 2012 12:06AM UTC by rwaldron comment:7

resolution:	invalid
status:	closed → reopened

Reopening for review

Changed March 20, 2012 02:42PM UTC by Jon Oberheide comment:8

CSP incompatibility (either through inline js or inline style setting) will definitely become more of an issue for JS libs like jQuery as CSP adoption increases.

Changed March 21, 2012 05:08PM UTC by trhaynes comment:9

Is there a reason why jQuery applies inline styles for effects instead of modifying the DOM directly (element.style.foo = bar). The former will raise these "Refused to apply inline style" errors while the latter will not.

Changed April 23, 2012 04:37PM UTC by rwaldron comment:10

status:	reopened → pending

We need confirmation that this is still an issue.

Changed May 08, 2012 08:14AM UTC by trac-o-bot comment:11

resolution:	→ invalid
status:	pending → closed

Changed June 12, 2012 02:47AM UTC by davidben comment:12

This ticket is still valid. jQuery uses inline styles in a number of places which trips up the default Content-Security-Policy. (Inline style is forbidden to prevent attacker-injected styles from rearranging UI and potentially causing a clickjacking attack and more complex attacks like using attribute selectors to sniff the contents of a form field.)

I can't seem to attach files, but here's a patch that fixes it. I don't have easy access to IE6-8, and this is in I imagine a somewhat hairy part of the code. But I believe I haven't regressed the unit tests Firefox, Safari, Chrome, Opera, and IE9.

http://web.mit.edu/davidben/Public/jquery-inline-style.patch

Changed June 28, 2012 10:33PM UTC by anthonyryan1@gmail.com comment:13

This bug valid. What is the process for having this re-opened?

Changed July 07, 2012 08:45PM UTC by dmethvin comment:14

resolution:	invalid
status:	closed → reopened

Changed July 07, 2012 08:48PM UTC by dmethvin comment:15

#12037 is a duplicate of this ticket.

Changed July 07, 2012 08:49PM UTC by dmethvin comment:16

component:	unfiled → support
milestone:	None → 1.8
owner:	adblockforchrome → dmethvin
priority:	undecided → low
status:	reopened → assigned

Changed July 07, 2012 09:49PM UTC by dmethvin comment:17

resolution:	→ fixed
status:	assigned → closed

https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3

Side navigation