How to use the Nonce/PolicyHelper service

I just noticed the hook_csp_policy_alter function. I was able to append using that hook by adding this function:

function hook_csp_policy_alter(Csp $policy, Response $response) {
  // Add nonce value to CSP.
  /** @var \Drupal\csp\PolicyHelper $policy_helper */
  $policy_helper = \Drupal::service('csp.policy_helper');
  $policy_helper->appendNonce($policy, 'script', ['unsafe-inline']);
}

And then anywhere I needed to add the nonce value in my theme I used the Nonce service:

  // Generate a nonce for CSP.
  /** @var \Drupal\csp\Nonce $nonce_service */
  $nonce_service = \Drupal::service('csp.nonce');
  $nonce_value = $nonce_service->getValue();

Your comment is correct.
Just make sure that your additional JS elements aren't being cached in the dynamic page cache if they're being added by something more granular then hook_preprocess_page(), so that they receive the new nonce value each time.

2.1 should make this easier when it's released, by attaching information to the relevant render element and providing a placeholder for the nonce value ✨ Allow CSP to be added by render elements Needs review

Attaching policy to render elements is now available in a 2.1.0-beta1 release, and provides a mechanism to attach a nonce with a placeholder lazy builder so that the element can be cached and still receive a new nonce value on each request.

https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... →

Mhm, for some reason the hook isn't called in my module (but other hooks are):

function m_module_csp_policy_alter(\Drupal\csp\Csp $policy, \Symfony\Component\HttpFoundation\Response $response) {
  // Add nonce value to CSP.
  /** @var \Drupal\csp\PolicyHelper $policy_helper */
  $policy_helper = \Drupal::service('csp.policy_helper');
  $policy_helper->appendNonce($policy, 'style', ['unsafe-inline']);
  $policy_helper->appendNonce($policy, 'script', ['unsafe-inline']);
}

Am I doing something wrong?

Ah, I see, it needs to be in a theme not in a module. Sadly the module contains nearly zero documentation :(

@defcon0 the theme hook is a relatively new addition specifically for themes, since they can't register a subscriber for the long-available Policy Alter event for modules.

I've done documentation updates alongside the 2.x releases to enumerate the options for dynamically altering the policy: https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... →
I personally learn best from functional examples, and the CSP module provides multiple examples by using the alter event itself.

Automatically closed - issue fixed for 2 weeks with no activity.

Hi @gapple, I'm running into an issue using the documentation provided or the initial comment from @spfaffly.

I am successful in adding the nonce to the header with the hook_policy_alter in my theme.

/**
 * Implements hook_csp_policy_alter().
 */
function themename_csp_policy_alter(Csp $policy, Response $response) {
  // Add nonce to CSP header.
  /** @var \Drupal\csp\PolicyHelper $policy_helper */
  $policy_helper = \Drupal::service('csp.policy_helper');
  $policy_helper->appendNonce($policy, 'script', [Csp::POLICY_UNSAFE_INLINE]);
  $policy_helper->appendNonce($policy, 'style', [Csp::POLICY_UNSAFE_INLINE]);
}

However, once I add the placeholder nonce to the script element, it is always stripped no matter what. I testing with a typo in the nonce attribute key, and then the nonce value is added and replaced accordingly.

    /** @var \Drupal\csp\NonceBuilder $nonce_builder */
    $nonce_builder = \Drupal::service('csp.nonce_builder');
    $nonce_placeholder = $nonce_builder->getPlaceholderKey();

    $nonce_script = [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#value' => 'alert("Example nonce script");',
      '#attributes' => [
        'id' => 'nonce-test',
        'type' => 'text/javascript',
        'nonce' => $nonce_placeholder,
      ],
      '#attached' => [
        'csp_nonce' => [
          'script' => [Csp::POLICY_UNSAFE_INLINE],
        ],
        'placeholders' => [
          $nonce_placeholder => [
            '#lazy_builder' => ['csp.nonce_builder:renderNonce', []],
          ],
        ],
      ],
    ];

I've attached some screenshots of my browser debugging. The site is running Core 10.4.2, CSP 2.2.2. Any guidance would be appreciated!

https://www.drupal.org/files/issues/2025-05-28/Screenshot%202025-05-28%2... →
https://www.drupal.org/files/issues/2025-05-28/Screenshot%202025-05-28%2... →
https://www.drupal.org/files/issues/2025-05-28/Screenshot%202025-05-28%2... →

Following along here since I'm working closely with Tommaso on this. Thank you all for your contributions and collaboration!

1. It's not necessary to use both hook_csp_policy_alter and #attached['csp_none']. The attached property bubbles up the render tree so that the CSP module itself knows to generate the nonce value and add it to the header. (Though from your example, it looks like you would need to add #attached['csp_nonce']['style'] to match your hook implementation).
   The hook is only necessary if your theme requires policy changes that aren't attached to a render element.
2. The browser tools follow the restriction of CSS not being able to access the value of nonce attributes when showing elements in the inspector or pretty-printing them in the console.
   If you look at the page's text source, you should be able to find the nonce attribute with its value.
   JavaScript can access the nonce attribute's value if you access directly querySelector('#nonce-test').getAttribute('nonce')
3. If you're not getting a violation report in the browser console for the element, and your alert is being executed, then the nonce value is present and working as expected 😃

----

New comments on closed issues are easy to miss, so worth opening a new support request and link to older issues next time 🙂

Thank you so much @gapple, it was working the whole time! I appreciate your guidance here. I'll be sure to open a new support request support next time.

Cheers!

Thank you both! This is fantastic and we appreciate your speedy response on a closed issue =)