Form Sanitize Config
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?