I am using angular 11 for my project. I have csp headers without 'unsafe-eval'. AOT compilation gets rid of 'eval' but 'new Function' is causing errors.
Every file in my index.html is hashed, and corresponding hashes are added in csp headers.
I still get error in paper-full.min.js and main-es2015.js at 'new Function'.
For your reference,
my index.html (after build)
<link href="assets/style/css/bootstrap-ar.min.css" rel="stylesheet">
<link href="assets/style/css/font-awesome.min.css" rel="stylesheet">
<link id="alignCssFileId" href="assets/style/css/custom-ar.css" rel="stylesheet">
<script type="text/javascript" src="assets/style/js/jquery-3.6.0.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
<script src="assets/config/env.js" nonce="envfile"></script>
<script type="text/javascript" src="assets/js/paper-full.min.js" integrity="sha384-F2XIobYzyqtqgJtz47uxaaSZcW74BXtLyaFzwmDCyGpcJhlQ2uOUix5qhFCrBHCk" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/sketch.js" integrity="sha384-7JZMJBSgTv2Y0cEIC5IkoFKfI98P1NPO3jqlUouOZNo17nZC+CsniI/NcdHy9BSZ"></script>
<link rel="stylesheet" href="styles.css" crossorigin="anonymous" integrity="sha384-QdNSfd/w2DkkeesZlP/b50EpjayV2yEMRXink+/oG8PXWqKe3oz4zyhzKw3+4tq5"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.js" crossorigin="anonymous" type="module" integrity="sha384-ri9cS+UB3Kg44oWcATihqM4JaLd/vPeH44VxPBjnwYxbTN3Z+5n715V6lu17N1zg"></script>
<script src="runtime-es5.js" crossorigin="anonymous" nomodule defer integrity="sha384-56+79AY2vtppdq3/S+YH+Uav2yUXXn+z1KLU+uKv5UTSpWd39ouBt5EqG1KEmY9V"></script>
<script src="polyfills-es5.js" crossorigin="anonymous" nomodule defer integrity="sha384-qjU37w6G6Z+qVDUk8Yzwu2N5V/jpyaNDu3eCO+2CXGW1J2l6JkViCSkED7EUCi7u"></script>
<script src="polyfills-es2015.js" crossorigin="anonymous" type="module" integrity="sha384-Qy1zDsv7ndcJumiNepT27qatHsVczLau/WF4kn5fhoiqxbzqWygjEt7ngjvpetXe"></script>
<script src="main-es2015.js" crossorigin="anonymous" type="module" integrity="sha384-FEAUc/jPR/Cpjr+XEDZqiqYTezE3ZU6lZiCoTf75l3AlCbAj+s2YTkl3HrJjvOg4"></script>
<script src="main-es5.js" crossorigin="anonymous" nomodule defer integrity="sha384-ebjkV4WAnT/NpJ9Ql5DhVLwX43B1EpGP+oS3ZXxQUxJ2tat9rzWuceWmpUOpUK4i"></script></body>
</html>
csp headers
"script-src 'self' 'strict-dynamic' 'nonce-envfile' " +
"'sha384-ri9cS+UB3Kg44oWcATihqM4JaLd/vPeH44VxPBjnwYxbTN3Z+5n715V6lu17N1zg' " +
"'sha384-56+79AY2vtppdq3/S+YH+Uav2yUXXn+z1KLU+uKv5UTSpWd39ouBt5EqG1KEmY9V' " +
"'sha384-qjU37w6G6Z+qVDUk8Yzwu2N5V/jpyaNDu3eCO+2CXGW1J2l6JkViCSkED7EUCi7u' " +
"'sha384-Qy1zDsv7ndcJumiNepT27qatHsVczLau/WF4kn5fhoiqxbzqWygjEt7ngjvpetXe' " +
"'sha384-FEAUc/jPR/Cpjr+XEDZqiqYTezE3ZU6lZiCoTf75l3AlCbAj+s2YTkl3HrJjvOg4' " +
"'sha384-ebjkV4WAnT/NpJ9Ql5DhVLwX43B1EpGP+oS3ZXxQUxJ2tat9rzWuceWmpUOpUK4i' " +
"'sha384-7JZMJBSgTv2Y0cEIC5IkoFKfI98P1NPO3jqlUouOZNo17nZC+CsniI/NcdHy9BSZ' " + //sketch
"'sha384-F2XIobYzyqtqgJtz47uxaaSZcW74BXtLyaFzwmDCyGpcJhlQ2uOUix5qhFCrBHCk' " + //paper
"'sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z' " + //jquery
";style-src 'self' 'unsafe-inline';");
I use following command to create build.
ng build --prod --output-hashing none --subresourceIntegrity=true
Note: I am using tomcat valve jar file to add csp headers in response.
Related
I want to use owl carousel and I've added the related files in my index.php file but still the .owlCarousel() function doesn't resolve . Here is my related links to owl carousel in the head of my HTML file :
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- owl carousel external css files: -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />
And in end of body tag I include my js files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" defer></script>
<script src="js/jquery-3.3.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/jquery-migrate-3.0.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/jquery-ui.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/popper.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
<script src="js/owl.carousel.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<!-- My script file -->
<script src="js/owl-carousel-custom.js" type="text/javascript" defer></script>
and in my owl-carousel-custom.js I am trying to write some owl carousel code :
$(document).ready(() => {
$('.owl-carousel').owlCarousel({
loop: true,
})
});
But .owlCarousel() doesn't resolve as a function.Why?
Here is a screenshot of my IDE:
How to fix angular.js:99 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=home&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angul.......1.7.8%2Fangular.min.js%3A22%3A57)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A8000%2Fangular-1.7.8%2Fangular.min.js%3A22%3A370)
?
<script src="/angular-1.7.8/angular.min.js"></script>
<script src="/angular-1.7.8/angular-aria.min.js"></script>
<script src="/angular-1.7.8/angular-material.min.js"></script>
<script src="/angular-1.7.8/angular-animate.min.js"></script>
<link href="/angular-1.7.8/angular-material.min.css" rel="stylesheet">
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="bootstrap-material-design.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" rel="stylesheet">
JS code
angular.module('home', ['ui.bootstrap', 'ngSanitize', 'ngAria', 'ngAnimate', 'ngMaterial']);
it will work without ngSanitize, but I need it.
you have to include cdn for ngSanitize and cdn is
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js"></script>
I am getting the following errors in Chrome. There are some similar posts describing this issue, but I could not fix it in my application:
Refused to load the script 'https://maps.google.com/maps/api/js?v=3'
because it violates the following Content Security Policy directive:
"script-src 'self' 'unsafe-inline' https://www.google.com/jsapi
https://ajax.googleapis.com https://ssl.google-analytics.com".
Refused to load the script 'https://vjs.zencdn.net/4.5/video.js'
because it violates the following Content Security Policy directive:
"script-src 'self' 'unsafe-inline' https://www.google.com/jsapi
https://ajax.googleapis.com https://ssl.google-analytics.com".
Refused to load the script
'https://ws.sharethis.com/api/getCount2.php?cb=stButtons.processCB&refDomain'
because it violates the following Content Security Policy directive:
"script-src 'self' 'unsafe-inline' https://www.google.com/jsapi
https://ajax.googleapis.com https://ssl.google-analytics.com".
I don't have any specific meta for the page. I have also linked all my javascript libraries in the main html as you see below.
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/Projector.js"></script>
<script type="text/javascript" src="js/ColladaLoader.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/tween.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type='text/javascript' src='js/dat.gui.min.js'></script>
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://maps.google.com/maps/api/js?v=3"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="js/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "0aab9c2b-5a08-4c08-bfeb-6fdc7756ab6d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<link href="https://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/4.5/video.js"></script>
<style type="text/css">.vjs-default-skin .vjs-control-bar { font-size: 89% }</style>
<script type="text/javascript">$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});</script>
....
I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.
<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">
define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'
], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'
]);
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});
}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);
<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>
Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .
One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:
agGrid.initialiseAgGridWithAngular1(angular);
Even before your module declaration. Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.
I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)