Description
Issue Description
When using Turbo with a Content Security Policy that requires nonces for inline styles, I'm encountering CSP violations. Turbo appears to be dynamically applying inline styles without the required nonce attribute, causing browsers to block these styles.
Error Message
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https: 'nonce-4991a22ea38a43bc86c26623d6c36944'". Either the 'unsafe-inline' keyword, a hash ('sha256-qnVkQSG7pWu17hBhIw0kCpfEB3XGvt0mNRa6+uM6OUU='), or a nonce ('nonce-...') is required to enable inline execution.
Context
I'm using Rails 8 with a properly configured Content Security Policy that requires nonces for inline styles. This is a recommended security practice, but it conflicts with how Turbo currently applies styles.
The error occurs with standard Turbo functionality, such as when using data attributes for confirmation dialogs:
<%= link_to "Delete", document,
data: {
turbo: true,
turbo_method: :delete,
turbo_confirm: "Are you sure?"
},
class: "backend_link" %>
Suggested Improvements
I'd like to suggest one or more of the following improvements:
-
Add nonce support: Have Turbo read the CSP nonce from the document (perhaps from a meta tag) and apply it to any dynamically generated style elements.
-
Use class-based styling: Instead of inline styles, Turbo could apply predefined classes that are included in the application's stylesheets.
-
Configuration option: Provide a configuration setting to choose between inline styles (current behavior) or class-based styling for better CSP compatibility.
Impact
Implementing this improvement would allow developers to maintain strong security policies with Content Security Policy while still benefiting from Turbo's features. It would eliminate the need to choose between security (strict CSP) and functionality (Turbo features).
Additional Information
- Turbo version: 2.0.13
- Rails version: 8.0.2
- Browser: Chrome 124
Thank you for considering this improvement!