Content-Policy and Inline javascript/css

So I’m using wp_localize_script which I need for some javascript I’m running on the front. However the variable is that holds the information from localize_script (we’ll call this variable “site” for ease) is “undefined”. Like wise I had some inline css for the login page which isn’t being executed and the main issue seems to be CSP:

add_header X-Frame-Options “SAMEORIGIN” always;
add_header X-XSS-Protection “1; mode=block” always;
add_header X-Content-Type-Options “nosniff” always;
add_header Referrer-Policy “no-referrer-when-downgrade” always;
add_header Content-Security-Policy “default-src * data: ‘unsafe-eval”unsafe-inline'” always;

on my site I get the following error:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). newworld:17:1 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). newworld:21:1 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). newworld:39:1 ReferenceError: blackout is not defined app.js:1:10056
56d7 https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
a https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
0 https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
a https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
s https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
<anonymous> https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1
<anonymous> https://www.blackout.team/wp-content/plugins/blackout-guides/js/app.js?ver=5.3.2:1 Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).

Now this works on my development environment, which doesn’t have CSP enabled.

I guess the question is how can I have “safe” and “unsafe” inline code

Read more here:: Content-Policy and Inline javascript/css

Leave a Reply

Your email address will not be published. Required fields are marked *