Skip to content

Form Sanitize Config

Jump to bottom
Edwin Anciani edited this page Feb 2, 2022 · 5 revisions

In order to configure the render to modify sanitize configuration, you can use sanitizeConfig in the form settings.

Properties, see Dompurify Doc:

Option Description Default Dompurify Property
addTag (Array). If you wish to add new tags to the form renderer default ADD_TAGS
addAttr (Array). If you wish to add new attributes to the form renderer. ['ref', 'target'] ADD_ATTR
allowedTags (Array). Allow the tag created renders in the form. default ALLOWED_TAGS
allowedAttrs (Array). Allow the attrs created renders in the form. default ALLOWED_ATTR
allowedUriRegex (RegExp). Allow the URI RegExp in form renderer. default ALLOWED_URI_REGEXP

Default Sanitize Config, Default TAGs ATTRIBUTEs whitelist & blacklist:

// Dompurify configuration
  const sanitizeOptions = {
    ADD_ATTR: ['ref', 'target'],
    USE_PROFILES: { html: true }
  };

<html>
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
    <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        Formio.createForm(document.getElementById('formio'), {
          components: [
            {
              type: 'textfield',
              key: 'firstName',
              label: 'First Name',
              placeholder: 'Enter your first name.',
              input: true
            },
            {
              type: 'textfield',
              key: 'lastName',
              label: 'Last Name',
              placeholder: 'Enter your last name',
              input: true
            },
            {
              "html": "<figure class=\"media\"><div data-oembed-url=\"https://www.youtube.com/watch?v=GORDdHGlb-M\"><div style=\"position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;\"><iframe src=\"https://www.youtube.com/embed/GORDdHGlb-M\" style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"\"></iframe></div></div></figure>",
              "label": "Content",
              "refreshOnChange": false,
              "key": "content",
              "type": "content",
              "dataGridLabel": false,
              "input": false
          },
            {
              type: 'button',
              action: 'submit',
              label: 'Submit',
              theme: 'primary'
            }
          ]
        }, {
          sanitizeConfig: {
          allowedAttrs: ['ref', 'src', 'url', 'data-oembed-url'],
          allowedTags: ['iframe', 'oembed'],
          addTags: ['iframe', 'oembed'],
          addAttr: ['url', 'data-oembed-url']
        }
       });
      };
    </script>
  </head>
  <body>
    <div id='formio'></div>
  </body>
</html>

Display Users submitted data into a table inside the admin dashboard?

Home

JavaScript API

Form Renderer

Form Utilities

Modules

Form JSON Specification

Clone this wiki locally