Refused to load the script - javascript

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>
....

Related

EvalError at new Function

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.

"SintaxisError: Unexpected EOF" is showed in console

I'm getting this error:
I'm not sure what I have wrong in my index.html. I am currently developing an app on ionic1 and this error is generated when I try to inspect my code by safari. I have read that this error occurs when a label is not closed, but in my case I do not know what I have wrong. What can be?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json" />
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<!-- css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet" type="text/css"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="lib/waves/css/waves.css" />
<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.css" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngStorage/js/ngStorage.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constantes.js"></script>
<!-- libs -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/swiper/js/swiper.js"></script>
<script src="lib/prefixfree/js/prefixfree.min.js"></script>
<!--<script src='lib/ng-cordova-oauth.min.js'></script>-->
<!--<script src="http://maps.google.com/maps/api/js?key=AIzaSyANNBvPehUvWndNs7zmVqWa7ys1DBTQnDs"></script>-->
<!-- Controladores TinApp -->
<script src="js/controllers/login/loginController.js"></script>
<!--<script src="js/controllers/wizard/ubicacionTinController.js"></script>-->
<script src="js/controllers/wizard/instructivoTinController.js"></script>
<script src="js/controllers/wizard/recuperarContrasenaController.js"></script>
<script src="js/controllers/registros/registrarUsuariosController.js"></script>
<script src="js/controllers/ofertas/ofertasController.js"></script>
<script src="js/controllers/ofertas/descripcionOfertaController.js"></script>
<script src="js/controllers/negocios/negocioController.js"></script>
<!--<script src="js/controllers/negocios/productosController.js"></script>
<script src="js/controllers/negocios/descripcionProductoController.js"></script>
<script src="js/controllers/favoritos/favoritosController.js"></script>
<script src="js/controllers/favoritos/descripcionFavoritoController.js"></script>-->
<script src="js/controllers/cupones/cuponesController.js"></script>
<script src="js/controllers/cupones/misCuponesController.js"></script>
<!--<script src="js/controllers/tins/misTinsController.js"></script>-->
<!--<script src="js/controllers/ajustes/ajustesController.js"></script>-->
<script src="js/controllers/ubicaciones/ubicacionesController.js"></script>
</head>
<body ng-app="tinApp">
<ion-nav-view class="viewport_inicial"></ion-nav-view>
</body>
</html>
As stated in the HTML specification:
The title element must not be empty.
Just add a title:
<title>tinApp</title>

Leaflet: Uncaught TypeError: L.markerClusterGroup is not a function when trying to use Cluster plug-in

I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>

Loading .js file in Firefox and IE

on Chrome and Opera, the website works perfectly. When I open it in Firefox and IE it is not loading the .js files. My php code looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title id="titlebank">WEBSITE</title>
<link rel="SHORTCUT ICON" href="images/icon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="js/progressbar.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/kickstart.js"></script>
<script type="text/javascript" src="chat/chat.js"></script>
<link rel="stylesheet" href="chat/chat.css" type="text/css" />
<script type="text/javascript">

Issue including elFinder and JQuery UI

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 ;)

Categories