Skip to content

feat: Add inlineSlyeNonce configuration #2542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
1cg merged 1 commit into from
May 15, 2024
Merged

feat: Add inlineSlyeNonce configuration #2542

1cg merged 1 commit into from
May 15, 2024

Conversation

@marcospereira
Copy link
Contributor

@marcospereira marcospereira commented May 10, 2024

Description

Add new configuration to avoid CSP error for progress indicator. Users will then be able to configure the nonce as:

<meta name="htmx-config" content='{"inlineSlyeNonce":"<base64-nonce-value>"}'>

Fixes #1062.

Testing

I used a copy of the modified file in my application and tried without adding the configuration above. Then I got the following (expected) error:

htmx.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-<base64-value>'". Either the 'unsafe-inline' keyword, a hash ('sha256-bsV5JivYxvGywDAZ22EZJKBFip65Ng9xoJVLbBg7bdo='), or a nonce ('nonce-...') is required to enable inline execution.

I then added the configuration and got no errors. 🎉

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (master for website changes, dev for source changes)
  • This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
  • I ran the test suite locally (npm run test) and verified that it succeeded
@1cg 1cg merged commit ab458e7 into bigskysoftware:dev May 15, 2024
@1cg
Copy link
Contributor

1cg commented May 15, 2024

thank you!
@marcospereira marcospereira deleted the issues/1062/add-inlineStyleNonce-config branch May 15, 2024 18:29
@marcospereira
Copy link
Contributor Author

marcospereira commented May 18, 2024

Thank you, @1cg.

Do you have an ETA for when a new release that includes this change will happen?
@1ma
Copy link

1ma commented Jul 27, 2024

For future reference, this is how to use this option to whitelist htmx's inline styles when using a CSP.

<head>
    <meta name="htmx-config" content='{"inlineStyleNonce":"wtf-htmx"}'>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'nonce-wtf-htmx';">
    <script src="/js/htmx-2.0.1.min.js"></script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants

@marcospereira @1cg @1ma