Content-Security Header throwing me error

Question

I am adding a Content-security-policy headers in my application by provide the following value of directive as the

style-src:'unsafe-inline"  script-src:  www.googletagmanager; font-src: 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://cdn.syncfusion.com;

like this but throw we error of g-tag i.e.

ReferenceError: gtag is not defined
    at m._next (main-es2015.f8382347a5a3c0995032.js:1:7087636)
    at m.__tryOrUnsub (main-es2015.f8382347a5a3c0995032.js:1:3347524)
    at m.next (main-es2015.f8382347a5a3c0995032.js:1:3346769)
    at g._next (main-es2015.f8382347a5a3c0995032.js:1:3345964)
    at g.next (main-es2015.f8382347a5a3c0995032.js:1:3345738)
    at t.next (main-es2015.f8382347a5a3c0995032.js:1:3350442)
    at m._next (main-es2015.f8382347a5a3c0995032.js:1:7046320)
    at m.__tryOrUnsub (main-es2015.f8382347a5a3c0995032.js:1:3347524)
    at m.next (main-es2015.f8382347a5a3c0995032.js:1:3346769)
    at g._next (main-es2015.f8382347a5a3c0995032.js:1:3345964

Also throwing me error for font i.e.

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src data:* https://*".
atlas-dev.centilytics.com/:80
Refused to load the font 'data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjeaTzgAAAEoAAAAVmNtYXD7UP53AAALpAAACpRnbHlm1RHgJwAAIGAAAg9MaGVhZCCrrrwAAADQAAAANmhoZWEIXgZKAAAArAAAACRobXR4JAb+rAAAAYAAAAokbG9jYQKOW2wAABY4AAAKKG1heHADtAHQAAABCAAAACBuYW1lc0cOBgACL6wAAAIlcG9zdMlVyL8AAjHUAAApOgABAAAEAAAAAFwEAP/A/8AEQAABAAAAAAAAAAAAAAAAAAACiQABAAAAAQAAdbd+1l8PPPUACwQAAAAAAN7GNN8AAAAA3sY03//A/+QEQAQcAAAACAACAAEAAAAAAAEAAAKJAcQAIQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAA...V4dC1mb3JtLTIFbGFiZWwLY2hlY2stYm94LTITYWRkLWVkaXQtZm9ybS1maWVsZAZidXR0b24LZHJvcC1kb3duLTIMcmFkaW8tYnV0dG9uCHBhc3N3b3JkE3RhYmxlLWluc2VydC1jb2x1bW4QdGFibGUtaW5zZXJ0LXJvdxV0YWJsZS1vdmVyd3JpdGUtY2VsbHMMdGFibGUtbmVzdGVkC3RhYmxlLW1lcmdlCWRyYWctZmlsbARob21lDWdhbnR0LWdyaXBwZXINYnJpbmctdG8tdmlldw9icmluZy10by1jZW50ZXIHd2FybmluZw1jcml0aWNhbC1wYXRoD2JvcmRlci1zaGFkb3ctMhJib3JkZXItZGlhZ29uYWwtdXAUYm9yZGVyLWRpYWdvbmFsLWRvd24NYm9yZGVyLWN1c3RvbQ1ib3JkZXItbm9uZS0xCmJvcmRlci1ib3gPYm9yZGVyLXNoYWRvdy0xBWF1ZGlvBXZpZGVvAAAAAA==' because it violates the following Content Security Policy directive: "font-src data:* https://*".
Refused to load the font 'data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjeaTzgAAAEoAAAAVmNtYXD7UP53AAALpAAACpRnbHlm1RHgJwAAIGAAAg9MaGVhZCCrrrwAAADQAAAANmhoZWEIXgZKAAAArAAAACRobXR4JAb+rAAAAYAAAAokbG9jYQKOW2wAABY4AAAKKG1heHADtAHQAAABCAAAACBuYW1lc0cOBgACL6wAAAIlcG9zdMlVyL8AAjHUAAApOgABAAAEAAAAAFwEAP/A/8AEQAABAAAAAAAAAAAAAAAAAAACiQABAAAAAQAAdbd+1l8PPPUACwQAAAAAAN7GNN8AAAAA3sY03//A/+QEQAQcAAAACAACAAEAAAAAAAEAAAKJAcQAIQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAA...V4dC1mb3JtLTIFbGFiZWwLY2hlY2stYm94LTITYWRkLWVkaXQtZm9ybS1maWVsZAZidXR0b24LZHJvcC1kb3duLTIMcmFkaW8tYnV0dG9uCHBhc3N3b3JkE3RhYmxlLWluc2VydC1jb2x1bW4QdGFibGUtaW5zZXJ0LXJvdxV0YWJsZS1vdmVyd3JpdGUtY2VsbHMMdGFibGUtbmVzdGVkC3RhYmxlLW1lcmdlCWRyYWctZmlsbARob21lDWdhbnR0LWdyaXBwZXINYnJpbmctdG8tdmlldw9icmluZy10by1jZW50ZXIHd2FybmluZw1jcml0aWNhbC1wYXRoD2JvcmRlci1zaGFkb3ctMhJib3JkZXItZGlhZ29uYWwtdXAUYm9yZGVyLWRpYWdvbmFsLWRvd24NYm9yZGVyLWN1c3RvbQ1ib3JkZXItbm9uZS0xCmJvcmRlci1ib3gPYm9yZGVyLXNoYWRvdy0xBWF1ZGlvBXZpZGVvAAAAAA==' because it violates the following Content Security Policy directive: "font-src data:* https://*".

Please help me or suggest me a best solution to fix these issue and security-header score A+

I am trying to add content-security-header for secure my application from XSS attacks My current third party script is google-analytics script, google-font and angular-material css for styling in my application

Answer 1

You likely need to add data: and http://atlas-dev.centilytics.com to font-src. There is something strange about the certilytics.com URL as the port number is misplaced.

But additionally the font-src directive in the error message is different from the one you have listed here. This means that there might be multiple CSPs on your page (check response headers and meta tags). Content needs to pass all CSPs, so adding another policy can only make it stricter. You might need to find and modify/remove the additional policy.