mdb.js and mdb.min.js not CSP friendly
Expected behavior
For mdbootstrap to run without triggering either style-src nor script-src Content Script Policy issues.
Actual behavior
When using either mdb.js or mdb.min.js I am getting the following CSP errors (2 errors) please note the location is different in the min file (obviously). Please note this is a script triggering a style policy.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.
injectCSS @ mdb.js:11035 initialize @ mdb.js:11052 7.10 @ mdb.js:1985 s @ mdb.js:264 e @ mdb.js:264 (anonymous) @ mdb.js:264 (anonymous) @ mdb.js:264 (anonymous) @ mdb.js:264
AND
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/". Either the 'unsafe-inline' keyword, a hash ('sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o='), or a nonce ('nonce-...') is required to enable inline execution.
injectCSS @ mdb.js:11038 initialize @ mdb.js:11052 7.10 @ mdb.js:1985 s @ mdb.js:264 e @ mdb.js:264 (anonymous) @ mdb.js:264 (anonymous) @ mdb.js:264 (anonymous) @ mdb.js:264
Your working environment and MDB version information
Google Chrome 64.0.3282.186 64 bit on Windows 10 x64.
Resources (screenshots, code snippets etc.)
My CSP header is: Content-Security-Policy:default-src 'self'; script-src https://az416426.vo.msecnd.net 'self' nonce-59ac6802cb324e1ea2116cca8876e361; style-src 'self' https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/; font-src 'self' https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/; object-src 'none'; frame-ancestors 'none'; sandbox allow-forms allow-same-origin allow-scripts; base-uri 'self'; upgrade-insecure-requests;
The script tag is:
<script type="text/javascript" src="~/lib/mdb-free/js/mdb.js"></script>
I have tried adding a nonce to the script tag and also including the location as a safe location. Neither works and after understanding CSP better I now know it should not. Because mdb is inserting style inline this should fail. A different, safer approach, is needed. A possible solution may be found in this SO answer: https://stackoverflow.com/a/27088213/214020
Apologies for not submitting a pull request but I am already too far behind on my project.
Source: mdbootstrap/material-design-for-bootstrap