Security nonce: <link rel="stylesheet"> and webpack nonce

[auloin]

Hey Rsbuild team,

First, thanks for the excellent work on Rsbuild. It's a really pleasant tool to work with (plus it's super fast 🚀).

I have a couple of questions about CSP nonce implementation that I'm hoping you can help with:

1. I've noticed that the security nonce isn't being set on <link rel="stylesheet"> tags generated by Rsbuild. I did a small test and setting style-src 'none-CSP_NONCE_PLACEHOLDER' prevents loading the generated <link rel="stylesheet">. Is this by design? Per the documentation the nonce placeholder is set on generated <style>, no mention of generated <link rel="stylesheet">.
2. Is there a way to set webpack_nonce in the preEntry configuration? This is possible with __webpack_public_path__ but it seems the placeholder, e.g., CSP_NONCE_PLACEHOLDER is set in the compiled code. I'd like to do something like the following:

index.html

<script type="text/javascript" nonce="CSP_NONCE_PLACEHOLDER">
    window.webpackNonce = "CSP_NONCE_PLACEHOLDER";
</script>

entry.js

if (window.webpackNonce) {
    __webpack_nonce__ = window.webpackNonce;
}

This would allow me to only replace the placeholder in the html file, server-side.

Would appreciate any insights on how to handle this, or if there are plans to address nonce support in future releases.

[chenjiahan]

Thanks for the detailed explanation and raise, a few thoughts:

1. It's by design: Rsbuild currently does not inject a nonce into <link rel="stylesheet">. From what I understand, nonce is used for inline scripts and styles, see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce#description
   2 For webpack_nonce , your approach is valid — setting window.webpackNonce in the HTML and then assigning __webpack_nonce__ in entry is a good workaround.

[auloin]

Thanks @chenjiahan. I got the <link rel="stylesheet"> working by adding 'self' to the rule. Indeed setting __webpack_nonce__ in entry works out of the box.