Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution”

Question

I keep getting this error:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: http://www.visitsingapore.com https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-V+/U3qbjHKP0SaNQhMwYNm62gfWX4QHwPJ7We1PXokI='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Can anyone tell me how to solve this and what does it mean? My code is:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data:gap: http://www.visitsingapore.com   https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"> <script src="lib/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="scripts/key.js"></script> <script>$.ajax({         url: ' http://www.visitsingapore.com/api.listing.en.json',         type: 'GET',         beforeSend: function (xhr) {             xhr.setRequestHeader('email ID', '[email protected]');             xhr.setRequestHeader('token ID', '-------');         },         data: {},         success: function (qwe12) {             var TrueResult2 = JSON.stringify(qwe12);             document.write(TrueResult2);         },         error: function () { },     });</script> 

Answer 1

The best way to fix this would be to take that $.ajax(…) call out of the document and move it into an external file called ajax-call.js, and then do this:

<script src="ajax-call.js"></script> 

The reason that’s better is that if you’re already going to the effort of setting a CSP policy for your document, then you should ideally go to the additional effort of removing all inline scripts.

But if for some reason you really need to keep the script inline in the document, you can change that meta element so the exact sha256 hash value from the error message is included as a source for the script-src directive, like this (with some line breaks added just for readability):

<meta http-equiv="Content-Security-Policy"   content="default-src 'self' data:gap: http://www.visitsingapore.com    https://ssl.gstatic.com 'unsafe-eval';   style-src 'self' 'unsafe-inline';   media-src *;   script-src 'sha256-V+/U3qbjHKP0SaNQhMwYNm62gfWX4QHwPJ7We1PXokI=' "> 

And a couple places to get a bit more information:

• developers.google.com/web/fundamentals/security/csp/#if_you_absolutely_must_use_it
• www.owasp.org/index.php/Content_Security_Policy_Cheat_Sheet#Refactoring_inline_code