Reputation: 333
Browser - Chrome Version 85.0.4183.102
There are lot of threads around this topic but I could not find what is the safest and correct way to deal with 3rd party libraries. I am using kendo grid (jQuery) in my chrome extension.. it has "unsafe-eval" and "unsafe-inline"... unless I set the below entry in manifest.json its not working.
"content_security_policy": "font-src data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; object-src 'self';"
Since its not safest practice.. how can I bypass this with hash or nonce.
Note: The Kendo library is downloaded and referred from local machine. (No CDN references)
'unsafe-line'
When I remove 'unsafe-inline' as expected its giving out 5 errors in my case and providing 5 different sha-256 hashes. I replaced 'unsafe-inline' with 5 hashes but still getting the same error.
Below is the error when I tried only with 1 hash.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-lzhPGNqxpwmBda/ftMrdga7dSTDWPq2rpjz66R6TVFw='". Either the 'unsafe-inline' keyword, a hash ('sha256-lzhPGNqxpwmBda/ftMrdga7dSTDWPq2rpjz66R6TVFw='), or a nonce ('nonce-...') is required to enable inline execution.
'unsafe-eval'
When I remove 'unsafe-eval' as expected giving out errors with no generated hash to replace.
'font-src data:'
yet to attempt to bypass.
I even tried nonce but did not work.
am I missing something? or do I need to live with 'unsafe-inline' and 'unsafe-eval'. If yes, what is the potential risk? I am planning to release this extension to public.
EDIT: I tried sandbox as suggested below.
Here is what I did.
index.html
<html>
<head>
<link href="css/iframe.css" rel="stylesheet">
</head>
<body>
<iframe id="iframe" src="sandbox.html"></iframe>
</body>
</html>
sandbox.html has kendo reference <script src="js/kendo.all.min.js"></script>
Here is the manifest.json change
"sandbox": {
"pages:": [
"sandbox.html"
]},"content_security_policy": "sandbox allow-scripts allow-same-origin allow-popups;"
I am still getting errors with kendo. Any suggestions?
Upvotes: 1
Views: 4160
Reputation: 2194
{
"content_security_policy":{
"extension_page": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" ,
"sandbox": "extension_page": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'" ,
}
}
Upvotes: -1
Reputation: 8496
'unsafe-inline' in scripts and styles
Chrome unintentionally misleads you with hashes for inline styles. The same is with hashes for inline scripts:
<script>...</script>
consiedres as inline and can be allowed with 'nonce-value' or/and 'hash-value' tokens.<tag onEvent='event_handler_script'>
and <a href='javascript:click_handler_script'>
both considers as inlnie script but cannot be allowed by 'nonce-value' or/and 'hash-value' tokens. But Chrome calculates sha256 for them, because it prepares to implement 'unsafe-hashes' token (spec section is not normative Therefore is case (1) you could easily ged rid of 'unsafe-inline', in case (2) - you need to modify code first.
'unsafe-eval' in scripts
Content Security Policy spec does not provide way to allow unsafe scripts constructions via 'nonce/hash' tokens. Changes of the script code will be required, in some cases - purely "cosmetic".
CSP considers as eval-constructs:
Note that setTimeout()/setInterval() are "eval" only when callback function passed as a string. If callback is an anonymous funct or "function by name" - those not fall under eval. In this case, you can easily get rid of eval without changing the logic of the script.
Upvotes: 2