Customizer requires a relaxed CSP with 'unsafe-eval' specified

[bjornjohansen]

If you’re using Content Security Policy headers, 'unsafe-eval' have to be specified to use the Customizer. Otherwise, the Customizer will turn up mostly blank.

The console in Google Chrome DevTools reports:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data: https:"

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy. In underscore.min.js there is at least one occurrence of new Function(String): new Function(t.variable

"obj","_",i)

I would not consider this a bug, but a nuisance, since it requires this specific URL to be handled differently in the web server configuration when using CSP.

I’ve tested against both version 4.6.1 and trunk (4.7-beta2-39150), and with Twenty Fifteen and Twenty Seventeen as activated themes.

[bjornjohansen]

Sceenshot of the console in Chrome

[bjornjohansen]

Screenshot of the triggered error in Chrome

[bjornjohansen]

Screenshot of the HTTP headers, including the CSP

[westonruter]

This turns out to not be a problem specific to the customizer. As you noted in Twitter, the Media Library is also broken when Nginx is configured with:

add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' data: https:";

In fact, it is a more fundamental problem with the JavaScript used in WordPress. Namely, anywhere in WordPress that wp.template (or Underscore templating) is used, this problem will occur. JavaScript templating in WP currently requires unsafe-eval.