mdgriffith · jfmengels · Mar 20, 2022 · Mar 20, 2022 · Mar 20, 2022
diff --git a/examples/BasicWithNonce.elm b/examples/BasicWithNonce.elm
@@ -0,0 +1,41 @@
+module BasicWithNonce exposing (..)
+
+{-| -}
+
+import Element exposing (..)
+import Element.Background as Background
+import Element.Font as Font
+import Element.Input
+import Element.Lazy
+
+
+main =
+    Element.layoutWith
+        { options = [ Element.nonce "12345" ]
+        }
+        [ Background.color (rgba 0 0 0 1)
+        , Font.color (rgba 1 1 1 1)
+        , Font.italic
+        , Font.size 32
+        , Font.family
+            [ Font.external
+                { url = "https://fonts.googleapis.com/css?family=EB+Garamond"
+                , name = "EB Garamond"
+                }
+            , Font.sansSerif
+            ]
+        ]
+    <|
+        Element.column [ centerX, centerY ]
+            [ el
+                []
+                (text "Hello stylish friend!")
+            , Element.Lazy.lazy viewSignature "Matt"
+            ]
+
+
+viewSignature : String -> Element msg
+viewSignature name =
+    el
+        []
+        (text ("— " ++ name))
diff --git a/src/Element.elm b/src/Element.elm
@@ -12,7 +12,7 @@ module Element exposing
     , moveUp, moveDown, moveRight, moveLeft, rotate, scale
     , clip, clipX, clipY
     , scrollbars, scrollbarX, scrollbarY
-    , layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle
+    , layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle, nonce
     , link, newTabLink, download, downloadAs
     , image
     , Color, rgba, rgb, rgb255, rgba255, fromRgb, fromRgb255, toRgb
@@ -137,7 +137,7 @@ Add a scrollbar if the content is larger than the element.
 
 # Rendering
 
-@docs layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle
+@docs layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle, nonce
 
 
 # Links
@@ -479,6 +479,14 @@ noStaticStyleSheet =
     Internal.RenderModeOption Internal.NoStaticStyleSheet
 
 
+{-| Adds a [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
+to the style tags so that they are compliant with the Content Security Policy of your website.
+-}
+nonce : String -> Option
+nonce nonce_ =
+    Internal.NonceOption (Internal.Nonce nonce_)
+
+
 {-| -}
 defaultFocus :
     { borderColor : Maybe Color

diff --git a/src/Element/Lazy.elm b/src/Element/Lazy.elm
@@ -93,6 +93,7 @@ embed x =
                         , backgroundColor = Nothing
                         }
                     , mode = Layout
+                    , nonce = Nothing
                     }
                     styled.styles
                 )

diff --git a/src/Internal/Model.elm b/src/Internal/Model.elm
@@ -18,6 +18,7 @@ module Internal.Model exposing
     , Location(..)
     , NearbyChildren(..)
     , NodeName(..)
+    , Nonce(..)
     , Option(..)
     , OptionRecord
     , Padding(..)
@@ -534,6 +535,7 @@ finalizeNode has node attributes children embedMode parentContext =
             html
 
 
+embedWith : Bool -> OptionRecord -> List Style -> List (VirtualDom.Node msg) -> List (VirtualDom.Node msg)
 embedWith static opts styles children =
     let
         dynamicStyleSheet =
@@ -1824,7 +1826,10 @@ staticRoot opts =
             -- wrap the style node in a div to prevent `Dark Reader` from blowin up the dom.
             VirtualDom.node "div"
                 []
-                [ VirtualDom.node "style" [] [ VirtualDom.text Internal.Style.rules ] ]
+                [ VirtualDom.node "style"
+                    (nonceAttributes opts.nonce)
+                    [ VirtualDom.text Internal.Style.rules ]
+                ]
 
         NoStaticStyleSheet ->
             VirtualDom.text ""
@@ -2089,6 +2094,7 @@ type Children x
     | Keyed (List ( String, x ))
 
 
+toHtml : (List Style -> EmbedStyle) -> Element msg -> VirtualDom.Node msg
 toHtml mode el =
     case el of
         Unstyled html ->
@@ -2108,9 +2114,11 @@ toHtml mode el =
 renderRoot : List Option -> List (Attribute aligned msg) -> Element msg -> VirtualDom.Node msg
 renderRoot optionList attributes child =
     let
+        options : OptionRecord
         options =
             optionsToRecord optionList
 
+        embedStyle : List Style -> EmbedStyle
         embedStyle =
             case options.mode of
                 NoStaticStyleSheet ->
@@ -2133,9 +2141,14 @@ type alias OptionRecord =
     { hover : HoverSetting
     , focus : FocusStyle
     , mode : RenderMode
+    , nonce : Maybe Nonce
     }
 
 
+type Nonce
+    = Nonce String
+
+
 type HoverSetting
     = NoHover
     | AllowHover
@@ -2146,6 +2159,7 @@ type Option
     = HoverOption HoverSetting
     | FocusStyleOption FocusStyle
     | RenderModeOption RenderMode
+    | NonceOption Nonce
 
 
 type alias FocusStyle =
@@ -2292,6 +2306,7 @@ focusDefaultStyle =
 optionsToRecord : List Option -> OptionRecord
 optionsToRecord options =
     let
+        combine : Option -> { hover : Maybe HoverSetting, focus : Maybe FocusStyle, mode : Maybe RenderMode, nonce : Maybe Nonce } -> { hover : Maybe HoverSetting, focus : Maybe FocusStyle, mode : Maybe RenderMode, nonce : Maybe Nonce }
         combine opt record =
             case opt of
                 HoverOption hoverable ->
@@ -2318,6 +2333,15 @@ optionsToRecord options =
                         _ ->
                             record
 
+                NonceOption nonce_ ->
+                    case record.nonce of
+                        Nothing ->
+                            { record | nonce = Just nonce_ }
+
+                        _ ->
+                            record
+
+        andFinally : { hover : Maybe HoverSetting, focus : Maybe FocusStyle, mode : Maybe RenderMode, nonce : Maybe Nonce } -> OptionRecord
         andFinally record =
             { hover =
                 case record.hover of
@@ -2340,13 +2364,15 @@ optionsToRecord options =
 
                     Just actualMode ->
                         actualMode
+            , nonce = record.nonce
             }
     in
     andFinally <|
         List.foldr combine
             { hover = Nothing
             , focus = Nothing
             , mode = Nothing
+            , nonce = Nothing
             }
             options
 
@@ -2359,7 +2385,7 @@ toStyleSheet options styleSheet =
             VirtualDom.node "div"
                 []
                 [ VirtualDom.node "style"
-                    []
+                    (nonceAttributes options.nonce)
                     [ VirtualDom.text (toStyleSheetString options styleSheet) ]
                 ]
 
@@ -2368,7 +2394,7 @@ toStyleSheet options styleSheet =
             VirtualDom.node "div"
                 []
                 [ VirtualDom.node "style"
-                    []
+                    (nonceAttributes options.nonce)
                     [ VirtualDom.text (toStyleSheetString options styleSheet) ]
                 ]
 
@@ -2380,6 +2406,16 @@ toStyleSheet options styleSheet =
                 []
 
 
+nonceAttributes : Maybe Nonce -> List (VirtualDom.Attribute msg)
+nonceAttributes maybeNonce =
+    case maybeNonce of
+        Just (Nonce nonce) ->
+            [ VirtualDom.attribute "nonce" nonce ]
+
+        Nothing ->
+            []
+
+
 renderTopLevelValues rules =
     let
         withImport font =