I am facing a very weird issue with Content Security Policy in Chrome and Firefox.
My meta tags looks as follows:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'" />
These lines are creating problems:
Link tag:
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
Script tag in body:
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-76462125-1', 'auto');
ga('send', 'pageview');
var dimensionValue = 'SOME_APP_NAME';
ga('set', 'dimension1', dimensionValue);
</script>
Video tag below in my page:
<video controls="controls">
<source src="https://www.youtube.com/embed/OhFel6HTHu8" type="video/mp4" />
</video>
Please tell me what I am missing.
If you check the HTTP response, IdentityServer issues CSP headers. You can configure them by setting the various flags on the CspOptions. It's covered in the docs: https://identityserver.github.io/Documentation/docsv2/advanced/csp.html
Related
I am trying to set up strict CSP in my next app based on the next.js example. In my _document.js I have the following:
const cspHashOf = (text) => {
const hash = crypto.createHash('sha256')
hash.update(text)
return `'sha256-${hash.digest('base64')}'`
}
let cspStr = ''
for (let k in csp) {
cspStr += `${k} ${csp[k]}; `
}
...
render() {
const nonce = crypto.randomBytes(8).toString('base64')
let csp = {
'object-src': "'none'",
'base-uri': "'self'",
'script-src': `'nonce-${nonce}' 'unsafe-inline' 'unsafe-eval' 'strict-dynamic' https: http: ${cspHashOf(
NextScript.getInlineScriptSource(this.props)
)}`,
}
let cspStr = ''
for (let k in csp) {
cspStr += `${k} ${csp[k]}; `
}
return (
<Html>
<Head>
<meta httpEquiv="Content-Security-Policy" content={cspStr} />
...
</Head>
<body>
...
<NextScript nonce={nonce} />
</body>
</Html>
)
In the rendered page, I have all these preloaded chunks coming from Next which are getting blocked
<link rel="preload" href="/_next/static/chunks/8be9d4c0d98df170721d8fe575c2a4bcd5b2fbe4.e7c8a9ea6074f4dcaa51.js" as="script">
<link rel="preload" href="/_next/static/chunks/863050a7585a2b3888f2e4b96c75689f1ae4a93d.a73c594ed7ed04a682dc.js" as="script">
<link rel="preload" href="/_next/static/chunks/be8560b560b3990e61cbef828a20e51dc9370d83.4acbf8ef4e1b51b0bc0f.js" as="script">
<link rel="preload" href="/_next/static/chunks/be8560b560b3990e61cbef828a20e51dc9370d83_CSS.6164c81b6ed04bb13dbd.js" as="script">
How do I prevent them from being blocked?
I was eventually able to resolve this by also passing the nonce as a prop to Head
<Head nonce={nonce}>
The documentation around this from Next.js is non-existent! I'd love if anyone finds it to share the link
HI i am trying to send data using analytics.js but show error.
<head>
<meta charset="utf-8">
<title>GanalaticsDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<form action="">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit">
</form>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
//})(window, document, 'script', 'https://www.google-analytics.com/analytics_debug.js', 'ga');
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-169197862-1"]);
_gaq.push(["_setDomainName", "none"]);
_gaq.push(["_trackPageview"]);
// window.ga_debug = {trace: true};
ga('create', 'UA-169197862-1', 'auto');// add your tracking ID here.
ga('require','ecommerce','ecommerce.js')
ga('ecommerce:addTransaction',{
'id':'1234',//Transaction id
'affiliation':'skinny jeans',
'revenue':'28.8',
'shipping':'10.00',
'tax':'1.89'
});
ga('ecommerce:addItem',{
'id':'1234',
'name':'OKEJeans',
'sku':'SKJ49',
'category':'Men Jeans',
'price':'76.65',
'quantity':'1'
});
ga('ecommerce.send')
ga('send', 'pageview');
</script>
Contact Sales
</body>
The error in developer tools says : Running command: ga("ecommerce.send");
analytics_debug.js:25 Command ignored. Unknown target: undefined and Running command: ga("send", "pageview")
analytics_debug.js:25 Unallowed document protocol. Aborting hit.
I searched in internet but many said to add targetname but it is also not working.
You are mixing _ga and _gaq code library. The second library is deprecated.
I've an ecommerce site and I'm tracking the Orders in the Thank-you page sending all the transaction data within the DataLayer variable.
The transaction data is been sent and recorded but I'm getting this error message when debugging with Tag Assitant Chrome Extention:
Event hits must be sent after a pageview hit, but this event hit was
not preceded by a pageview
HTML of Thank-you page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Stickers Gallito Perú">
<meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM"/>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<title>Stickers Gallito</title>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'eec.purchase',
ecommerce: {
currencyCode: 'PEN',
purchase: {
actionField: {
id: 5,
affiliation: 'Stickers Gallito E-Commerce',
revenue: 250.00,
shipping: 15.00,
coupon: ''
},
products: JSON.parse('[{"id": 5, "sku": "S5", "name": "Stickers cuadrados", "price": "250.00", "size": "3cm x 3cm", "quantity": 1}]')
},
}
});
</script>
<!-- Google Tag Manager -->
<script>(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;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TPXWL88');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPXWL88"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
#Rest of HTMl body...
I thought that the DataLayer should be before the Google Analytics code, Am I wrong? Or How should I fix this?
The dataLayer can be filled before the GTM script, but an event is best associated to a yet fired pageview (not mandatory but recommended).
You could associate your e-commerce data to a pageview instead of an event, and remove the part event: 'eec.purchase', to do so.
I use the google analytics in my hybird applicaction using onsen ui and angularjs, but In the google analytics Audience has data，real-time report has not data.Anybody knows the reason？
My code as follows：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
</head>
<body>
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x');
ga('send', 'pageview');
</script>
<h1>HelloWorld!</h1>
</body>
</html>
With the release of famo.us, it has all the libraries as CDN hosted libs. How can I use these from within a meteor app?
I get a lot of problems with the "define" in the famo.us code...
What I've done is create a new meteor app, and then from the famo.us boilerplate, I've taken the html and put it into a client folder so it looks like
<head>
<title>famo.us App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({'localhost:3000': 'public/'});
require(['main']);
</script>
</head>
<body>
</body>
Then I've taken the main.js in the src folder of the boiler plate and put it into the client/compatibility folder of meteor. But it doesn't really work. Comes back with
Uncaught ReferenceError: define is not defined
from main.js
and main.js looks like
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [200, 200],
content: 'http://code.famo.us/assets/famous_logo.svg',
classes: ['double-sided']
});
var initialTime = Date.now();
var centerSpinModifier = new Modifier({
origin: [0.5, 0.5],
transform : function(){
return Transform.rotateY(.002 * (Date.now() - initialTime));
}
});
mainContext.add(centerSpinModifier).add(logo);
});
from looking at the source, it looks like its because meteor has compiled main.js and included before the famo.us stuff gets loaded.
Have you tried loading main.js directly in the script tag instead of using the script tag to "require" it in. I'm doing something similar where I inject the main.js code directly into the html, but here is an example where I've split it out and it works (although I'm not using meteor.)
Clearly I'm also making a bit of an alteration to the code and not using define, but this change is straight forward. Here are the html and js...
html:
<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>
js:
require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example
//var Engine = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [200, 200],
content: 'Hello World',
classes: ['red-bg'],
properties: {
lineHeight: '200px',
textAlign: 'center'
}
});
mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example
});
Have you tried to import mjn:famous package into your meteor project?
meteor add mjn:famous
great question; famo.us is moving away from Yeoman / Grunt
to clean up rich's answer, here's a simple index.html
<html>
<script src='http://code.famo.us/lib/require.js'></script>
<script src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<script>
require([
'famous/core/Engine',
'famous/core/Surface',
'famous/core/Modifier'
], function(Engine, Surface, Modifier){
var context = Engine.createContext();
var helloSurf = new Surface({
content: 'hello world',
properties: {
backgroundColor:'red'
}
});
var helloMod = new Modifier({
size: [100, 100],
origin: [.5, 0]
});
context.add(helloMod).add(helloSurf);
});
</script>
<html>