Nonce SetUp Verification

I don’t even know if I’m in the right section, but I’m looking for a verification as to whether the nonce on my page is set up correctly?
I think I need the synchronous tags as it’s mainly to allow the PayPal checkout (the last phase of payment) so my customers can complete their purchase.
Also, the little bit of text that goes before the DataLayer:

window.dataLayer.push({
    nonce: INSERT_VALID_NONCE_VALUE
});

Does it go within a tag?
Lastly, I am doing all the CSP directives in my .htaccess (root) so it covers all of my 197 pages. The question is: do I need a tag in the section of each page to make the browser aware of the CSP? Currently, mine says:

<meta http-equiv="Content-Security-Policy" content="default-src https://*;">

Or do I put nothing?
I’d be very grateful if someone could help me, I’ve been trying to let PayPal in for months, it’s almost affecting my health!
Regards, Steve

Hey, I think you are missing a screenshot in your message. There is a blank space after " Currently, mine says:"
Are you using our developers documentation? Content Security Policy (CSP) — Piwik PRO Analytics Suite 16.40 documentation
The DataLayer push is needed before the tag script is executed as stated below:

@Michal_Szczerek I fixed the formatting.

Thank you for replying Michal, there’s a few items that I need advice on, so I’d better do them one at a time?

Yes, I am using the developer’s site which is very comprehensive, I’ve tried to stick with that religiously.

Most of it is self explanatory, except for where the blocks of script actually go on the html page ie: head? body? etc.

I have my CSP in my root .htaccess and I have a tag in the head of each page on my site like this:

Now, whether this is necessary I don’t know, but I read on Stackoverflow that it was.

I have sussed that I need an asynchronous container as I use PayPal’s payment gateway.

I have seen the nonce value on the developer’s page of nceIOfn39fn3e9h3sd

This line of script, where it says <your-sources> I have put 'self' and the above nonce value.
script-src <your-sources> 'nonce-INSERT_VALID_NONCE_VALUE';

I realise that I may have mis-understood some instruction, but my main concern is, as I said in my opening paragraph, where does the container go, head or body??

At the moment it's in the <head>
   <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
    <!--Piwick code starts-->
    <script type="text/javascript" nonce="nceIOfn39fn3e9h3sd">
    (function(window, document, dataLayerName, id) {
    window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});
    var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
    function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d=";expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"}
    var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");
    stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
    var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),tags.nonce="nceIOfn39fn3e9h3sd",isStgDebug&&qP.push("stg_debug");
    var qPString=qP.length>0?("?"+qP.join("&")):"";
    tags.async=!0,tags.src="[https://client.containers.piwik.pro/](https://client.containers.piwik.pro/)"+id+".js"+qPString,
    scripts.parentNode.insertBefore(tags,scripts);
    !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){
    var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
    })(window, document, 'dataLayer', 'feacd61d-0232-40a1-96c3-7e469f7bfa7f');
</script>
    <!--Piwick code ends-->

I think I've done it right so far, but you might think differently!
In any case, I am grateful for any assistance you can give me, Steve

Hey! So:

  1. There is a CSP definition that goes to <head> on each site.
  2. Piwik Pro container goes right after the opening <body> tag on every page of your site or app - you need to add nonce to the container like in the guide.
  3. In case of synchronous tags, there should be a variable created that will hold the value of nonce parameter - when deploying a synchronous tag you will be able to access that variable as stated: <script nonce="{{ nonce }}"> {{ nonce }} being the created nonce variable.

That how generally it should look. Of course there might be some specific approaches to implement CSP on specific websites :slight_smile: These guidelines are here to make sure that our container and our tags from Tag Manager are executed correctly with active CSP.

Thank you for your advice Michal, I’ve spent an evening re-doing this based on your directions.
One thing I wanted to know and you omitted was the bit of code that went above the dataLayer script.
I’ve attached a screen shot, the instructions say to put it in above the dataLayer which I have done, I hope this is correct?
I’ve just set it out below as it might be quicker for you to glance through.
Regards, Steve

window.dataLayer.push({ nonce: nceIOfn39fn3e9h3sd }); (function(window, document, dataLayerName, id) { window[dataLayerName] = window[dataLayerName] || [], window[dataLayerName].push({ start: (new Date).getTime(), event: "stg.start" }); . . . . .

Hi, are you using our Tag Manager? The description about that part tells you how to do it in Piwik PRO Tag Manager - you define a variable with nonce value - Create a variable | Piwik PRO help center - and then you access it when creating a tag - Custom code (async) tag | Piwik PRO help center - you refer to the created variable using {{ name of your variable }} so that you don’t have to use it’s literal value all the time.
In the Piwik PRO container you only need to make those highlighted changes:

Sorry I was just asking for verification on the positioning of the code Steve

The Data Layer push shouldn’t be mixed with the container code - it’s just something you need to add to the synchronous tags.

I was looking for a correct example because not all of us are familiar with coding.
But nowhere in all your examples does it say ‘this goes here’ so I asked.
Everyone needs a little help now and then.

I’m trying to help :slight_smile: The Data Layer push is not something that you hard code with the container. You use it in Piwik Pro Tag Manager only if you decide to use synchronous tag. You put your nonce value inside the variable (the code is in the guide, the guide about variables is in my earlier message). Then you access it when creating a tag in tag manager at the beggining in the script tag <script nonce="{{ nonce }}">. This {{ nonce }} is the variable that you creates in the previous step :slight_smile: The container code need only those two highlighted changes like in the screen in my previous message.

Hi folks @ Piwick, I’m looking for answers.

As per my heading, do I need a base64 token to enable on my website?

When I checked my site with cspvalidator.org I got a message:

1:160: Invalid base64-value (should be multiple of 4 bytes: 18).

1:298: Invalid base64-value (should be multiple of 4 bytes: 18).

1:613: Invalid base64-value (should be multiple of 4 bytes: 18).

As usual I haven’t got a clue what a is, but whatever it is, it needs to be in multiples of 4.

Any guidance would be most appreciated, thank you in anticipation, Steve

Your nonce value has 18 characters so it seems that that might be the problem. The nonce value should contain at least 32 hex characters, or about 24 base64 characters. Also, the characters that can be used in the nonce string are limited to the characters found in base64 encoding.
Source: CSP Nonce ⟶ Script & Style Attribute

OK, but I copied it from the rest of the instructions on the container page and presumed it to correct.
I shall read the link and amend accordingly, Steve

As you can see on the attachment, your instructions plainly give the ‘correct’ nonce, so this code is what I put in every page of my website wherever it mentions ‘nonce’ - I have many many pages and I did all this manually to make sure everything has a chance to work properly, all while checking with you for verification.
Now I find that it’s not correct, so I am going to dedicate more time this weekend to go through 197 website pages to alter the incorrect nonce Piwick provided as it won’t work.
Can you please advise me if there’s anything else in the Piwick instructions that needs rectification/altering?

I have now been to https://www.base64decode.org/ and produced a nonce:

nonce base64 ‘Q2E1YzRkZU00Z2F6MW5lOTBzZGVjYWRl’ (32 char divisible by 4)
I’ve gone for the longer 32 characters than the minimum 28.
I have attached my html from the opening so you can see where I have the nonce is positioned, I know that I also have to replace it in my CSP header in my .htaccess.

I won’t start work on this until I hear from you, I cannot face doing it all again if there’s a mistake, Steve

Hi Steve,
I see that your nonce is 32 characters long but it is still a hardcoded value. For the CSP to work properly, this should be dynamically generated on the server. I think it’s really important to have CSP set up by a professional in the subject. This is an important security matter. We cannot take responsibility for that.

I take your advice on a professional, I have already bought services from 2 ‘professionals’ who both gave up and blamed it on PayPal, so that was money down the drain.
So who could you recommend?
Somebody is out there somewhere.
By the way, I now have a new nonce (persistence paid off) and according to 2 independent checkers, I now have a valid policy, but we’ll see. Steve

I’m sorry, I don’t really have a recommendation here

That’s what I have found, no-one capable seems to be around, so I’m left to my own research.

By attachment here is my valid site check, Steve

Hi Michal, I’m trying to get my cookie bar/consent active, I found the instructions, but I couldn’t find the No2 link ‘Websites & Apps’.

Have you hidden it somewhere? All the details are OK in the Consent Manager.

Here’s the instructions you have set out:

Go to Administration module
Go to “Websites & apps” tab
In “Settings” section, find “Privacy” settings
Ensure that “Ask visitors for consent” is checked

Enable “Use a custom consent form” option
Failed at hurdle 2, story of my life . . . Steve