Je suis conscient que si nous utilisons un iFrame en HTML, nous devons le mettre en sandbox et ajouter l'autorisation 'allow-scripts' pour qu'elle soit vraie.
Mais mon problème est que je n’ai pas du tout d’iFrame dans mon application JS pure Angular. Lorsque je l’exécute sur ma machine locale, tout fonctionne correctement.
Au moment où je le déploie sur mon serveur, Chrome affiche ce message d'erreur ainsi que l'erreur ci-dessous:
Refusé de charger le style 'bootstrap.min.css' car il enfreint la directive suivante relative à la politique de sécurité du contenu: "style-src 'self'".
Exécution de script bloqué dans 'dashboard.html' car le cadre du document est mis en sandbox et que l'autorisation 'allow-scripts' n'est pas définie.
Je n'invoque pas la page d'un site tiers ou ailleurs qui pourrait éventuellement injecter ma source et la faire apparaître dans un iframe. J'ai inspecté le code et je peux confirmer qu'il n'y a pas d'iframes du tout.
En passant, j'utilise une très ancienne version de Chrome (26) et Firefox (10) [Restrictions organisationnelles]. Cela se produit également sur IE11 (bien qu'aucun message d'erreur ne soit affiché), la page ne s'affiche pas. charger.
Qu'est-ce qui peut causer cela ? Est-ce que je manque quelque chose ici? Tous les pointeurs seraient grandement appréciés.
Vous trouverez ci-dessous un aperçu de ce que j'essaie de faire. Des parties triviales ont été coupées.
<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>
Nous utilisions ce contenu HTML dans un répertoire Jenkins userContent. Nous avons récemment mis à niveau la dernière version Jenkins 1.625 LTS et il semble qu'ils aient introduit une nouvelle politique de sécurité du contenu qui ajoute l'en-tête ci-dessous aux en-têtes de réponse. Les navigateurs refusent simplement d'exécuter des tâches telles que stylesheets/Javascripts.
X-Content-Security-Policy: sandbox; default-src 'none'; img-src 'self'; style-src 'self';
Pour résoudre ce problème, nous avons simplement dû supprimer cet en-tête en réinitialisant la propriété under dans Jenkins.
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
Ceux qui effectuent une mise à niveau vers Jenkins 1.625 et utilisent le dossier userContent pourraient être affectés par cette modification.
Pour plus d'informations, consultez https://wiki.jenkins-ci.org/display/JENKINS/Configuring+Content+Security+Policy
J'ai eu le même problème avec HTML Publisher Plugin .
Selon Jenkins new Politique de sécurité du conten , vous pouvez le contourner en définissant:
hudson.model.DirectoryBrowserSupport.CSP = script-src 'unsafe-inline';
UPDATE: Pour une raison quelconque sur Jenkins 2.x, j'ai dû mettre à jour de nouveau les arguments, avec une valeur CSP vide, au lieu de script-src 'unsafe-inline, afin d'afficher pleinement les pages HTML externes:
-Dhudson.model.DirectoryBrowserSupport.CSP =
Sous Windows, il existe un jenkins.xml dans le répertoire de base Jenkins, dans lequel vous pouvez définir des options globales JVM, telles que les propriétés système Jenkins. Ajoutez-le simplement sous la balise arguments:
<arguments> -Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle "-Dhudson.model.DirectoryBrowserSupport.CSP= " -jar "%BASE%\jenkins.war" --httpPort=8080 </arguments>
Pour la plupart des distributions Linux, vous pouvez modifier JENKINS_ARGS à l'intérieur du fichier:
/etc/default/jenkins (ou jenkins-oc)
Pour CentOS, modifiez JENKINS_Java_OPTIONS à l'intérieur du fichier:
/etc/sysconfig/jenkins (ou jenkins-oc)
Voir d'autres exemples dans la référence de la politique de sécurité du contenu: http://content-security-policy.com/
Vous devez suivre les étapes ci-dessous pour la solution:
Remarque: Après avoir suivi les étapes ci-dessus, s'il ne charge toujours pas les fichiers css et js, effacez le cache du navigateur, les cookies et actualisez la page.
Pour Jenkins hébergé sur Ubuntu:
mettre /etc/default/jenkins
Java_ARGS="${Java_ARGS} -Dhudson.model.DirectoryBrowserSupport.CSP=\"\" "
visite http://<your jenkins hostname>/safeRestart
(à propos de cela et d'autres options: https://wiki.jenkins.io/display/JENKINS/Features+controlled+by+system+properties )
UPD: cette fois-ci, la visite/safeRestart n’était pas suffisante. Je devais faire Sudo service jenkins restart
.
Les réponses ci-dessus ne fonctionnaient pas pour moi dans Ubuntu 16.04 avec Jenkins 2.46.2. J'ai dû changer Java_ARGS dans/etc/default/jenkins en tant que
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' *;\""
Plus d'infos ici
Sur Amazon Linux au bas de /etc/sysconfig/jenkins
changement:
#JENKINS_ARGS="-Dhudson.model.DirectoryBrowserSupport.CSP=sandbox"
JENKINS_ARGS="-Dhudson.model.DirectoryBrowserSupport.CSP=\"\""