feat(safeHtml): add safeHtml API to remove attr/tags

Author: acrazing

README.md

@@ -1,6 +1,6 @@
 # html5parser
 
-A simple and fast html5 parser, the result could be manipulated like
+A very tiny and fast html5 AST parser, the result could be manipulated like
 ECMAScript ESTree, especially about the attributes.
 
 ## Introduction
@@ -76,6 +76,20 @@ export function tokenize(input: string): IToken[];
 
 // Utils API, walk the ast tree
 export function walk(ast: INode[], options: IWalkOptions): void;
+
+// get safe html, remove danger tag/attributes with whitelist
+export function safeHtml(
+  html: string,
+  options?: Partial<SafeHtmlOptions>,
+): string;
+
+// you can get default value of the options at ./src/safeHtml.ts
+export interface SafeHtmlOptions {
+  allowedTags: string[];
+  allowedAttrs: string[];
+  tagAllowedAttrs: Record<string, string[]>;
+  allowedUrl: RegExp;
+}
 ```
 
 ## Abstract Syntax Tree Spec

package.json

@@ -1,7 +1,7 @@
 {
   "name": "html5parser",
   "description": "A fast, accurate AST parser for HTML5",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "acrazing <[email protected]>",
   "keywords": [
     "html5",

src/index.ts

@@ -13,3 +13,5 @@ export * from './types';
 export * from './parse';
 export * from './tokenize';
 export * from './utils';
+export * from './config';
+export * from './safeHtml';

src/safeHtml.spec.ts

@@ -0,0 +1,48 @@
+/*
+ * @since 2020-09-09 23:37:28
+ * @author acrazing <[email protected]>
+ */
+
+import { safeHtml } from './safeHtml';
+
+const htmlInput = `
+<div>
+  <h1>H1</h1>
+  <h2>H2</h2>
+\t<script>Script</script>
+\t<style>Style</style>
+  <p class="class" style="padding: 0">
+    <span>Span</span>
+    <table>
+      <tr><td>TD</td></tr>
+    </table>
+    <img src="hello world" id="omit" />
+  </p>
+  <a href="/download.html" target="_blank" about="about">Download<span>child</span></a>
+  <a href="javascript:" target="_blank" about="about">Javascript<span>child</span></a>
+</div>
+`;
+
+const htmlOutput = `
+<div>
+  <h1>H1</h1>
+  <h2>H2</h2>
+\t
+\t
+  <p style="padding: 0">
+    <span>Span</span>
+    <table>
+      <tr><td>TD</td></tr>
+    </table>
+    <img src="hello world">
+  </p>
+  <a href="/download.html" target="_blank">Download<span>child</span></a>
+  <a target="_blank">Javascript<span>child</span></a>
+</div>
+`;
+
+describe('safeHtml', () => {
+  it('should stringify safe html as expected', () => {
+    expect(safeHtml(htmlInput)).toEqual(htmlOutput);
+  });
+});

src/safeHtml.ts

@@ -0,0 +1,116 @@
+/*
+ * @since 2020-09-09 22:53:14
+ * @author acrazing <[email protected]>
+ */
+
+import { selfCloseTags } from './config';
+import { parse } from './parse';
+import { INode, SyntaxKind } from './types';
+
+export interface SafeHtmlOptions {
+  allowedTags: string[];
+  allowedAttrs: string[];
+  tagAllowedAttrs: Record<string, string[]>;
+  allowedUrl: RegExp;
+}
+
+export const safeHtmlDefaultOptions: SafeHtmlOptions = {
+  allowedTags: [
+    'div',
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'th',
+    'td',
+    'span',
+    'a',
+    'img',
+  ],
+  allowedAttrs: ['style'],
+  tagAllowedAttrs: {
+    a: ['href', 'target'],
+    img: ['src'],
+  },
+  allowedUrl: /^(?:mailto|tel|https?|ftp|[^:]*[^a-z0-9.+-][^:]*):|^[^:]*$/i,
+};
+
+export function safeHtml(
+  input: string,
+  options: Partial<SafeHtmlOptions> = {},
+): string {
+  const config: SafeHtmlOptions = {
+    ...safeHtmlDefaultOptions,
+    ...options,
+    tagAllowedAttrs: {
+      ...safeHtmlDefaultOptions.tagAllowedAttrs,
+      ...options.tagAllowedAttrs,
+    },
+  };
+  const ast = parse(input);
+  return stringify(ast, config, input);
+}
+
+function stringify(
+  ast: INode[],
+  config: SafeHtmlOptions,
+  input: string,
+): string {
+  return ast
+    .map((node) => {
+      if (node.type === SyntaxKind.Text) {
+        return node.value;
+      }
+      if (config.allowedTags.indexOf(node.name) === -1) {
+        return '';
+      }
+      if (selfCloseTags[node.name]) {
+        if (node.body !== void 0) {
+          throw new Error(
+            `self closed tag "${node.name}" should not have body`,
+          );
+        }
+      } else {
+        if (!node.body || !node.close) {
+          throw new Error(`tag "${node.name}" should have body and close`);
+        }
+      }
+      const attrs = node.attributes
+        .filter((a) => {
+          if (
+            config.allowedAttrs.indexOf(a.name.value) > -1 ||
+            config.tagAllowedAttrs[node.name]?.indexOf(a.name.value) > -1
+          ) {
+            if (!a.value) {
+              return true;
+            }
+            if (a.name.value !== 'src' && a.name.value !== 'href') {
+              return true;
+            }
+            if (config.allowedUrl.test(a.value.value)) {
+              return true;
+            }
+            return false;
+          }
+          return false;
+        })
+        .map((a) => input.substring(a.start, a.end))
+        .join(' ');
+      const head = '<' + node.rawName + (attrs ? ' ' + attrs : '') + '>';
+      if (!node.body) {
+        return head;
+      }
+      return head + stringify(node.body, config, input) + `</${node.rawName}>`;
+    })
+    .join('');
+}

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "lib": ["esnext", "dom"],
+    "lib": ["es5", "dom"],
     "allowJs": false,
     "jsx": "react",
     "declaration": false,