I'm working on an app which is using dhtmlxSuite 4.2 and I was working on refactoring our code base in order to support Content Security Policy. For now, we are removing the 'unsafe-inline' and we are using a nonce to secure inline scripts.
Could you please provide some information regarding dhtmlx suite 4.2, does it support CSP and if yes, how can I configure it to support CSP using nonce? I was looking over internet but I'm not able to find any relevant documentation for this version.
Our script-src directive in CSP header is:
script-src 'self' 'strict-dynamic' 'unsafe-eval' 'nonce-r4nd0m'
I'm using the following line to add the dhtmlx .js files to the code:
<script nonce="r4nd0m" src="/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js">
The nonce and src values are not relevant, I've added them just for this example.
Currently the following error shows in browser:
`[Report Only] Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'strict-dynamic' 'unsafe-eval' 'nonce-xk0G314zlbshNaCyRmCZfqZNr3N8EEG3ZYSUkRvnfSs=
dhtmlXCellObject._detachObject|#|dhtmlxcontainer.js:1010
dhtmlXCellObject.unloadView|#|dhtmlxcontainer.js:356
dhtmlXCellObject._unload|#|dhtmlxcontainer.js:547
dhtmlXWindows._winClose|#|dhtmlxwindows.js:874
dhtmlXWindows._winButtonClick|#|dhtmlxwindows.js:1719
dhtmlXWindows._winMouseDownHandler|#|dhtmlxwindows.js:998
obj.callEvent|#|VM2422 dhtmlxcommon.js:929
_winOnMouseDown|#|dhtmlxwindows.js:259`
My understanding is that dhtmlx in creating some inline events causing to be non compliant with CSP.
I'm expecting to find a way to have dhtmlx suite 4.2 compliant with CSP filter.
Below is some some extract from the dhtmlx code base where from he stack trace:
enter image description here
enter image description here
Thank you!
Related
I have added a CSP header to my application. Upon testing I have recently run into the following issue where the browser shows the CSP Error , however doesn't generate a hash in the error message but just mentions a sha256-... rather than giving a complete hash to update my CSP .
here's the script part of my CSP
script-src 'self' 'unsafe-hashes' 'sha256-02+9afqNibYPDM/TB2fad2sksCmTxyAgGsPKLRQ0ntE=' 'sha256-bqnX1qMR/f/kfH2KyJXshNn7cxXIhJD06spayb3Llyo=' 'unsafe-eval'
I am working on Drupal 9.3.8 site and using CSP module to setup the CSP header.
There are few core dependencies or contrib modules which require unsafe-inline in CSP header but scanner recommends not the have unsafe-inline, so looking for the fix to remove the use of unsafe-inline.
Dependencies that require unsafe-inline:
Drupal core ckeditor, modernizer and AJAX calls - which can be handled by CSP module used above which adds unsafe-inline only when ckeditor renders, but not when only modernizer is required.
Google Analytics module - which adds the script inline instead of putting it in a file and include it on each page. We have the patch compatible with D7 but not for D8/9.
AntiClickJack snippet which is as below:
<style id="antiClickjack">body{display: none !important;}</style>
Solutions:
Installed and setup CSP module as mentioned above to handle Drupal core libs/dependencies requirement.
To handle only rendering of modernizer.js and unsafe-inline, will need customization to the CSP module.
For antiClickJack and google analytics script and style tags, cannot add hash or nonce as unsafe-inline will be ignored which will break the handling of Drupal core requirements
CSP header that I have is as below:
Content-Security-Policy: default-src 'self'; connect-src 'self' www.google-analytics.com; frame-src 'none'; img-src 'self' data: https://www.google-analytics.com; object-src 'none'; script-src 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com 'unsafe-inline'; script-src-elem 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'none';
Questions:
How to handle antiClickJack snippet to avoid the use of unsafe-inline?
Do we have a customized approach to add the google analytics script to a file instead of adding it inline?
Add the following hash to your style-src: 'sha256-NHgJfLahpnqTyd+gTNfZfM2wjTUfB3Wk1CvqZfZpeHY=' Most browsers will suggest a hash for you, or you can use https://report-uri.com/home/hash. Note that the hash works as long as the content is unchanged, so only use it for static code.
Google Analytics and Google Tag Manager are not easy to implement without 'unsafe-inline'. You might be able to move to a file, but I don't know if that has an impact on the order of events. You will also need to look into CSP nonces for the code they insert. You will need to configure them to use your nonce and make sure that a new nonce is created for every page load. My experience is that setting a custom value for the nonce and change it for every page load is not trivial or possible within some frameworks, but worth giving a try.
I am currently writing a browser extension that supports Manifest-v2 and v3 which requires the CashJS library (lightweight version of JQuery) for convenience. I would like my content script content/index.js to be able to use this library content/cash.min.js but I get a CSP violation stating:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-wThdlNeRf1Fp3UGuX3Ch9caqVJ8S7Wn41fdlaVxsRDE='), or a nonce ('nonce-...') is required to enable inline execution.
Here is my manifest.json (for v3):
...
"content_scripts": [{
...
"js": [
"content/cash.min.js",
"content/index.js"
]
}],
...
I have tried using content_security_policy in various ways (hashes & enabling unsafe-inline) but Chrome refuses it:
"content_security_policy": "script-src 'self' 'sha256-wThdlNeRf1Fp3UGuX3Ch9caqVJ8S7Wn41fdlaVxsRDE='; object-src 'self';"
It gives the error Invalid value for 'content_security_policy'. when attempting to load the extension. I have read this page from Mozilla as well as other posts discussing this issue but haven't found a solution that fits my needs.
This article from Chrome's documentation mentions using their sandboxing feature but it only seems to work for webpages, not the scripts themselves.
I really don't want to intercept the headers as proposed here.
Any help would be much appreciated!
I have ASP.NET Core application and i am using Telerik's UI for ASP.NET Core framework for certain widgets like Date, DropDownList, Charts etc.
Application is loading all javascripts, images, css from its own server. So i have enabled CSP policy as below
script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self';
media-src 'none';
object-src 'none';
child-src https://xxxx.yyyy.com;
report-uri http://myapplication/csp/report;
However when the page load i see error in chrome's console
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
Either the 'unsafe-inline' keyword, a hash
('sha256-oii70XYoqukWS9204nbwatxgYOYcr06+rftc4egdfUk='), or a nonce
('nonce-...') is required to enable inline execution
this error is repeated for several Kendo widgets that i'm using on that page. For example date widget. In cshtml i have configured date as below
#(Html.Kendo().DatePicker()
.Name("sbDate")
.HtmlAttributes(new { #class = "mydate" }))
which gets render in html as
<input class="mydate" id="sbDate" name="sbDate" type="date" value="" /><script>jQuery(function(){jQuery("#sbDate").kendoDatePicker({"format":"M/d/yyyy","footer":false});});</script>
I have already gone through Telerik's suggestion here and here for CSP. And as per the suggestion i only i have to add unsafe-eval to get widgets working. However looks like that is not true. I also have to add unsafe-inline to get widgets working.
But the whole point of enabling CSP is to not allow inline scripts.
Questions
Is there any way to solve this issue?
Update 1
Widgets only works in IE 11 without adding unsafe-inline. In chrome and IE edge widget requires unsafe-inline to work.
The solution below might work (i have not tried yet)
1> Add Deferred method for each kendo widget. Like
#(Html.Kendo().DatePicker().Name("BeginDate").Deferred())
2> In each view that is using Kendo control, at the bottom add the script tag
<script asp-add-nonce="true">
#Html.Kendo().DeferredScripts(false)
</script>
Note that asp-add-nonce is not out of the box from asp.core. You have to install Joonasw.AspNetCore.SecurityHeaders nuget library. I found this article from the author that shows how to configure CSP for .net core application and also how to generate new nonce for each request.
3>Dont configure CSP policy in web.config because we need different nonce value for each request, instead configure the CSP policy using Joonasw.AspNetCore.SecurityHeaders middleware as mentioned in the article.
4>I thinks we don't need to add unsafe-inline if we use random nonce (unless you are targeting to older browsers)
I can't really tell if this would solve your issue, but in our Application, we are using the Deferring feature, but for other reasons. Our reason is that we load all scripts (esp. jquery.js) at the end of the page. But the side effect is that no jQuery script calls are rendered into the page anymore. You can control the place to generate all scripts by executing #Html.Kendo().DeferredScripts() (but you will find more help in the docs above). Anyway, probably in the context of CSP, even that <script> block at the very end of the page is still considered "inline". But give it a try.
I have several QUnit tests running successfully for our extension.
I'd like to gather code coverage information, and thought I would use blanket.js to do so.
However, when I click the 'Enable coverage' button, I see several CSP violation messages in the JavaScript Console:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'
I've tried updating the content security policy of the extension, adding 'unsafe-inline' and 'unsafe-eval'. With the 'unsafe-inline', Chrome doesn't load the extension. And the 'unsafe-eval' option doesn't fix the problem.
Below is the snippet of CSP from my manifest.json file:
"content_security_policy": "default-src 'unsafe-inline' 'self'"
Is there a way to get blanket.js to run successfully for a Chrome extension?
If not, is there an alternative to blanket.js for Chrome extensions?
I'm currently using:
Chrome 34
blanket - v1.1.5
QUnit v1.10.0
Any help would be appreciated.
You can try changing the implementation of _addScript to:
function(data) {
(1,eval)(data);
}
And adding 'unsafe-eval' to your CSP.