Allow html tags for survey solutions, add sanitizer

Resolves MS-500
This commit is contained in:
Ramon Wenger 2022-05-19 12:41:45 +02:00
parent 3278774876
commit 5af06069e8
2 changed files with 49 additions and 4 deletions

View File

@ -25,7 +25,7 @@
</template>
<script>
import {sanitize} from '@/helpers/text';
import {sanitizeAsHtml} from '@/helpers/text';
export default {
props: ['value'],
@ -38,8 +38,8 @@
computed: {
sanitizedText() {
return sanitize(this.value.text);
}
return sanitizeAsHtml(this.value.text);
},
},
methods: {
@ -81,6 +81,7 @@
/deep/ ul {
padding-left: $medium-spacing;
> li {
list-style: disc outside none;
color: $color-silver-dark;

View File

@ -1,8 +1,52 @@
// taken from https://gomakethings.com/how-to-sanitize-html-strings-with-vanilla-js-to-reduce-your-risk-of-xss-attacks/
const getDocument = html => new DOMParser().parseFromString(html, 'text/html');
const removeScripts = html => {
let scripts = html.querySelectorAll('script');
for (let script of scripts) {
script.remove();
}
};
// explicitly whitelist
// todo: do we need more attributes whitelisted
const isSafe = attr => {
return ['class'].includes(attr.name);
};
const removeAttributes = node => {
let attributes = [...node.attributes];
console.log(attributes);
for (const attr of attributes) {
if (isSafe(attr)) {
continue;
}
node.removeAttribute(attr.name);
}
};
const clean = node => {
let nodes = node.children;
for (let node of nodes) {
removeAttributes(node);
clean(node);
}
};
export const sanitize = html => {
let doc = new DOMParser().parseFromString(html, 'text/html');
let doc = getDocument(html);
return doc.body.textContent || '';
};
export const sanitizeAsHtml = html => {
let doc = getDocument(html);
const body = doc.body || document.createElement('body');
removeScripts(body);
clean(body);
return body.innerHTML;
};
export const newLineToParagraph = (text) => {
return text
.split(/\n+/)