上述＆lt阻止脚本的执行; URL取代。因为文档的帧是沙箱和“允许的脚本”权限未设置脚本、上述、权限、文档
我知道，如果我们在HTML中使用的iFrame我们已经到沙箱资讯科技及电讯;添加允许的脚本的许可是真实的。
但我的问题是，我没有在的iFrame在我的纯JS角应用。当我在我的本地机器上运行它，它工作正常。
我把它部署到我的服务器的那一刻，Chrome就会显示此错误消息，下面的错误沿：
拒绝加载风格'bootstrap.min.css，因为它违反了 以下内容安全政策指令：风格-src的'自我'
在阻止脚本执行 dashboard.html 因为文档的帧是沙箱和允许的脚本 权限未设置。
我不是从第三方网站或其他地方这有可能注入我的源和放大器调用页面;让它出现在iframe中。我检查了code＆放;我可以证实，有没有在所有内部框架。
顺便说一句，我用一个很旧版本的Chrome（26）和Firefox（10）组织性的限制]的。这发生在IE11以及（尽管没有错误信息显示）的页面没有加载起来。
什么引起的？我缺少什么吗？任何指针将大大AP preciated。
下面是什么，我试图做一个快照......琐碎的部分修剪了..
＆LT; HTML LANG =ENNG-应用=仪表板＆GT; ＆LT; HEAD＆GT; ＆LT;标题＆GT;仪表及LT; /标题＆GT; ＆LT;链接HREF =CSS / bootstrap.min.css的rel =stylesheet属性＆GT; ＆LT;脚本SRC =JS / jquery.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / UI的引导，第三方物流企业，0.6.0.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / notifications.js＆GT;＆LT; / SCRIPT＆GT; ＆LT;风格＆GT; 身体{背景颜色：＃F3F3F4;颜色：＃676a6c;字体大小：13像素;} ＆LT; /风格＆GT; ＆LT;脚本＆GT; VAR dashboardApp = angular.module（仪表盘，['ui.bootstrap'，'notificationHelper']）; 类型= { APP：0，CTL：1 } 功能DashboardCtrl（$范围，$位置$超时，$ HTTP，$登录，$ Q）{ $ scope.environments = [{...}]; $ scope.columns = [{...}]; $ scope.Type = window.Type; $ scope.applications = [{...}]; $ scope.selectedEnv = NULL; VAR resetModel =功能（应用程序）{ applications.forEach（功能（应用程序）{ VAR主机= $ scope.findHosts（应用程序，$ scope.selectedEnv）; 如果（主机）{ hosts.forEach（功能（主机）{ $ scope.initStatus（app.status，主机）; }）; } }）; }; VAR timeoutPromise = NULL; $ scope.initStatus =功能（状态，主机）{ 状态[主持人] = {[ ... }]; }; } ＆LT; / SCRIPT＆GT; ＆LT; /头＆GT; ＆LT;机身NG控制器=DashboardCtrl＆GT; ＆LT; DIV CLASS =要求的通知NG的通知＆GT;＆LT; / DIV＆GT; ＆LT; DIV＆GT; ＆LT;＆标签集GT; ＆LT;标签NG重复=ENV的环境中标题={{env.name}}选择=设置（环境）活动=env.tab_active＆GT; ＆LT; DIV CLASS =COL-MD-6NG-重复=列列NG-CLASS ={'垂直分隔符：$第一}＆GT; ＆LT; DIV CLASS =面板NG-CLASS ={'第一胎'：$第一}＆GT; ＆LT; DIV CLASS =面板标题＆GT; ＆LT; H3＆GT; {{column.column}}＆LT; / H3 GT＆; ＆LT; / DIV＆GT; ＆LT; DIV CLASS =面板体＆GT; ＆LT; DIV CLASS =前端NG重复=层column.layers＆GT; ＆LT; H4＆GT; {{layer.name}}＆LT; / H4＆GT; ＆LT; DIV CLASS =类别NG-重复=类别中layer.categoriesNG-CLASS =category.css＆GT; ＆LT; DIV CLASS =类别的标题＆GT; ＆LT; H4＆GT; {{category.name}}＆LT; / H4＆GT; ＆LT; / DIV＆GT; ＆LT; DIV CLASS =类体组NG重复=，在category.groups组＆GT; ＆LT; DIV NG-IF =＆GTENV [group.host]！; ＆LT; H4＆GT; {{group.name}}＆LT; / H4＆GT; ＆LT;跨度类=标签标签危险＆GT;未部署＆LT; / SPAN＆GT; ＆LT; / DIV＆GT; ＆LT; DIV NG重复=主机ENV [group.host]＆GT; ＆LT; DIV CLASS =组信息＆GT; ＆LT; DIV CLASS =组名＆GT; {{group.name}}＆LT; / DIV＆GT; ＆LT; DIV CLASS =组节点＆GT;＆LT;强＆gt;节点：LT; / STRONG＆GT; {{主机}}＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT;表类=表的表条纹＆GT; ＆LT;＆THEAD GT; ＆所述; TR＆GT; ... ＆LT; / TR＆GT; ＆LT; / THEAD＆GT; ＆LT;＆TBODY GT; ＆LT; TR类=testStatusPageNG重复=应用程序中的应用|过滤器：{列：column.column，层：layer.name，类别：category.name，组：group.name}：真正的＆GT; ＆LT;！ - 应用首页链接 - ＆GT; ＆LT; TD类=用户链接NG-IF =app.type === Type.A || app.type === Type.A1 || app.type === Type.B ||应用程序。类型=== Type.B1 || app.type === Type.C＆GT;＆下; A HREF ={{app.link}}＆GT; {{app.text}}＆下; / A＆GT;＆下; / TD＆GT; ＆LT; TD NG-IF =app.status [主持人] .STATUS code == 0级=结果statusResult＆GT;＆LT;跨度类=标签标签成功＆GT;成功＆LT; / SPAN＆GT; ＆LT; / TD＆GT; ＆LT; TD NG-IF =app.status [SVR] .STATUS = NULL＆放大器;！＆安培;！app.status [主持人] .STATUS = 0级=结果statusResult＆GT;＆LT;跨度类=标签标签危险＆GT; {{app.status [主持人] .error}}＆LT; / SPAN＆GT;＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; / TBODY＆GT; ＆LT; /表＆gt; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /标签＆gt; ＆LT; /标签集＆GT; ＆LT; / DIV＆GT; ＆LT; /身体GT;＆LT; / HTML＆GT; 解决方案
我们用在詹金斯userContent目录此内容的HTML。我们最近升级到最新的詹金斯1.625 LTS版本和放大器;看来他们已经推出了新的内容安全政策，增加了页眉下方的响应头＆放大器;浏览器简单地拒绝执行如样式表什么/ Javascript角。
X-内容安全性政策：沙箱;默认-SRC无; IMG-SRC自我;风格-SRC自我;
要克服它，我们不得不只需在詹金斯重置以下属性中删除此头。
System.setProperty（hudson.model.DirectoryBrowserSupport.CSP，）
这些谁升级到詹金斯1.625＆安培;使用userContent文件夹可能受到此更改的影响。
有关更多信息，请参阅https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy
I'm aware that if we use a iFrame in HTML we've to sandbox it & add the 'allow-scripts' permission to be 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.
The moment I deploy it to my server, Chrome displays this error message along with the below error:
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.
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.
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.
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>
解决方案
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.
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.
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
Those who upgrade to Jenkins 1.625 & use the userContent folder might be affected by this change.
For more information refer https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy
