我们在Jenkins userContent目录中使用了此内容HTML。我们最近升级到最新的Jenkins 1.625LTS版本,似乎他们引入了新的内容安全策略,该策略将以下标头添加到响应标头中,浏览器只是拒绝执行样式表/ Javascript之类的内容。
X-Content-Security-Policy: sandBox; default-src ’none’; img-src ’self’; style-src ’self’;
为了克服它,我们只需要通过重置Jenkins中的below属性来删除此标头。
System.setProperty('hudson.model.DirectorybrowserSupport.CSP', '')
那些升级到Jenkins 1.625并使用userContent文件夹的用户可能会受到此更改的影响。
有关更多信息,请参阅https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy
解决方法我知道,如果我们在HTML中使用iFrame,则必须对其进行沙箱处理,并添加“ allow-scripts”权限为true。
但是我的问题是我的纯Angular JS应用程序中根本没有iFrame。当我在本地计算机上运行它时,它可以正常工作。
将其部署到服务器后,Chrome会显示此错误消息以及以下错误:
拒绝加载样式’bootstrap.min.css’,因为它违反了以下内容安全策略指令:“ style-src’self’”。
在dashboard.html中阻止了脚本执行,因为文档的框架已被沙箱化,并且未设置’allow-scripts’权限。
我不是从第三方网站或其他地方调用该页面,而这可能会注入我的源并将其显示在iframe中。我检查了代码,并且可以确认根本没有iframe。
顺便说一句,我使用的是Chrome(26)和Firefox(10)的非常旧的版本[组织限制]。IE11上也会发生这种情况(尽管没有错误消息显示),页面也无法加载。
是什么原因造成的?我在这里想念什么吗?任何指针将不胜感激。
以下是我要执行的操作的快照。琐碎的部分已修剪..
<html lang='en' ng-app='dashboard'> <head> <title>Dashboard</title> <link href='https://www.6hehe.com/wenda/css/bootstrap.min.css' rel='stylesheet'> <script src='https://www.6hehe.com/wenda/js/jquery.min.js'></script> <script src='https://www.6hehe.com/wenda/js/angular.min.js'></script> <script src='https://www.6hehe.com/wenda/js/ui-bootstrap-tpls-0.6.0.js'></script> <script src='https://www.6hehe.com/wenda/js/bootstrap.min.js'></script> <script src='https://www.6hehe.com/wenda/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 ng-notifications></div> <div> <tabset> <tab ng-repeat='env in environments' heading='{{env.name}}' select='set(env)' active='env.tab_active'> <div ng-repeat='column in columns' ng-class='{’vertical-seperator’:$first}'> <div ng-class='{’first-child’:$first}'> <div class='panel-heading'><h3>{{column.column}}</h3> </div> <div class='panel-body'><div ng-repeat='layer in column.layers'> <h4>{{layer.name}}</h4> <div ng-repeat='category in layer.categories' ng-class='category.css'> <div class='category-heading'> <h4>{{category.name}}</h4> </div> <div 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 ng-repeat='app in apps | filter: { column: column.column,layer: layer.name,category: category.name,group: group.name } : true'> <!-- Application Home Links --> <td ng-if='app.type === Type.A || app.type === Type.A1 || app.type === Type.B || app.type === Type.B1 || app.type === Type.C'><a href='https://www.6hehe.com/wenda/{{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>