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>Advertisement
Answer
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