How to add Content Security Policy (CSP) in yii2 for smartsupp chat?

Question

I am using Yii2 https://github.com/tomlutzenberger/yii2-smartsupp-chat widget which is working pretty fine but it is not able to record videos in their website and they have suggest to add something called as CSP.

https://help.smartlook.com/en/articles/3470377-content-security-policy-csp-smartlook

Could anyone suggest where & how exactly below code will be added?

Content-Security-Policy: default-src 'self'; script-src 'self' https://*.smartlook.com https://*.smartlook.cloud 'nonce-randomlyGeneratedBase64Nonce' 'unsafe-eval'; connect-src 'self' https://*.smartlook.com https://*.smartlook.cloud; worker-src 'self' blob:

<script nonce="randomlyGeneratedBase64Nonce">...Your Smartlook Tracking Script...</script>

Suggested By @F Baghi

$randomNonce = Yii::$app->security->generateRandomString(64);

$nonce = "nonce-$randomNonce";

$hostSubdomains = "https://*.smartlook.com https://*.smartlook.cloud";

Yii::$app->response->headers->add(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' $hostSubdomains $nonce 'unsafe-eval'; connect-src 'self' $hostSubdomains; worker-src 'self' blob"
);

Answer 1

You need to add Content-Security-Policy header to response component in somewhere like Bootstrap component. Use s.th like:

Yii::$app->response->headers->add(
    'Content-Security-Policy',    
     "default-src 'self' $hostSubdomains http://google.com https://google.com https://www.google.com http://www.google.com"
);

Answer 2

1. YII2 framework has secure-headers extension for configure Content Security Policy and other secures headers. This is preferred way.

2. Alternatively you can set CSP in the web server config (see examples at the bottom of page). It's not easy to manage CSP in this case and use nonce-value token.

3. Also you can set CSP in meta tag . In this case any third-party script can steal nonce-value and use it, so this is the least preferred way.

BUT if you do not know how and where to set CSP, after setting CSP rules for Smartlook, very likely your web page will stop operates properly. Because above CSP rules covers Smartlook sources only, but your web page has their own scripts / styles / fonts, etc.
Therefore you need to combine Smartlook CSP rules and you own web page CSPs rules into one.

Best way is firstly to set Content-Security-Policy-Report-Only: default-src 'self... in reporting mode and check the browser console errors (in Dev Tool) or violation reports. And after that to set Content-Security-Policy: default-src 'self... in enforced (blocking) mode.

Answer 3

My new config that I am going to add on production i will post if its successful.

Extension:- https://github.com/hyperia-sk/yii2-secure-headers

Inside web/main.php

function generateRandomString($length = 10) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
}
$randomNonce  = generateRandomString(64);

'components' => [
      ...
      'headers' => [
            'class' => '\hyperia\security\Headers',
            
            ...

            'cspDirectives' => [
                  'default-src' => "'self'"
                  'connect-src' => "'self' https://*.smartlook.com https://*.smartlook.cloud",
                  'script-src' => "'self' https://*.smartlook.com https://*.smartlook.cloud 'nonce-$randomNonce' 'unsafe-eval'",
                  'worker-src' => "'self' blob:",
            ],

            ...
      ]
]

In your view file add $defaultNonce in a global variable that you can access anywhere

This is how I did it for my self inside web/main.php

 'components'[

 'on beforeRequest' => function ()use($randomNonce) {
        Yii::$app->params['defaultNonce'] = $randomNonce;
    }

]

And then last below code

$defaultNonce = Yii::$app->params['defaultNonce']?? null;

 <script nonce="<?=$defaultNonce?>">
        window.smartlook||(function(d) {
            var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
            var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
            c.charset='utf-8';c.src='https://rec.smartlook.com/recorder.js';h.appendChild(c);
        })(document);
        smartlook('init', 'yourKey');
    </script>