refactor recommended-whitelist.ts

apps/app/src/services/xss/recommended-whitelist.js

@@ -1,21 +0,0 @@
-/**
- * reference: https://meta.stackexchange.com/questions/1777/what-html-tags-are-allowed-on-stack-exchange-sites,
- *            https://github.com/jch/html-pipeline/blob/70b6903b025c668ff3c02a6fa382031661182147/lib/html/pipeline/sanitization_filter.rb#L41
- */
-
-const tags = [
-  '-', 'a', 'abbr', 'b', 'bdi', 'bdo', 'blockquote', 'br', 'caption', 'cite',
-  'code', 'col', 'colgroup', 'data', 'dd', 'del', 'details', 'dfn', 'div', 'dl',
-  'dt', 'em', 'figcaption', 'figure', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7',
-  'h8', 'hr', 'i', 'iframe', 'img', 'ins', 'kbd', 'li', 'mark', 'ol', 'p',
-  'pre', 'q', 'rb', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'strike',
-  'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th',
-  'thead', 'time', 'tr', 'tt', 'u', 'ul', 'var', 'wbr',
-];
-
-const attrs = ['src', 'href', 'class', 'id', 'width', 'height', 'alt', 'title', 'style'];
-
-module.exports = {
-  tags,
-  attrs,
-};

apps/app/src/services/xss/recommended-whitelist.spec.ts

@@ -0,0 +1,33 @@
+import { tagNames, attributes } from './recommended-whitelist';
+
+describe('recommended-whitelist', () => {
+
+  test('.tagNames should return iframe tag', () => {
+    expect(tagNames).not.toBeNull();
+    expect(tagNames).includes('iframe');
+  });
+
+  test('.tagNames should return video tag', () => {
+    expect(tagNames).not.toBeNull();
+    expect(tagNames).includes('video');
+  });
+
+  test('.attributes should return data attributes', () => {
+    expect(attributes).not.toBeNull();
+    expect(Object.keys(attributes)).includes('*');
+    expect(attributes['*']).includes('data*');
+  });
+
+  test('.attributes should return iframe attributes', () => {
+    expect(attributes).not.toBeNull();
+    expect(Object.keys(attributes)).includes('iframe');
+    expect(attributes.iframe).includes('src');
+  });
+
+  test('.attributes should return video attributes', () => {
+    expect(attributes).not.toBeNull();
+    expect(Object.keys(attributes)).includes('video');
+    expect(attributes.iframe).includes('src');
+  });
+
+});

apps/app/src/services/xss/recommended-whitelist.ts

@@ -0,0 +1,26 @@
+import { defaultSchema } from 'hast-util-sanitize';
+import type { Attributes } from 'hast-util-sanitize/lib';
+
+/**
+ * reference: https://meta.stackexchange.com/questions/1777/what-html-tags-are-allowed-on-stack-exchange-sites,
+ *            https://github.com/jch/html-pipeline/blob/70b6903b025c668ff3c02a6fa382031661182147/lib/html/pipeline/sanitization_filter.rb#L41
+ */
+
+export const tagNames: Array<string> = [
+  ...defaultSchema.tagNames ?? [],
+  '-', 'bdi',
+  'col', 'colgroup',
+  'data',
+  'iframe',
+  'video',
+  'rb', 'u',
+];
+
+export const attributes: Attributes = {
+  ...defaultSchema.attributes,
+  iframe: ['allow', 'referrerpolicy', 'sandbox', 'src', 'srcdoc'],
+  video: ['controls', 'src', 'muted', 'preload', 'width', 'height', 'autoplay'],
+  // The special value 'data*' as a property name can be used to allow all data properties.
+  // see: https://github.com/syntax-tree/hast-util-sanitize/
+  '*': ['key', 'class', 'className', 'style', 'data*'],
+};