1

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>
tayu
  • 33
  • 1
  • 1
  • 5
  • This error is triggered when there's an inline style (ie `style=""`) somewhere in your markup, can you check if that's the issue? – Métoule Jul 06 '21 at 12:08
  • The code shown here is all I have. I think you can reproduce the error with this code. – tayu Jul 06 '21 at 17:53
  • Wow that's really strange. I suppose it's actually a bug in Chrome, because the issue doesn't occur in Firefox. – Métoule Jul 06 '21 at 20:47
  • I can reproduce the error using chrome and edge. Thank you for that info. – tayu Jul 06 '21 at 23:23

2 Answers2

2

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.

granty
  • 7,234
  • 1
  • 14
  • 21
  • It works! Thank you. But 'unsafe-hashes' relaxes the security policy some extent. I wish there was the more robust way. – tayu Jul 08 '21 at 23:13
  • 1
    Any source you add to the policy relax it in some way. `'unsafe-hashes'` allows only `style=` with the specified hashes, nothing else. – granty Jul 09 '21 at 13:02
0

This seems to be a new bug in chromium based browsers (including Edge). It doesn't appear in Firefox v89.

jvandeven
  • 21
  • 1
  • I think so. I still need some workarounds. Do you know how to avoid this error and get the same result? – tayu Jul 07 '21 at 22:44
  • 1
    The 'unsafe-hashes' workaround by granty will work, but is likely to be identified as insecure if that style-src rule catches on. The datalist functions without any noticeable deterioration despite the browser error, so I have left it for the moment. The chromium team is aware of the issue (even though they may not address it for a long time/ever): https://bugs.chromium.org/p/chromium/issues/detail?id=1216456&q=csp%20error%20datalist&can=2 – jvandeven Jul 09 '21 at 05:40
  • As you mentioned, ignoring the error can be a compromise solution for the time being. – tayu Jul 09 '21 at 18:11