Jenkins encountered an issue where script execution was blocked on <URL> due to the document's frame being sandboxed without the 'allow-scripts' permission set

When using an iFrame in HTML, it's always best to remember to sandbox it and set the 'allow-scripts' permission to true.

However, I'm facing an issue in my pure Angular JS application where there is no iFrame present. It runs smoothly on my local machine but upon deployment to the server, Chrome throws an error message:

"Refused to load the style 'bootstrap.min.css' because it violates the following Content Security Policy directive: 'style-src 'self''."

It blocks script execution in 'dashboard.html' due to the document's frame being sandboxed without the 'allow-scripts' permission set.

I have thoroughly checked the source code and can confirm that there are no iframes involved, making me wonder what could be causing this issue. I am using outdated versions of Chrome (26) and Firefox (10) due to organizational restrictions, which results in a similar problem with IE11 although without displaying any error messages.

Could there be something missing or misconfigured here? Any guidance or assistance would be highly appreciated.

Below is a snippet of the code I am currently working on, stripping out any trivial parts for clarity...

<html lang="en" ng-app="dashboard">
   <head>
      ...
   </head>
   <body ng-controller="DashboardCtrl">
      ...
   </body>
</html>
javascriptangularjsgoogle-chromejenkins

Answer №1

We implemented this HTML content in a specific directory for Jenkins users. Upon upgrading to the latest LTS version 1.625 of Jenkins, we encountered a new Content security policy that included a restrictive header in the response headers. As a result, browsers refused to execute stylesheets or JavaScript.

X-Content-Security-Policy: sandbox; default-src 'none'; img-src 'self'; style-src 'self';

To resolve this issue, we had to remove the mentioned header by resetting a property within Jenkins as shown below.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

Users who upgrade to Jenkins 1.625 and use the userContent folder may face similar challenges due to this security change.

For additional details, please visit

Answer №2

To find the solution, make sure to complete the following steps:

  1. First, navigate to the Jenkin home page.
  2. Find and click on Manage Jenkins.
  3. Next, locate and access the Script Console.
  4. In the console, paste the statement below and click on Run: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
  5. Once done, the css and js should load properly.

Note: If the css and js are still not loading after completing the steps above, try clearing your browser cache and cookies before refreshing the page.

Answer №3

I encountered a similar issue with the HTML Publisher Plugin.

As per Jenkins' updated Content Security Policy, you can work around it by configuring:

hudson.model.DirectoryBrowserSupport.CSP=script-src 'unsafe-inline';

UPDATE: I found that in Jenkins 2.x, I had to adjust the arguments again by setting an empty CSP value instead of script-src 'unsafe-inline', to properly render external HTML pages:

-Dhudson.model.DirectoryBrowserSupport.CSP=

If you are using Windows, look for the jenkins.xml file in the Jenkins home directory to configure global JVM options and Jenkins system properties. Add the following under the arguments tag:

<arguments>
   -Xrs -Xmx256m
   -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle
   "-Dhudson.model.DirectoryBrowserSupport.CSP= " 
   -jar "%BASE%\jenkins.war" --httpPort=8080
 </arguments>

For most Linux distributions, modify the JENKINS_ARGS in:

/etc/default/jenkins (or jenkins-oc)

For CentOS, update the JENKINS_JAVA_OPTIONS in:

/etc/sysconfig/jenkins (or jenkins-oc)

Explore more examples in the Content Security Policy Reference:

Answer №4

Instructions for Jenkins installed on an Ubuntu server:

  1. Add the following line to /etc/default/jenkins

    JAVA_ARGS="${JAVA_ARGS} -Dhudson.model.DirectoryBrowserSupport.CSP=\"\" "

  2. Go to 

    http://<your jenkins hostname>/safeRestart

(for more options and details, see: )

Update: I recently had to also run sudo service jenkins restart after visiting /safeRestart to ensure changes were applied.

Answer №5

The solutions provided above were not effective in resolving my issue on Ubuntu 16.04 with Jenkins 2.46.2. I found success by making changes to the JAVA_ARGS in /etc/default/jenkins as shown below:

JAVA_ARGS="-Djava.awt.headless=true  -Dmail.smtp.starttls.enable=true -Dhudson.model.DirectoryBrowserSupport.CSP=\"sandbox allow-scripts; style-src 'unsafe-inline' *;script-src 'unsafe-inline' *;\""

For more details, visit this link

Answer №6

Modifying the /etc/sysconfig/jenkins file on an Amazon Linux server involves adjusting the following line:

#JENKINS_ARGS="-Dhudson.model.DirectoryBrowserSupport.CSP=sandbox"

JENKINS_ARGS="-Dhudson.model.DirectoryBrowserSupport.CSP=\"\""

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CORS problem in Chrome when using AngularJS and Symfony 3

I've been dealing with a bug on my backend and frontend for the past week. I created a REST API (php/symfony) to manage books and authors. Initially, I had trouble with cross-origin requests on DELETE, which has been resolved. However, now I am facin ...

javascriptphpangularjssymfonygoogle-chrome

Executing a simulated onClick event in jQuery

Attempting to create a simulated onclick event on a drop-down menu has proved challenging for me. An IE object is being used to navigate to a page, where I need to modify a dropdown menu that contains an onchange event: $('select[name="blah"]') ...

javascriptjquery

`Moving smoothly with a slider and then reversing direction`

I have implemented a range slider to control the value in an input field. The values can vary greatly, so I needed finer control for lower numbers that gradually expands for larger numbers. To address this issue, I utilized an easing equation based on the ...

javascriptangularjsionic-framework

Is it possible to eliminate the arrows from an input type while restricting the change to a specific component?

Is there a way to remove the arrows from my input field while still applying it only to the text fields within this component? <v-text-field class="inputPrice" type="number" v-model="$data._value" @change="send ...

javascripttypescriptvue.jsvuetify.jstailwind-css

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

javascriptangulartypescriptapiswagger-codegen

Angular 2 - synchronizing timer for all users

I have developed a timer that needs to function consistently for all users at the same time. To achieve this, I stored the start_time (timestamp when the timer begins) in my database and implemented the following code snippet to calculate the remaining ti ...

javascriptangularrxjs

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

javascripthtmlcssangular

Using VueJS: Passing a variable with interpolation as a parameter

Is there a way to pass the index of the v-for loop as a parameter in my removeTask function? I'm looking for suggestions on how to achieve this. <ol class="list-group"> <li v-for="task in tasks" class="list-group-item"> ...

javascriptvue.js

Issue with Caching during Javascript Minification

I Have ASP.Net MVC 3 App. Utilizing YUICompressor.Net for compressing Javascript and CSS files post build with MSBuild. The minimized javascript file is named JSMin.js and the CSS file is CssMin.css. In my master page, I reference these files as shown bel ...

javascriptcssfileversionminify

What is the correct location to store the bower.json file?

I'm currently using bower 1.2.2 to handle my client-side libraries for the first time with a new node app. I'm unsure whether I should initialize bower in the main project root alongside gruntfile.js and package.json, or within the static directo ...

javascriptnpmbower

Incorporate communication between the front-end and backend

I encountered an error while attempting to import the getUser function in my backend code. The actual function is located in the frontend at ../utils/auth. How can I successfully import between front-end and backend? Or might there be another issue at pla ...

javascriptreactjs

"Embracing Progressive Enhancement through Node/Express routing and the innovative HIJAX Pattern. Exciting

There may be mixed reactions to this question, but I am curious about the compatibility of using progressive enhancement, specifically the HIJAX pattern (AJAX applied with P.E.), alongside Node routing middleware like Express. Is it feasible to incorporate ...

javascriptajaxnode.jsexpressprogressive-enhancement

Discover convenient debugging utilities tailored for Angular JS 1.5

Being a newbie in the world of Angular JS, I may have some simple questions about debugging tools specifically for Angular JS 1.5. ...

angularjsangularjs-1.5

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

javascriptjqueryhtmltwitter-bootstrapjquery-templates

Choose a selection in ExtJS by finding matching attributes

Is there a convenient method to choose an item in an Ext.tree.Panel by matching it with an item based on the same attribute in an Ext.grid.Panel? For example, using something like: tree_dir.getSelectionModel().select(grid_file.getSelectionModel().getSelect ...

javascriptextjsextjs4

What is the most stylish method for merging a removeCartItem function with an addCartItem function?

Is there a way to combine these functions into a more concise and elegant piece of code? While the current setup works fine, it feels redundant to have two large functions that essentially do the same thing. const modifyCartItem = (cartItems, productToMo ...

javascriptreactjs

The value of a variable remains constant even when it is assigned within a function

I developed a dynamic image slideshow using HTML and JS specifically for the Lively Wallpaper app. This app offers various customization options, which are stored in the LivelyProperties.json file along with input types such as sliders and text boxes. To ...

javascriptjson

What is the best method for displaying an HTML string within an HTML file in Angular 5?

I have declared an array in my TypeScript file like this: import {Component, OnInit} from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-foo', template: ...

javascriptangular

Encountering a problem when trying to utilize material-ui icons in a React application

After installing the Material-UI core and icons packages using npm install @material-ui/core and npm install @material-ui/icons in my React app, I tried to use the FileUploadIcon. Here's how I imported it: import { FileUploadIcon } from '@materia ...

javascriptreactjsmaterial-ui

Leveraging the yeoman-generator variable within the template that is being generated

When creating an angularJS project with yeoman, I pass an argument to the generator which I retrieve from the main generator's script (index.js) using: this.argument('name', { type: String }); I can access this parameter within index.js as ...

javascriptangularjsyeomanyeoman-generatoryeoman-generator-angular