Я знаю, что если мы используем iFrame в HTML, мы должны изолировать его и добавить разрешение "allow-scripts" в true.
Но моя проблема в том, что у меня нет iFrame вообще в моем чистом приложении Angular JS. Когда я запускаю его на своей локальной машине, он отлично работает.
В тот момент, когда я развожу его на свой сервер, Chrome отображает это сообщение об ошибке вместе с приведенной ниже ошибкой:
Отказался от загрузки стиля "bootstrap.min.css", поскольку он нарушает следуя директиве политики безопасности содержимого: "style-src" self ".
Заблокировано script выполнение в 'Dashboard.html' потому что рамка документа изолирована песочницей, а сценарии "allow-scripts" - разрешение не установлено.
Я не ссылаюсь на страницу с стороннего сайта или где-либо еще, что могло бы добавить мой источник и заставить его отображаться в iframe. Я проверил код, и я могу подтвердить, что нет iframes вообще.
Кстати, я использую очень старую версию Chrome (26) и Firefox (10) [Организационные ограничения]. Это происходит и в IE11 (хотя не отображается сообщение об ошибке) страница не загружается.
Что может быть причиной этого? Я что-то пропустил? Любые указатели будут очень благодарны.
Ниже приведен снимок того, что я пытаюсь сделать... Тривиальные части обрезаны..
<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>
