Javascript Jenkins 错误 - <URL> 中的脚本执行被阻止。因为文档的框架是沙盒的，并且没有设置“允许脚本”权限

Question

提问by Venkat

I'm aware that if we use a iFrame in HTML we've to sandbox it & add the 'allow-scripts' permission to be true.

我知道，如果我们在 HTML 中使用 iFrame，我们必须对其进行沙盒处理，并将“允许脚本”权限添加为 true。

But my problem is I don't have a iFrame at all in my pure Angular JS application. When I run it on my local machine it works fine.

但我的问题是我的纯 Angular JS 应用程序中根本没有 iFrame。当我在本地机器上运行它时，它工作正常。

The moment I deploy it to my server, Chrome displays this error message along with the below error:

当我将它部署到我的服务器时，Chrome 会显示此错误消息以及以下错误：

Refused to load the style 'bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self'".
Blocked script execution in 'dashboard.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

拒绝加载样式“bootstrap.min.css”，因为它违反了以下内容安全策略指令：“style-src 'self'”。
阻止了“dashboard.html”中的脚本执行，因为文档的框架已被沙盒化并且未设置“allow-scripts”权限。

I'm not invoking the page from a 3rd party site or elsewhere which could possibly inject my source & make it appear in a iframe. I inspected the code & I can confirm there are no iframes at all.

我不是从 3rd 方站点或其他地方调用页面，这可能会注入我的源代码并使其出现在 iframe 中。我检查了代码，我可以确认根本没有 iframe。

BTW, I use a very old version of Chrome (26) and Firefox (10) [Organisational restrictions]. This happens on IE11 as well (Though no error message displayed) the page doesn't load up.

顺便说一句，我使用的是非常旧版本的 Chrome (26) 和 Firefox (10) [组织限制]。这也发生在 IE11 上（虽然没有显示错误消息）页面没有加载。

What could be causing this ? Am I missing anything here ? Any pointers would be greatly appreciated.

这可能是什么原因造成的？我在这里错过了什么吗？任何指针将不胜感激。

Below is a snapshot of what I'm trying to do... Trivial parts trimmed out..

下面是我正在尝试做的事情的快照......修剪掉了琐碎的部分......

<html lang="en" ng-app="dashboard">
   <head>
      <title>Dashboard</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="js/jquery.min.js"></script>
      <script src="js/angular.min.js"></script>
      <script src="js/ui-bootstrap-tpls-0.6.0.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/notifications.js"></script>
      <style>
         body { background-color: #F3F3F4; color: #676a6c; font-size: 13px;}
      </style>
      <script>
         var dashboardApp = angular.module('dashboard', ['ui.bootstrap', 'notificationHelper']);

         Type = {
            APP : 0, CTL : 1
         }


         function DashboardCtrl($scope, $location, $timeout, $http, $log, $q) {
            $scope.environments = [ { ... }];
            $scope.columns = [ { ... } ];

             $scope.Type = window.Type;
            $scope.applications = [{ ... }];

            $scope.selectedEnv = null;

            var resetModel = function(applications) {
                applications.forEach(function(app) {
                     var hosts=$scope.findHosts(app, $scope.selectedEnv);
                     if(hosts){
                         hosts.forEach(function(host){
                             $scope.initStatus(app.status,host);
                         });
                     }
                });
            };

            var timeoutPromise = null;

             $scope.initStatus = function (status,host) {
                 status[host]=[{
                     ...
                 }];

             };             
         }

      </script>
   </head>
   <body ng-controller="DashboardCtrl">
      <div class="request-notifications" ng-notifications></div>
      <div>
         <tabset>
            <tab ng-repeat="env in environments" heading="{{env.name}}" select="set(env)" active="env.tab_active">
               <div class="col-md-6" ng-repeat="column in columns" ng-class="{'vertical-seperator':$first}">
                  <div class="panel" ng-class="{'first-child':$first}">
                     <div class="panel-heading">
                        <h3>{{column.column}}</h3>
                     </div>
                     <div class="panel-body">
                        <div class="frontends" ng-repeat="layer in column.layers">
                           <h4>{{layer.name}}</h4>
                           <div class="category" ng-repeat="category in layer.categories" ng-class="category.css">
                              <div class="category-heading">
                                 <h4>{{category.name}}</h4>
                              </div>
                              <div class="category-body group" ng-repeat="group in category.groups">
                                 <div ng-if="!env[group.host]">
                                    <h4>{{group.name}}</h4>
                                    <span class="label label-danger">Not deployed</span>
                                 </div>
                                 <div ng-repeat="host in env[group.host]">
                                    <div class="group-info">
                                       <div class="group-name">{{group.name}}</div>
                                       <div class="group-node"><strong>Node : </strong>{{host}}</div>
                                    </div>
                                    <table class="table table-striped">
                                       <thead>
                                          <tr>
                                             ...
                                          </tr>
                                       </thead>
                                       <tbody>
                                          <tr class="testStatusPage" ng-repeat="app in apps | filter: { column: column.column, layer: layer.name, category: category.name, group: group.name } : true">
                                             <!-- Application Home Links -->
                                             <td class="user-link" ng-if="app.type === Type.A || app.type === Type.A1 || app.type === Type.B || app.type === Type.B1 || app.type === Type.C"><a href="{{app.link}}">{{app.text}}</a></td>                                                                                          <td ng-if="app.status[host].statusCode == 0" class="result statusResult"><span class="label label-success">Success</span></td>
                                             <td ng-if="app.status[svr].status != null && app.status[host].status != 0" class="result statusResult"><span class="label label-danger">{{app.status[host].error}}</span></td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </tab>
         </tabset>
      </div>
   </body>
</html>

Answer 1

回答by Venkat

We were using this content HTML in a Jenkins userContent directory. We recently upgraded to the latest Jenkins 1.625 LTS version & it seems they've introduced new Content security policy which adds the below header to the response headers & the browsers simply decline to execute anything like stylesheets / Javascripts.

我们在 Jenkins userContent 目录中使用此内容 HTML。我们最近升级到最新的 Jenkins 1.625 LTS 版本，似乎他们引入了新的内容安全策略，将以下标头添加到响应标头中，浏览器只是拒绝执行样式表/Javascript 之类的任何内容。

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

To get over it, we had to simply remove this header by resetting the below property in Jenkins.

为了克服它，我们必须通过重置 Jenkins 中的以下属性来简单地删除此标头。

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

Those who upgrade to Jenkins 1.625 & use the userContent folder might be affected by this change.

升级到 Jenkins 1.625 并使用 userContent 文件夹的用户可能会受到此更改的影响。

For more information refer https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy

有关更多信息，请参阅https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy

Answer 2

回答by Noam Manos

I had the same issue with HTML Publisher Plugin.

我对HTML Publisher Plugin也有同样的问题。

According to Jenkins new Content Security Policy, you can bypass it by setting:

根据 Jenkins new Content Security Policy，您可以通过设置绕过它：

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

UPDATE:For some reason on Jenkins 2.x, I had to update arguments again, with an empty CSP value, instead of ~~script-src 'unsafe-inline~~, in order to fully display external HTML pages:

更新：出于某种原因，在 Jenkins 2.x 上，我不得不再次更新参数，使用空的 CSP 值，而不是~~script-src 'unsafe-inline~~，以便完全显示外部 HTML 页面：

-Dhudson.model.DirectoryBrowserSupport.CSP=

On Windows there's a jenkins.xmlin Jenkins home directory, where you can set global JVM options, such as Jenkins system properties. Simply add it under arguments tag:

在 Windows 上，Jenkins 主目录中有一个jenkins.xml，您可以在其中设置全局 JVM 选项，例如 Jenkins 系统属性。只需在参数标签下添加它：

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

For most of the Linux distributions, you can modify JENKINS_ARGSinside file:

对于大多数 Linux 发行版，您可以在文件中修改JENKINS_ARGS：

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

/etc/default/jenkins（或 jenkins-oc）

For CentOS, modify JENKINS_JAVA_OPTIONSinside file:

对于 CentOS，在文件中修改JENKINS_JAVA_OPTIONS：

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

/etc/sysconfig/jenkins（或 jenkins-oc）

See more examples in the Content Security Policy Reference: http://content-security-policy.com/

查看内容安全策略参考中的更多示例：http: //content-security-policy.com/

Answer 3

回答by Ronak

You need to follow below steps for solution :

您需要按照以下步骤解决：

Open the Jenkin home page.
Go to Manage Jenkins.
Now go to Script Console.
And in that console paste below statement and click on Run. System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
After that it will load css and js.

打开詹金主页。
转到管理詹金斯。
现在转到脚本控制台。
并在该控制台中粘贴下面的语句并单击运行。 System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
之后它将加载 css 和 js。

Note : After following the above steps if still it is not loading css and js then clear the browser cache and cookie and refresh the page.

注意：如果按照上述步骤仍然没有加载css和js，则清除浏览器缓存和cookie并刷新页面。

Answer 4

回答by Nakilon

For Jenkins hosted on Ubuntu:

对于托管在 Ubuntu 上的 Jenkins：

put to /etc/default/jenkins

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

visit http://<your jenkins hostname>/safeRestart

放 /etc/default/jenkins

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

访问 http://<your jenkins hostname>/safeRestart

(about this and other options: https://wiki.jenkins.io/display/JENKINS/Features+controlled+by+system+properties)

（关于这个和其他选项：https: //wiki.jenkins.io/display/JENKINS/Features+controlled+by+system+properties）

UPD: this time when I did this the visiting /safeRestart was not enough. I had to do sudo service jenkins restart.

UPD：这次当我这样做时，访问 /safeRestart 是不够的。我不得不这样做sudo service jenkins restart。

Answer 5

回答by Kiran

The above answers did not work for me in Ubuntu 16.04 with Jenkins 2.46.2. I had to change JAVA_ARGS in /etc/default/jenkins as

以上答案在 Ubuntu 16.04 和 Jenkins 2.46.2 中对我不起作用。我不得不将 /etc/default/jenkins 中的 JAVA_ARGS 更改为

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' *;\""

More info here

更多信息在这里

Answer 6

回答by TimP

On Amazon Linux at the bottom of /etc/sysconfig/jenkinschange:

在 Amazon Linux 底部的/etc/sysconfig/jenkins变化：

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

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

Javascript Jenkins 错误 - <URL> 中的脚本执行被阻止。因为文档的框架是沙盒的，并且没有设置“允许脚本”权限

提问by Venkat

回答by Venkat

回答by Noam Manos

回答by Ronak

回答by Nakilon

回答by Kiran

回答by TimP

相关推荐

最近更新

标签

Javascript Jenkins 错误 - <URL> 中的脚本执行被阻止。因为文档的框架是沙盒的，并且没有设置“允许脚本”权限

提问by Venkat

回答by Venkat

回答by Noam Manos

回答by Ronak

回答by Nakilon

回答by Kiran

回答by TimP

相关推荐

Javascript 我正在使用tinymce，是否可以只申请一个textarea

Javascript 如何使用 webpack 设置内联 svg

Javascript 通过js或query强制下载

即使在使用 javascript 重新加载后仍保留滚动条位置

相关推荐

最近更新

标签