diff --git a/deform/field.py b/deform/field.py
index 3758bd8d..c3882b91 100644
--- a/deform/field.py
+++ b/deform/field.py
@@ -2,6 +2,7 @@
 # Standard Library
 import itertools
 import re
+from typing import Optional
 import unicodedata
 import weakref
 
@@ -126,6 +127,29 @@ class Field(object):
             ``autofocus`` set to a true-ish value (``on``, ``True``, or
             ``autofocus``) will receive focus on page load. Default: ``None``.
 
+        script_nonce
+            Nonce (number-used-once) for use with ``<script>`` tags via the
+            HTTP Content-Security-Policy (CSP) header system. If the CSP header
+            requires that inline Javascript is tagged with a relevant nonce,
+            pass it here to apply this nonce to ``<script>`` tags only, or
+            via the ``nonce`` argument (if it should be applied to all tags
+            supporting nonces).
+
+        style_nonce
+            Nonce (number-used-once) for use with ``<style>`` tags via the
+            HTTP Content-Security-Policy (CSP) header system. If the CSP header
+            requires that inline Javascript is tagged with a relevant nonce,
+            pass it here to apply this nonce to ``<style>`` tags only, or
+            via the ``nonce`` argument (if it should be applied to all tags
+            supporting nonces).
+
+        nonce
+            Content-Security-Policy (CSP) nonce to be applied to all tags
+            supporting a ``nonce`` attribute, currently supported for
+            ``<script>`` and ``<style>``. See also ``script_nonce``,
+            ``style_nonce``. Specifying ``nonce`` overrides the more specific
+            options.
+
     *Constructor Arguments*
 
       ``renderer``, ``counter``, ``resource_registry`` and ``appstruct`` are
@@ -183,6 +207,9 @@ def __init__(
         appstruct=colander.null,
         parent=None,
         autofocus=None,
+        script_nonce: str = None,
+        style_nonce: str = None,
+        nonce: str = None,
         **kw
     ):
         self.counter = counter or itertools.count()
@@ -199,6 +226,12 @@ def __init__(
         if resource_registry is None:
             resource_registry = self.default_resource_registry
         self.renderer = renderer
+        if nonce:
+            self.script_nonce = nonce
+            self.style_nonce = nonce
+        else:
+            self.script_nonce = script_nonce
+            self.style_nonce = style_nonce
 
         # Parameters passed from parent field to child
         if "focus" in kw:
@@ -269,19 +302,19 @@ def __init__(
         self.set_appstruct(appstruct)
 
     def found_first(self):
-        """ Set have_first_input of ancestors """
+        """Set have_first_input of ancestors"""
         self.have_first_input = True
         if self.parent is not None:
             self.parent.found_first()
 
     @property
-    def parent(self):
+    def parent(self) -> Optional["Field"]:
         if self._parent is None:
             return None
         return self._parent()
 
     def get_root(self):
-        """ Return the root field in the field hierarchy (the form field) """
+        """Return the root field in the field hierarchy (the form field)"""
         node = self
         while True:
             parent = node.parent
@@ -353,7 +386,7 @@ def translate(self, msgid):
         return msgid
 
     def __iter__(self):
-        """ Iterate over the children fields of this field. """
+        """Iterate over the children fields of this field."""
         return iter(self.children)
 
     def __getitem__(self, name):
@@ -381,6 +414,8 @@ def clone(self):
         cloned.__dict__.update(self.__dict__)
         cloned.order = next(cloned.counter)
         cloned.oid = "deformField%s" % cloned.order
+        cloned.script_nonce = self.script_nonce_recursive
+        cloned.style_nonce = self.style_nonce_recursive
         cloned._parent = None
         children = []
         for field in self.children:
@@ -626,7 +661,7 @@ def serialize(self, cstruct=_marker, **kw):
         return self.widget.serialize(**values)
 
     def deserialize(self, pstruct):
-        """ Deserialize the pstruct into a cstruct and return the cstruct."""
+        """Deserialize the pstruct into a cstruct and return the cstruct."""
         return self.widget.deserialize(self, pstruct)
 
     def render(self, appstruct=_marker, **kw):
@@ -924,3 +959,29 @@ def end_rename(self, name=None):
             name = self.name
         tag = '<input type="hidden" name="__end__" value="%s:rename"/>'
         return Markup(tag % (name,))
+
+    @property
+    def script_nonce_recursive(self) -> Optional[str]:
+        """
+        Returns the CSP nonce for ``<script>`` tags or, if ``self`` doesn't
+        have one, its parent (until we find one or reach the topmost
+        parent).
+        """
+        if self.script_nonce:
+            return self.script_nonce
+        if self.parent:
+            return self.parent.script_nonce_recursive
+        return None
+
+    @property
+    def style_nonce_recursive(self) -> Optional[str]:
+        """
+        Returns the CSP nonce for ``<style>`` tags or, if ``self`` doesn't
+        have one, its parent (until we find one or reach the topmost
+        parent).
+        """
+        if self.style_nonce:
+            return self.style_nonce
+        if self.parent:
+            return self.parent.style_nonce_recursive
+        return None
diff --git a/deform/static/scripts/deform.js b/deform/static/scripts/deform.js
index 17ba4a20..eef18a65 100644
--- a/deform/static/scripts/deform.js
+++ b/deform/static/scripts/deform.js
@@ -23,11 +23,12 @@ var deform  = {
     },
 
     load: function() {
-      $(function() {
-        if (!deform_loaded) {
-            deform.processCallbacks();
-            deform_loaded = true;
-      }});
+        $(function() {
+            if (!deform_loaded) {
+                deform.processCallbacks();
+                deform_loaded = true;
+            }
+        });
     },
 
     processCallbacks: function () {
@@ -35,8 +36,7 @@ var deform  = {
             var oid = item[0];
             var callback = item[1];
             callback(oid);
-            }
-            );
+        });
         deform.clearCallbacks();
     },
 
@@ -73,7 +73,7 @@ var deform  = {
             var labelselector = 'label[for=' + oldid + ']';
             var $fornodes = $htmlnode.find(labelselector);
             $fornodes.attr('for', newid);
-            });
+        });
 
         // replace names a containing ```deformField`` like we do for ids
 
@@ -82,7 +82,7 @@ var deform  = {
             var oldname = $node.attr('name');
             var newname = oldname.replace(fieldmatch, "deformField$1-" + genid);
             $node.attr('name', newname);
-            });
+        });
 
         $htmlnode.insertBefore(before);
 
@@ -92,8 +92,8 @@ var deform  = {
             var newid = idmap[oid];
             if (newid) {
                 callback(newid);
-                }
-            });
+            }
+        });
 
         deform.clearCallbacks();
         var old_len = parseInt(before.attr('now_len')||'0', 10);
@@ -112,7 +112,7 @@ var deform  = {
         var orderable = parseInt($before_node.attr('orderable')||'0', 10);
 
         if (now_len < max_len) {
-          deform.addSequenceItem($proto_node, $before_node);
+            deform.addSequenceItem($proto_node, $before_node);
             deform.processSequenceButtons($oid_node, min_len, max_len,
                                           now_len + 1, orderable);
         }
@@ -149,10 +149,21 @@ var deform  = {
         $lis.find('.deform-close-button').not($lis.find('.deform-seq-container .deform-close-button')).toggle(show_closebutton);
         oid_node.find('.deform-seq-add').not(oid_node.find('.deform-seq-container .deform-seq-add')).toggle(show_addbutton);
         $lis.find('.deform-order-button').not($lis.find('.deform-seq-container .deform-order-button')).toggle(orderable && has_multiple);
+        // Since "onclick" isn't OK with restricted content security policy,
+        // we add the click handler here, removing the need for evaluation of
+        // item prototype code that containts Javascript.
+        // - for pre-existing items, the click handler is added at page
+        //   creation via processSequenceButtons(), thanks to a
+        //   deform.addCallback call in sequence.pt;
+        // - for newly created items (added by the user), we get here via
+        //   appendSequenceItem().
+        $lis.find('.deform-close-button').click(function () {
+            deform.removeSequenceItem(this);
+        });
      },
 
     randomString: function (length) {
-        var chr='0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
+        var chr = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
         chr = chr.split('');
 
         if (! length) {
diff --git a/deform/templates/autocomplete_input.pt b/deform/templates/autocomplete_input.pt
index fd2cbc8d..16801c9b 100644
--- a/deform/templates/autocomplete_input.pt
+++ b/deform/templates/autocomplete_input.pt
@@ -13,7 +13,7 @@
                            autofocus autofocus;
                            attributes|field.widget.attributes|{};"
            id="${oid}"/>
-    <script tal:condition="field.widget.values" type="text/javascript">
+    <script tal:condition="field.widget.values" type="text/javascript" nonce="${field.script_nonce_recursive}">
         deform.addCallback(
           '${field.oid}',
           function (oid) {
diff --git a/deform/templates/checked_input.pt b/deform/templates/checked_input.pt
index ed7cbf6f..671c67e5 100644
--- a/deform/templates/checked_input.pt
+++ b/deform/templates/checked_input.pt
@@ -25,7 +25,7 @@
                            confirm_attributes|field.widget.confirm_attributes|{};"
            id="${oid}-confirm"/>
   </div>
-  <script tal:condition="field.widget.mask" type="text/javascript">
+  <script tal:condition="field.widget.mask" type="text/javascript" nonce="${field.script_nonce_recursive}">
    deform.addCallback(
      '${oid}',
      function (oid) {
diff --git a/deform/templates/dateinput.pt b/deform/templates/dateinput.pt
index 5b8d1fbb..7db8f77f 100644
--- a/deform/templates/dateinput.pt
+++ b/deform/templates/dateinput.pt
@@ -15,7 +15,7 @@
                          attributes|field.widget.attributes|{};"
          id="${oid}"/>
   ${field.end_mapping()}
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
    deform.addCallback(
     '${oid}',
      function deform_cb(oid) {
diff --git a/deform/templates/datetimeinput.pt b/deform/templates/datetimeinput.pt
index 16605ba1..fad36850 100644
--- a/deform/templates/datetimeinput.pt
+++ b/deform/templates/datetimeinput.pt
@@ -26,7 +26,7 @@
     </div></div>
   </div>
   ${field.end_mapping()}
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
    deform.addCallback(
      '${oid}',
      function(oid) {
diff --git a/deform/templates/file_upload.pt b/deform/templates/file_upload.pt
index c355ed2b..05faa29a 100644
--- a/deform/templates/file_upload.pt
+++ b/deform/templates/file_upload.pt
@@ -11,7 +11,7 @@
          tal:condition="uid"
          type="hidden" name="uid" value="${uid}"/>
   ${field.end_mapping()}
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
     deform.addCallback('${oid}', function (oid) {
       $('#' + oid).upload();
     });
diff --git a/deform/templates/form.pt b/deform/templates/form.pt
index a49b1cf0..b3574f44 100644
--- a/deform/templates/form.pt
+++ b/deform/templates/form.pt
@@ -76,7 +76,7 @@
 
   </fieldset>
 
-  <script type="text/javascript" tal:condition="use_ajax">
+  <script type="text/javascript" tal:condition="use_ajax" nonce="${field.script_nonce_recursive}">
    deform.addCallback(
      '${formid}',
      function(oid) {
diff --git a/deform/templates/moneyinput.pt b/deform/templates/moneyinput.pt
index f6c2f752..5c2e1e47 100644
--- a/deform/templates/moneyinput.pt
+++ b/deform/templates/moneyinput.pt
@@ -12,7 +12,7 @@
                            autofocus autofocus;
                            attributes|field.widget.attributes|{};"
            id="${oid}"/>
-    <script type="text/javascript">
+    <script type="text/javascript" nonce="${field.script_nonce_recursive}">
       deform.addCallback(
          '${oid}',
          function (oid) {
diff --git a/deform/templates/richtext.pt b/deform/templates/richtext.pt
index a88cd505..a623664a 100644
--- a/deform/templates/richtext.pt
+++ b/deform/templates/richtext.pt
@@ -6,7 +6,7 @@
     i18n:domain="deform"
     tal:omit-tag="">
 
-    <style type="text/css">
+    <style type="text/css" nonce="${field.style_nonce_recursive}">
       .deform .tinymce-preload{
           border: 1px solid #CCC;
           height: 240px;
@@ -23,7 +23,7 @@
   <span id="${oid}-preload" class="tinymce-preload" 
         tal:condition="delayed_load and not field.error"
         tal:content="structure cstruct" />
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
     (function($){
       deform.addCallback('${oid}', function(oid) {
         var options = {
diff --git a/deform/templates/select2.pt b/deform/templates/select2.pt
index 9e509495..d53e49a5 100644
--- a/deform/templates/select2.pt
+++ b/deform/templates/select2.pt
@@ -9,7 +9,7 @@
      autofocus autofocus|field.autofocus"
      tal:omit-tag="">
 
-   <style>
+   <style nonce="${field.style_nonce_recursive}">
 
      .select2-selection.form-control {
        padding: 0px 0px;
@@ -52,7 +52,7 @@
     </tal:loop>
   </select>
 
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
    deform.addCallback(
      '${field.oid}',
      function(oid) {
diff --git a/deform/templates/selectize.pt b/deform/templates/selectize.pt
index 43ffcb36..2287c482 100644
--- a/deform/templates/selectize.pt
+++ b/deform/templates/selectize.pt
@@ -44,7 +44,7 @@
     </tal:loop>
   </select>
 
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
     deform.addCallback(
       "${field.oid}",
       function(oid) {
diff --git a/deform/templates/sequence.pt b/deform/templates/sequence.pt
index 3aea7720..b83c6ab0 100644
--- a/deform/templates/sequence.pt
+++ b/deform/templates/sequence.pt
@@ -13,7 +13,7 @@
      class="deform-seq"
      id="${oid}">
 
-  <style>
+  <style nonce="${field.style_nonce_recursive}">
     body.dragging, body.dragging * {
       cursor: move !important;
     }
@@ -55,12 +55,18 @@
     <div class="panel-footer">
       <a href="#"
          class="btn deform-seq-add"
-         id="${field.oid}-seqAdd"
-         onclick="javascript: return deform.appendSequenceItem(this);">
+         id="${field.oid}-seqAdd">
         <small id="${field.oid}-addtext">${add_subitem_text}</small>
       </a>
 
-      <script type="text/javascript">
+      <script type="text/javascript" nonce="${field.script_nonce_recursive}">
+        document.addEventListener('DOMContentLoaded', function () {
+          document.getElementById("${field.oid}-seqAdd")
+                  .addEventListener('click', function () {
+            return deform.appendSequenceItem(this);
+          });
+        });
+
        deform.addCallback(
          '${field.oid}',
          function(oid) {
@@ -69,7 +75,7 @@
                                          ${max_len}, ${now_len},
                                          ${orderable});
            }
-         )
+         );
          <tal:block condition="orderable">
              $( "#${oid}-orderable" ).sortable({
                handle: ".deform-order-button, .panel-heading",
@@ -78,22 +84,22 @@
                placeholder: '<span class="glyphicon glyphicon-arrow-right placeholder"></span>',
                onDragStart: function ($item, container, _super) {
                  var offset = $item.offset(),
-                 pointer = container.rootGroup.pointer
+                 pointer = container.rootGroup.pointer;
 
                  adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
-                 }
+                 };
 
-                 _super($item, container)
+                 _super($item, container);
                },
                onDrag: function ($item, position) {
-                   $item.css({
-                     left: position.left - adjustment.left,
-                     top: position.top - adjustment.top
-                   })
-                 }
-               });
+                 $item.css({
+                   left: position.left - adjustment.left,
+                   top: position.top - adjustment.top
+                 });
+               }
+             });
          </tal:block>
       </script>
 
diff --git a/deform/templates/sequence_item.pt b/deform/templates/sequence_item.pt
index cb5bab61..c98ee4a1 100644
--- a/deform/templates/sequence_item.pt
+++ b/deform/templates/sequence_item.pt
@@ -29,8 +29,7 @@
        id="${oid}-close"
        tal:condition="not field.widget.hidden"
        title="Remove"
-       i18n:attributes="title"
-       onclick="javascript:deform.removeSequenceItem(this);">&times;</a>
+       i18n:attributes="title">&times;</a>
   </div>
   <!-- /sequence_item -->
 </div>
diff --git a/deform/templates/textinput.pt b/deform/templates/textinput.pt
index 92f6a1be..74be3974 100644
--- a/deform/templates/textinput.pt
+++ b/deform/templates/textinput.pt
@@ -13,7 +13,7 @@
                            autofocus autofocus;
                            attributes|field.widget.attributes|{};"
            id="${oid}"/>
-    <script tal:condition="mask" type="text/javascript">
+    <script tal:condition="mask" type="text/javascript" nonce="${field.script_nonce_recursive}">
       deform.addCallback(
          '${oid}',
          function (oid) {
diff --git a/deform/templates/timeinput.pt b/deform/templates/timeinput.pt
index 7c90bd53..0b75348d 100644
--- a/deform/templates/timeinput.pt
+++ b/deform/templates/timeinput.pt
@@ -16,7 +16,7 @@
                          attributes|field.widget.attributes|{};"
          id="${oid}"/>
   ${field.end_mapping()}
-  <script type="text/javascript">
+  <script type="text/javascript" nonce="${field.script_nonce_recursive}">
     deform.addCallback(
       '${oid}',
       function(oid) {
diff --git a/deform/tests/test_field.py b/deform/tests/test_field.py
index 1bcc93c6..17d584a0 100644
--- a/deform/tests/test_field.py
+++ b/deform/tests/test_field.py
@@ -766,6 +766,33 @@ def test_found_first(self):
         self.assertEqual(root.children[0].have_first_input, True)
         self.assertEqual(root.have_first_input, True)
 
+    def test_nonces(self) -> None:
+        # Deform
+        from deform.field import Field
+
+        nonce1 = "dummy_nonce_1"
+        nonce2 = "dummy_nonce_2"
+        nonce3 = "dummy_nonce_3"
+        schema = DummySchema()
+
+        root1 = self._makeOne(
+            schema, renderer="abc", script_nonce=nonce1, style_nonce=nonce2
+        )
+        child1 = Field(schema, name="child1", parent=root1)
+        root1.children = [child1]
+        self.assertEqual(root1.script_nonce_recursive, nonce1)
+        self.assertEqual(root1.style_nonce_recursive, nonce2)
+        self.assertEqual(child1.script_nonce_recursive, nonce1)
+        self.assertEqual(child1.style_nonce_recursive, nonce2)
+
+        root2 = self._makeOne(schema, renderer="abc", nonce=nonce3)
+        child2 = Field(schema, name="child2", parent=root2)
+        root2.children = [child2]
+        self.assertEqual(root2.script_nonce_recursive, nonce3)
+        self.assertEqual(root2.style_nonce_recursive, nonce3)
+        self.assertEqual(child2.script_nonce_recursive, nonce3)
+        self.assertEqual(child2.style_nonce_recursive, nonce3)
+
 
 class DummyField(object):
     oid = "oid"
diff --git a/deform/tests/test_widget.py b/deform/tests/test_widget.py
index 69c8ae4b..173b2fbe 100644
--- a/deform/tests/test_widget.py
+++ b/deform/tests/test_widget.py
@@ -2056,6 +2056,97 @@ def test_deserialize_bad_type(self):
             colander.Invalid, widget.deserialize, field, {"x": "123"}
         )
 
+    def test_nonce_present_render(self):
+        """
+        ``SequenceWidget`` uses both ``<script>`` and ``<style>`` so can be
+        used to test HTTP Content-Security-Policy nonces.
+        """
+        # BeautifulSoup
+        # Pyramid
+        # colander
+        from colander import MappingSchema
+        from colander import SchemaNode
+        from colander import SequenceSchema
+        from colander import String
+        from bs4 import BeautifulSoup
+
+        # Deform
+        from deform.form import Form
+        from deform.template import default_renderer
+        from deform.widget import SequenceWidget
+        from deform.widget import TextInputWidget
+
+        class TestTextSchema(MappingSchema):
+            text_value = SchemaNode(
+                String(), widget=TextInputWidget(), translate=None
+            )
+
+        class TestSequenceSchema(SequenceSchema):
+            text_sequence = TestTextSchema(
+                widget=SequenceWidget(), translate=None
+            )
+
+        test_nonce_script = "dummy_script_nonce_value"
+        test_nonce_script_tag = f'nonce="{test_nonce_script}"'
+        test_nonce_style = "dummy_style_nonce_value"
+        test_nonce_style_tag = f'nonce="{test_nonce_style}"'
+        schema = TestSequenceSchema()
+        form = Form(
+            schema,
+            script_nonce=test_nonce_script,
+            style_nonce=test_nonce_style,
+            renderer=default_renderer,
+        )
+        content = form.render()
+        html = f"<html><body>{content}</body></html>"
+        parsed_html = BeautifulSoup(html, features="html.parser")
+        script_tags = parsed_html.body.find('script')
+        style_tags = parsed_html.body.find('style')
+        # import pdb; pdb.set_trace()
+        self.assertTrue(test_nonce_script_tag in str(script_tags))
+        self.assertTrue(test_nonce_style_tag in str(style_tags))
+
+    def test_nonce_absent_render(self):
+        """
+        No CSP nonce used. Nonce attributes should not be emitted.
+        """
+        # Pyramid
+        from colander import MappingSchema
+        from colander import SchemaNode
+        from colander import SequenceSchema
+        from colander import String
+        from bs4 import BeautifulSoup
+
+        # Deform
+        from deform.form import Form
+        from deform.template import default_renderer
+        from deform.widget import SequenceWidget
+        from deform.widget import TextInputWidget
+
+        class TestTextSchema(MappingSchema):
+            text_value = SchemaNode(
+                String(), widget=TextInputWidget(), translate=None
+            )
+
+        class TestSequenceSchema(SequenceSchema):
+            text_sequence = TestTextSchema(
+                widget=SequenceWidget(), translate=None
+            )
+
+        nonce_attr = 'nonce='
+        schema = TestSequenceSchema()
+        form = Form(schema, renderer=default_renderer)
+        content = form.render()
+        html = f"<html><body>{content}</body></html>"
+        parsed_html = BeautifulSoup(html, features="html.parser")
+        script_tags = parsed_html.body.find('script')
+        style_tags = parsed_html.body.find('style')
+        # BeautifulSoup strips out the tags if the content is blank.
+        # So there will be no "nonce" attr at all.
+        # import pdb; pdb.set_trace()
+        self.assertFalse(nonce_attr in str(script_tags))
+        self.assertFalse(nonce_attr in str(style_tags))
+
 
 class TestFormWidget(unittest.TestCase):
     def _makeOne(self, **kw):