Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
Get this error to in console when trying to add onclick event to button in sidebar
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id = "content"></div>
<script src="panel.js"></script>
<button id="createNewInstance" onclick="openDb()">New Category</button>
</body>
</html>
why is that?
You can't use inline scripts or define event handlers in WebExtension pages. You have to add your event handler in an external JavaScript file.
panel.js
document.getElementById("createNewInstance").addEventListener("click", openDb)
Related
I am using google tag manager in my project, but when I add the CSP, it blocks GTM.
CSP:
default-src https: http: 'strict-dynamic' 'nonce-{NONCE-KEY}' 'unsafe-inline' 'self' https://www.googletagmanager.com;
Code:
<Html lang='es'>
<Head nonce='{NONCE-KEY}'>
<script
nonce='{NONCE-KEY}'
aria-hidden='true'
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM_ID}');`,
}}
/>
</Head>
<body aria-label='Cargando'>
<noscript
aria-hidden='true'
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
}}
/>
<Main />
<div id='tooltip' />
<NextScript nonce='{NONCE-KEY}' />
</body>
</Html>
Error:
According to the documentation adding only nonce should work, as I don't want to add the 'unsafe-eval' directive to my CSP for security reasons.
It is not clear from your error message whether it is caused by GTM or some other script. However 'unsafe-eval' is required for GTM only when custom JavaScript variable names are used in the "Custom HTML tags".
To get rid of 'unsafe-eval' you can use custom templates instead of custom JavaScript variable names.
Never use strict Content Security Policy based on the default-src directive because it leads to fatal security consequences in Firefox.
I am getting tagName of null error on razorpay integration. This error is related to head manager.
Link of github repository https://github.com/rajatgalav/razorpay-demo
I tried to debug it. And if i remove head component from index.js file, problem does not occur. But i want head component also in my project.
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<button onClick={displayRazorpay}>pay</button>
</main>
Head is imported from next/head package of NextJs
Nextjs adds default viewport meta tag <meta name="viewport" content="width=device-width">.
But razorpay script removes viewport meta tag and adds it's own version. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And also adds theme-color meta tag <meta name="theme-color" content="#ff7400">.
Nextjs fails to detect these changes and tries to update the header. That's why you see this error when you go to success page.
So I am redirecting the user to success page by window.location = '/success' instead of using router.push('/success')
I am still investigating how to avoid the error when using router.
You could try this:
"modal": { "ondismiss": function(){ console.log('Checkout form closed'); const _window = window as any; _window.location = '/checkout'; }}
Also, add window.location in the handler function to navigate to another URL. Then you won't get that error.
I found a hack for this issue. Just add the razorpay script in the _document.js file. You can do it like this:
<Html lang="en">
<Head>
<script src="https://checkout.razorpay.com/v1/checkout.js" async></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
This fixed the issue for me.
Could you sort this issue ? The handler function in the Razorpay is causing this issue, though it is required. If that is removed this error is not appearing on navigation
I am trying to display a plain html/css loading spinner on first load in my Angular APP. The spinner code is included in my index.html.
However, the dom seems not to be rendered until my angularjs APP starts kicking in, causing a very lengthy display of a white screen until this finally happens. Is there any way to prevent that?
I would like to understand how to load my plain html/css spinner right after the css code in the head is done loading so as to improve user experience.
Test on webpagetest.org seem to confirm this diagnosis (the /settings, /introductions, /menus lines are all calls to an external API done by an AngularJS service before render):
Here is a simplified version of my build code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
</body>
</html>
whatever the complexity of your application,all your controllers are within the same angular application, all scopes within the same application inherits from the same root, whatever you define on the $rootScope will be available to all child scopes.
we have two ways to resolve this problem:
use $broadcast(), $emit() and $on() that facilitate event driven publisher-subscriber model for sending notifications and passing data between your controllers.(professional solution)
declare $rootScope variable and watching changement.(simple way)
It turns out the problem was coming from "render-blocking javascript", I had to add the "async" tag to my JS to fix it.
When adding async to both my lib.js and app.js, I had an issue with app.js loading before angular scripts were loaded (thus causing the APP to throw an error). In order to solve this issue, I combined my lib.js and app.js into one single file and then added the async tag.
My final build code looks like that (the magic happens on the final "script" tag):
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<!-- This app.js now also contains lib.js from my question !-->
<script src="js/app.js" async></script>
</body>
</html>
I am using ng-include to call the header content and the footer,
like this :
<div ng-app="app">
<div ng-include="'pages/header.html'"></div>
<script src="js/Listenrs.js"></script>
<!-- more content -->
</div>
I have a native js file with event listeners that is in the js folder, without the ng-include all the listeners are working but when using ng-include all the event listeners are ignored, a check alert inside the script shows the browser did not ignore the file but besides the alert the listeners dont work.
You should include JQuery library before AngularJS library in your index file for any lazy-loaded scripts to be compiled and added to the JS namespace automatically. Please look at the following code.
[index.html]
<head>
<script src=jquery.js>
<script src=angular.js>
</head>
<body>
<ng-include src="templateurl"></ng-include>
</body>
[template.html]
<head>
<script>
alert(" script loaded")
</script>
</head>
You will get the alert in the above configuration.
I am new to ServiceStack and Angular. Apologies if this is verbose.
with reference to Html5 pushstate Urls on ServiceStack
I would like to be able to have my api service served up from the root. ie http://mydomain.com/
If a user browses the route, I would like to serve up a default html page that bootstraps my angular app.
In the the app itself if angular calls mydomain.com/customer/{id} json should be served but if this is browsed directly it should serve the default html page and keep the url but the route in the service method does not need to be called. as this will be resolved by angular which will call the customer service itself for a json result.
There are probably a few different ways to make this work, as long as you don't need to support html5mode urls. I have hope that I'll be able to leverage this code to eventually support html5mode, but at the moment, I've resigned myself to hash based URLs.
Given urls like: http://example.com/ or http://example.com/#/customer/{id}, here's how to bootstap an angularjs single page app on a self-hosted servicestack project from the root of the domain.
To enable the markdown razor engine, add this to your AppHost config (not absolutely necessary, but my preference over the default razor engine):
Plugins.Add(new RazorFormat());
Place a file, default.md, in the root of your project, and ensure it's properties are "content/copy when newer". Put whatever content you want in there. The important thing is to assign the template file. (If you're using the default razor engine, an equivalent default.cshtml file should also work, but I've never tried it. ) The template file is what will bootstrap your angularjs app. This is what I have in my default.md:
#template "Views\Shared\_Layout.shtml"
# This file only exists in order to trigger the load of the template file,
# which bootstraps the angular.js app
# The content of this file is not rendered by the template.
My _Layout.shtml file looks like this (omitting irrelevant details). Note ng-app in the html tag, and the ng-view div in the body. Also note that I don't include <!--#Body--> in the file. I'm not using server side templates for this project.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Content/css/app-specific.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar goes here -->
<div class="container">
<header id="header">
<!-- Header goes here -->
</header>
<div ng-view></div>
<hr>
<footer id="footer">
<!-- Footer goes here -->
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/Scripts/app-specific/app.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-services.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-controllers.js?3ba152" type="text/javascript"></script>
</body>
</html>