search

josefarias / hotwire_combobox

An accessible autocomplete for Ruby on Rails.
https://hotwirecombobox.com
MIT License
436 stars 26 forks source link

Issue with announcer element's inline styles & CSP #142

Closed moneill closed 4 months ago

moneill commented 4 months ago

Describe the bug The data-hw-combobox-target="announcer" element contains inline CSS styles, which will only be applied if the site's Content Security Policy contains style_src 'unsafe-inline'.

To Reproduce Steps to reproduce the behavior:

  1. Clone https://github.com/josefarias/hotwire_combobox_docs
  2. Enable Rails' default CSP in config/initializers/content_security_policy.rb by uncommenting the code
  3. Restart Rails
  4. After selecting a result within a combobox, observe that the contents of the data-hw-combobox-target="announcer" are visible and the browser console displays CSP violations. NB: if this doesn't happen right away, refresh the browser a bunch first. 😅

Expected behavior Ideally the styles for data-hw-combobox-target="announcer" would be codified in a CSS style sheet, or alternatively, we could pass through a CSP nonce into the library in some way.

Screenshots CleanShot 2024-04-08 at 09 55 46@2x CleanShot 2024-04-08 at 09 56 09@2x

Desktop (please complete the following information):

Additional context Adding style_src 'unsafe-inline' to an app's CSP should (I think?) be a workaround, but that somewhat defeats the purpose of CSP, so I'd love to avoid that if at all possible. I'll poke around more to see if there are better workarounds -- still getting my bearings with CSP!

josefarias commented 4 months ago

Thanks @moneill! Great catch

Should be fixed on main now.

The fix should work out of the box as long as folks exercising a CSP set a content_security_policy_nonce_generator in their config and make sure to include "style-src" in content_security_policy_nonce_directives (which is included by default as long as content_security_policy_nonce_directives isn't set).