I am generating code coverage for my rust project and am trying to publish the results to Jenkins using publishHTML. All good except that when I try to view the HTML the CSS does not load because of this error:
Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
How do I fix this? I doubt I'm the first person to run into this.
I did have the thought to rewrite the generated HTML to use a local stylesheet, but I ran into weird Access permissions in the Jenkins workspace and I could not get that to work.
This is the command I am using the generate the reports:
grcov . --binary-path workspaces -s . -t html --branch --ignore-not-existing -o ./code_coverage/
I'd appreciate any suggestions on how to fix this or how to better deploy my results.
Default CSP header in Jenkins is:
sandbox; default-src 'none'; img-src 'self'; style-src 'self';
so you have to add https://cdn.jsdelivr.net/npm/ (or https://cdn.jsdelivr.net) into style-src directive.
You can use post initialization script (init hook) to run some additional things right after Jenkins starts up. Create a file, such as $JENKINS_HOME/init.groovy.d/adjust-content-security-policy.groovy (or any .groovy file in $JENKINS_HOME/init.groovy.d/ directory) with the single line of:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; default-src 'self'; img-src 'self'; style-src 'self' https://cdn.jsdelivr.net/npm/")
and it will be executed after Jenkins has started.
Pls note a Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback in the violation message. This means that default Jenkins CSP was changed and style-src directive is absent. So check files in the $JENKINS_HOME/init.groovy.d/ directory maybe you already have one with CSP settings.
Safiest way is to see in the browser console what CSP header you do have, to add style-src 'self' https://cdn.jsdelivr.net/npm/" into it and then set resulting CSP into System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "..."). Perhaps the Jenkins documentation just is behind the times.
There is a way of use jenkins.xml file if you run Jenkins on Windows. Add the property:
-Dhudson.model.DirectoryBrowserSupport.CSP="sandbox; default-src 'self'; img-src 'self'; style-src 'self' https://cdn.jsdelivr.net/npm/"
in <service><arguments> before the -jar, than restart the service. See details here and here.
After upgrading Jenkins to v2.222.1 we got the below warning message
The default Content-Security-Policy is currently overridden using the hudson.model.DirectoryBrowserSupport.CSP system property, which is a potential security issue when browsing untrusted files. As an alternative, you can set up a Resource Root URL that Jenkins will use to serve some static files without adding Content-Security-Policy headers.
we don't want to have separate source to serve static content meanwhile this warning has to be addressed, pleased provide your suggestions..
By default the CSS content will not be displayed when you publish any report using HTML Publisher plugin. Jenkins blocks the CSS based on CSP(Content Security Policy).
Ref: https://www.jenkins.io/doc/book/system-administration/security/configuring-content-security-policy/
To enable CSS content: Manage Jenkins -> Script Console and execute System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
When the CSS is enabled you get the following warning The default Content-Security-Policy is currently overridden using the hudson.model.DirectoryBrowserSupport.CSP system property, which is a potential security issue when browsing untrusted files.
To disable it just restart the Jenkins Server. The CSP will be again set to default.
When requesting .css or .js, the following message may occur (blocked:csp).
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Epaif2cHkSx/K62AHKClT5geuHQeilAdJVvUuNPdcuw='), or a nonce ('nonce-...') is required to enable inline execution.
In that case, you should deal with it like this. Temporarily relaxing Content Security Policy. Go to Manage Jenkins -> Script Console and type into console the following commands:
System.clearProperty("hudson.model.DirectoryBrowserSupport.CSP");
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox allow-same-origin allow-scripts; default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval' ; font-src * data: ");
I have a strange problem with the Jenkins HTML Publisher plugin, wherein all the fancy CSS I have added to the report is stripped out when viewed in Jenkins. If I download the report to local, I am able to see the CSS formatting. Is there a setting in Jenkins which allows CSS to be viewed?
My HTML Publisher Settings in Jenkins:
My Report Page when displayed in Jenkins :
My Report Page when displayed in Local :
Figured out the issue. Sharing it here for other users.
CSS is stripped out because of the Content Security Policy in Jenkins. (https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy)
The default rule is set to:
sandbox; default-src 'none'; img-src 'self'; style-src 'self';
This rule set results in the following:
No JavaScript allowed at all
No plugins (object/embed) allowed
No inline CSS, or CSS from other sites allowed
No images from other
sites allowed
No frames allowed
No web fonts allowed
No XHR/AJAX allowed, etc.
To relax this rule, go to
Manage Jenkins->
Manage Nodes->
Click settings(gear icon)->
click Script console on left and type in the following command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
and Press Run. If you see the output as 'Result:' below "Result" header then the protection disabled. Re-Run your build and you can see that the new HTML files archived will have the CSS enabled.
In CentOs, to enable images in html report
sudo vi /etc/sysconfig/jenkins
set following in JENKINS_JAVA_OPTION
JENKINS_JAVA_OPTIONS="-Djava.awt.headless=true -Dhudson.model.DirectoryBrowserSupport.CSP=\"default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' 'unsafe-inline' data:;\""
This will work even after restarting jenkins' server.
Directive
default-src: The default-src is the default policy for loading content such as JavaScript, Images, CSS, Fonts, AJAX requests, Frames, HTML5 Media
img-src: Defines valid sources of images.
Source Value
' self ' - Allows loading resources from the same origin (same scheme, host and port).
Usage : default-src 'self'
' unsafe-inline ' - Allows use of inline source elements such as style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) and javascript: URIs.
Usage : default-src 'unsafe-inline'
' unsafe-eval ' - Allows unsafe dynamic code evaluation such as JavaScript eval()
Usage : default-src 'unsafe-eval'
data: - Allows loading resources via the data scheme (eg Base64 encoded images).
Usage : img-src 'self' data:
Please refer more about content security policy here
Go to “Manage Jenkins” -> “Script console”
and run below command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
You can fix this by using the groovy command as specified in Vall's answer.
The effect is in place until Jenkins restarts and afterwards you have to do it again.
A solution to solve this problem is to configure a job that will do this for you whenever jenkins starts up.
You can do this by using the Startup Trigger plugin.
After you install it create a new job and you will have a new checkbox under the Build Triggers section that you will have to check.
Then add an Execute system Groovy script build step with the command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","")
Save and everything should work.
On CentOS, the below solution (which was suggested in comments of another answer) is the only one which has worked for me:
Go to: Manage Jenkins > Manage Nodes and Clouds
Click Gear icon on the right hand side for the node (by default there will be just one Node called Master)
Click 'Script Console' on the left
Enter the following into the console window: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' 'unsafe-inline' data:;")
Click Run
You should see some output in the Result section, similar to below screenshot:
My particular issue was missing images/css in Serenity BDD reports. After performing these steps my Serenity reports had all images/css rendering properly, including reports from builds which had executed prior to this change. This solution will also work for any published html-based report.
(The following solution is for Windows.)
A permanent fix is to change a line in [Jenkins directory]\jenkins.xml (for me it's at C:\Jenkins\jenkins.xml)
<executable>java.exe</executable>
<arguments>[arguments are here]</arguments>
Add the following argument to the whitespace-separated list of arguments:
-Dhudson.model.DirectoryBrowserSupport.CSP=
Then restart the Jenkins service to pick up the change.
For Ubuntu 14 version helpful was special plugins:
https://wiki.jenkins-ci.org/display/JENKINS/Startup+Trigger - To start job on jenkins startup
https://wiki.jenkins-ci.org/display/JENKINS/Groovy+plugin - To run System Groovy script
And I made a job, that starts on Jenkins restart and sets parametr.
And added system Groovy script to set parametr.
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; img-src 'self';")
Go To
Manage Jenkins --> Script console
and type in the following command:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
then Press Run. if you get the output as 'Result', then rerun the build check the HTML report format
For setting permanently create a Groovy script file $JENKINS_HOME/init.groovy, or any .groovy file in the directory $JENKINS_HOME/init.groovy.d/ with the following content:
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox allow-scripts; default-src 'self'; img-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline';")
systemctl restart jenkins
https://wiki.jenkins.io/display/JENKINS/Post-initialization+script
Open jenkins.xml file and copy arguments as below. it will fix permanently. Once its done restart your machine.
<arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -Dhudson.model.DirectoryBrowserSupport.CSP="sandbox allow-scripts; default-src 'self'; style-src 'self' 'unsafe-inline';" -jar "%BASE%\jenkins.war" --httpPort=8080 --webroot="%BASE%\war"</arguments
It's too late to respond but thought to share.
I was struggling with Jenkins deployed on Tomcat, tried execution of script, it helps but goes away if tomcat is rebooted.
Made the permanent fix by setting the property in catalina.properties in tomcat.
Properties file: tomcat_installation_dir/conf/catalina.properties
Just copy paste the below line in catalina.properties at the last (you can set it anywhere just to not mess with existing properties)
-Dhudson.model.DirectoryBrowserSupport.CSP=""
To set the system property permanently if using Jenkins-X, then create the file myvalues.yaml in the current directory, with the following content:
jenkins:
Master:
JavaOpts: >
-Dhudson.model.DirectoryBrowserSupport.CSP=
Then restart the jenkins-x platform, which can be done by upgrading it:
$ jx upgrade platform --always-upgrade
# Presumably jx.exe is used if on Windows (not tested)
To avoid actually upgrading the platform, just forcibly upgrade it to the same version:
$ version=$(jx version --no-version-check\
| grep 'jenkins x platform' | sed -e 's/^jenkins.\+ //')
$ jx upgrade platform --version ${version} --always-upgrade
For those who are using asciidoctor-maven-plugin plugin to produce an HTML document from the asciidoc file to further publish it to Jenkins, update the plugin configuration, add linkcss attribute:
<configuration>
<attributes>
<linkcss>true</linkcss>
</attributes>
<backend>html5</backend>
<outputDirectory>${project.build.directory}/generated-resources</outputDirectory>
</configuration>
We have a much simpler solution to the problem. Unless you really insist on having the HTML reports, you can just use the Warnings NG plugin (which is a good idea anyway):
https://github.com/jenkinsci/warnings-ng-plugin/blob/master/SUPPORTED-FORMATS.md
We use this for CodeNarc (Groovy), but also for Checkstyle, PMD, SpotBugs and Java warnings (Java).
In MacOS, Jenkins runs a service, that needs to create a groovy script inside $JENKINS_HOME/init.groovy.d
Call startup-properties.groovy and code :
import jenkins.model.Jenkins
import java.util.logging.LogManager
/* Jenkins home directory */
def jenkinsHome = Jenkins.instance.getRootDir().absolutePath
def logger = LogManager.getLogManager().getLogger("")
/* Replace the Key and value with the values you want to set.*/
/* System.setProperty(key, value) */
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
logger.info("Jenkins Startup Script: Successfully updated the system properties value for hudson.model.DirectoryBrowserSupport.CSP . Script location : ${jenkinsHome}/init.groovy.d")
Restart the Jenkins Service: brew services restart jenkins-lts
Re-build the job and verify the HTML report into the build
https://i.stack.imgur.com/A60BN.png
I had the same issues after adding HTTPS to my jenkins. In case you are having the same issue, the solution is easy - set your Jenkins url to use HTTPS protocol instead of HTTP. It can be configured via jenkins configuration -> jenkins url
I know this is old, but this worked great for me, and it is what seems to be recommended in the Jenkins docs. I just set the resource root to a different url served from the same location.
"It is strongly recommended to set up the Resource Root URL instead of customizing Content-Security-Policy. Most of the documentation below was written when Content-Security-Policy was first introduced and is retained for use by administrators unable to set up Jenkins to serve user content from a different domain."
We have jenkins setup configured with 1 Master and 3 slaves using SSH. Accessing jenkins via VPN, since placed in remote location.
We are able to log in, create jobs, Execute jobs successfully and got reports in email as well. But, logs are unable to open and throwing an error Opening Robot Framework report failed with asking to check the browser and java script log.
I have inspected the issue found below error Blocked script execution in 'http://xx.xx.3.9:8080/job/API_External_Staging/66/robot/report/report.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Screen shot attached for reference. I believe some where we need to enable this permission. If any body as solution please let me know.
Thanks
To fix this error add below entry to Jenkins configuration file (jenkins.xml):
-Dhudson.model.DirectoryBrowserSupport.CSP=
and restart Jenkins (with http://(jenkins_url)/safeRestart).
You have to edit /etc/default/jenkins if your Jenkins instance is on linux.
Add following lines to your config file:
JAVA_ARGS="-Dhudson.model.DirectoryBrowserSupport.CSP=\"sandbox allow-scripts allow-same-origin; default-src 'none'; img-src 'self' data: ; style-src 'self' 'unsafe-inline' data: ; script-src 'self' 'unsafe-inline' 'unsafe-eval' ;\"
Restart Jenkins:
sudo service jenkins start
This is only a workaround please read linked Jira ticket for further information.
https://issues.jenkins-ci.org/browse/JENKINS-32118
I have been using ES6/ES2015 for a project, transpiling to ES5 via Babel(ify) and bundling with Browserify all via budo. This provides a nice workflow wherein a change to a ES6 file is detected, transpiling, and incremental bundling are done in memory without any file I/O and the browser is told to refresh.
I am new to Cordova and am trying to get a similar workflow working where the browser is replaced with the native iOS/Android in-app browser reloading on changes.
I've setup my config.xml to have a content element using "http://192.168.1.8:9966/index.html" which is the IP of my laptop running budo.
I think there's a "cordova prepare" needed somewhere but I'm not sure how to integrate this or if budo needs to have copies of cordova.js or something. That I am fuzzy on...
https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1
https://github.com/mattdesl/budo
https://babeljs.io/
http://browserify.org/
Plugins being used:
com.telerik.plugins.wkwebview 0.6.5 "WKWebView Polyfill"
cordova-plugin-battery-status 1.1.0 "Battery"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-file-transfer 1.3.0 "File Transfer"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-globalization 1.0.1 "Globalization"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-network-information 1.0.1 "Network Information"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-webserver 1.0.3 "CordovaWebServer"
cordova-plugin-whitelist 1.0.0 "Whitelist"
I have no errors in the iOS simulator log (Debug > System Log).
Anyone have live reload working for ES6 and Cordova? Thanks!
OK I figured this out. No one seems to be going this route but it's pretty awesome.
Live Reload with Cordova via Budo, Babel, and Browserify
Assumptions
your dev machine has an IP of 192.168.1.8
your app's entry point or main file is src/main.js
your Cordova app's root dir is app
Budo
Run budo. Budo will also inject a script tag that talks to its LiveReload server. All of your transpiled and bundled ES5 code will be served will be from path "js/bundle.js".
budo src/main.js:js/bundle.js \
--dir=app/www \
--live="app/www/**/*" \
-t babelify | garnish
Config.xml
Development version
Update your Cordova app's config.xml, setting the content element's src property to load the app content (e.g. index.html) from your budo instance instead of the local filesystem.
<content src="http://192.168.1.8:9966/index.html" />
Production version
<content src="index.html" />
This loads the config from the filesystem as normal.
Index.html
Split your app/www/index.html file into 2 versions: development and production. Switch between them with a shell script or similar.
Both versions of index.html reference js/bundle.js via a script tag.
Development index.html
The development version of index.html needs to load the cordova.js and cordova_plugins.js as well.
In my case, I am using iOS9 and the Telerik plugin that enables WKWebView. This plugin serves assets with an internal httpd to workaround an iOS bug and can be found at http://localhost:1234. Thus, I simply load cordova.js and cordova_plugins.js from there.
<script type="text/javascript" src="http://localhost:12344/cordova.js"></script>
<script type="text/javascript" src="http://localhost:12344/cordova_plugins.js"></script>
Thus, your development index.html should have a Content Security Policy that allows for all of these things to be loaded.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' http://localhost:12344 http://192.168.1.8:*; connect-src 'self' ws://192.168.1.8:*" />
In other cases (e.g. Android), you will likely have to fiddle with symlinks and hooks.
Production index.html
You only need to load the js/bundle.js and do not need the Content Security Policy entries that reference 192.168.1.8.
Live Reload / Making Changes
When you edit a ES2015 file referenced (in)directly by src/main.js, Budo will notice the change, transpile, bundle, and then notify the client via a WebSockets connection created the LiveReload injected script.
Make changes to app/www/css/index.css (or use SASS/LESS etc and have those write to index.css). Budo will notice and will send down changes to be realized without a page reload.
Make changes to app/www/index.html and Budo will notice and send those changes down via its LiveReload server.
Notes
deviceready will only fire once as you might expect, not on every change to a ES2015 file.
Adding/removing plugins or changes to config.xml are to be realized with a rebuild: cordova run ios.
If you periodically see a file being cached after a build, clean the project and rebuild: cordova clean ios.
Telerik's WKWebView Plugin
If you are using the Telerik WKWebView plugin, use the latest from github instead of NPM.
cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView
There's a bug in the plugin code currently that mishandles loading of http-based content (start page). I have a pull request for this pending (Oct 27 2015).
#Johnny,
Welcome to the Cordova/Phonegap world. The answer you are looking for is to use the "hooks". This was design so you can add stuff to your workflow.
You can add or control, I quote:
before_build
before_clean
before_compile
before_docs
before_emulate
before_platform_add
before_platform_rm/
before_platform_ls
:::
before_prepare
(and more)
You should also read: Top Mistakes by Developers new to Cordova/Phonegap
I am updating it next weekend. This weekend I am working on a blog on whitelist, which has become a thorn in development.
FWIW: I am also working on a web components blog, but it is weeks away.
My main blog is: http://codesnippets.altervista.org/blog/
On live reload there are several developments right now. Phonegap has one named "hydration". Iconic has one, and so does MobileFirst (IBM). Right now a decent working "live reload" is badly needed. I have not had time to check any of the newer ones (whos names don't come to mind)
Best of Luck