Add a nonce to the script elements. This allows CSP to pick

 up the nonce value and include it into the header.

Author: johan-smits

Cargo.lock

@@ -50,6 +50,7 @@ once_cell = "1"
 open = "5"
 oxipng = "9"
 parking_lot = "0.12"
+rand = "0.8.5"
 remove_dir_all = "0.8"
 reqwest = { version = "0.12", default-features = false, features = ["stream", "trust-dns"] }
 sha2 = "0.10"

Cargo.toml

@@ -3,8 +3,10 @@ pub mod html_rewrite;
 
 use anyhow::{anyhow, bail, Context, Result};
 use async_recursion::async_recursion;
+use base64::{engine::general_purpose, Engine};
 use console::Emoji;
 use once_cell::sync::Lazy;
+use rand::RngCore;
 use std::collections::HashSet;
 use std::ffi::OsStr;
 use std::fmt::Debug;
@@ -262,3 +264,12 @@ pub fn path_to_href(path: impl AsRef<Path>) -> String {
         .collect::<Vec<_>>();
     path.join("/")
 }
+
+/// A nonce random generator for script and style
+///
+/// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+pub fn nonce() -> String {
+    let mut buffer = [0u8; 16];
+    rand::rngs::OsRng.fill_bytes(&mut buffer);
+    general_purpose::STANDARD.encode(buffer)
+}

src/common/mod.rs

@@ -2,6 +2,7 @@
 
 use super::{trunk_id_selector, AssetFile, Attrs, TrunkAssetPipelineOutput, ATTR_HREF, ATTR_TYPE};
 use crate::common::html_rewrite::Document;
+use crate::common::nonce;
 use anyhow::{bail, Context, Result};
 use std::path::PathBuf;
 use std::str::FromStr;
@@ -125,9 +126,13 @@ impl InlineOutput {
     pub async fn finalize(self, dom: &mut Document) -> Result<()> {
         let html = match self.content_type {
             ContentType::Html | ContentType::Svg => self.content,
-            ContentType::Css => format!(r#"<style>{}</style>"#, self.content),
-            ContentType::Js => format!(r#"<script>{}</script>"#, self.content),
-            ContentType::Module => format!(r#"<script type="module">{}</script>"#, self.content),
+            ContentType::Css => format!(r#"<style nonce="{}">{}</style>"#, nonce(), self.content),
+            ContentType::Js => format!(r#"<script nonce="{}">{}</script>"#, nonce(), self.content),
+            ContentType::Module => format!(
+                r#"<script type="module" nonce="{}">{}</script>"#,
+                nonce(),
+                self.content
+            ),
         };
 
         dom.replace_with_html(&trunk_id_selector(self.id), &html)

src/pipelines/inline.rs

@@ -1,6 +1,6 @@
 use super::super::trunk_id_selector;
 use crate::{
-    common::html_rewrite::Document,
+    common::{html_rewrite::Document, nonce},
     config::{rt::RtcBuild, types::CrossOrigin},
     pipelines::rust::{sri::SriBuilder, RustAppType},
 };
@@ -130,6 +130,8 @@ window.{bindings} = bindings;
             false => ("", String::new()),
         };
 
+        let nonce = nonce();
+
         // the code to fire the `TrunkApplicationStarted` event
         let fire = r#"
 dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
@@ -138,7 +140,7 @@ dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
         match &self.initializer {
             None => format!(
                 r#"
-<script type="module">
+<script type="module" nonce="{nonce}">
 import init{import} from '{base}{js}';
 const wasm = await init('{base}{wasm}');
 
@@ -148,7 +150,7 @@ const wasm = await init('{base}{wasm}');
             ),
             Some(initializer) => format!(
                 r#"
-<script type="module">
+<script type="module" nonce="{nonce}">
 {init}
 
 import init{import} from '{base}{js}';

src/pipelines/rust/output.rs

@@ -5,7 +5,7 @@ use super::{
     ATTR_INLINE, ATTR_NO_MINIFY,
 };
 use crate::{
-    common::{self, dist_relative, html_rewrite::Document, target_path},
+    common::{self, dist_relative, html_rewrite::Document, nonce, target_path},
     config::rt::RtcBuild,
     processing::integrity::{IntegrityType, OutputDigest},
     tools::{self, Application},
@@ -206,7 +206,8 @@ impl SassOutput {
         let html = match self.css_ref {
             // Insert the inlined CSS into a `<style>` tag.
             CssRef::Inline(css) => format!(
-                r#"<style {attrs}>{css}</style>"#,
+                r#"<style {attrs} nonce="{}">{css}</style>"#,
+                nonce(),
                 attrs = AttrWriter::new(&self.attrs, AttrWriter::EXCLUDE_CSS_INLINE)
             ),
             // Link to the CSS file.

src/pipelines/sass.rs

@@ -5,7 +5,7 @@ use super::{
     ATTR_INLINE, ATTR_NO_MINIFY,
 };
 use crate::{
-    common::{self, dist_relative, html_rewrite::Document, target_path},
+    common::{self, dist_relative, html_rewrite::Document, nonce, target_path},
     config::rt::RtcBuild,
     processing::integrity::{IntegrityType, OutputDigest},
     tools::{self, Application},
@@ -174,7 +174,8 @@ impl TailwindCssOutput {
         let html = match self.css_ref {
             // Insert the inlined CSS into a `<style>` tag.
             CssRef::Inline(css) => format!(
-                r#"<style {attrs}>{css}</style>"#,
+                r#"<style {attrs} nonce="{}">{css}</style>"#,
+                nonce(),
                 attrs = AttrWriter::new(&self.attrs, AttrWriter::EXCLUDE_CSS_INLINE)
             ),
             // Link to the CSS file.