Search code examples
htmlcontent-security-policydatalistunsafe-inline

How can fix "it violates the following Content Security Policy directive: "default-src 'self'" when I use datalist?

When I use datalist with the Content-Security-Policy" content="default-src 'self'", it gives error, "Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-pIL...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.".

The data list works as I hope in the browser, however the error message is annoying. As I hope to keep the security as strong as possible, I do not want to change Content-Security-Policy to unsafe-inline. Could you give me a hint to fix this?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
</head>
<body>
   <label for="animalList" class="form-label">animal</label>
   <input class="form-control" list="animalOptions" id="animalList" placeholder="">
   <datalist id="animalOptions">
     <option value="dog">
     <option value="cat">
   </datalist>
</body>
</html>
Solution

  • To get rid of this error just add into your CSP:

    style-src-attr 'sha256-pILX+5FGCpLRHvNBgtABIdSMmytrYudGxJBUYXY1t0s=' 'unsafe-hashes';

    This directive works in browsers on Chromium engine only and applies to style= attribute. Other browsers will follow style-src rules. For <style>...</style> blocks a Chrome will follow style-src rules too.