feat: transform should sanitize html by default

PR where sanitizer was added: diplodoc-platform#177

src/transform/md.ts

@@ -111,7 +111,7 @@ function initParser(md: MarkdownIt, options: OptionsType, env: EnvType) {
 }
 
 function initCompiler(md: MarkdownIt, options: OptionsType, env: EnvType) {
-    const {needToSanitizeHtml = false, sanitizeOptions} = options;
+    const {needToSanitizeHtml = true, sanitizeOptions} = options;
 
     return (tokens: Token[]) => {
         const html = md.renderer.render(tokens, md.options, env);

src/transform/sanitize.ts

@@ -118,6 +118,7 @@ const htmlTags = [
     'video',
     'wbr',
     'iframe',
+    'style',
 ];
 
 const svgTags = [

test/sanitize-html.test.ts

@@ -16,13 +16,47 @@ describe('Sanitize HTML utility', () => {
         expect(sanitizeHtml('<img src=a onerror=alert(1)>')).toBe('<img src="a" />');
     });
 
-    it('transform should sanitize html', () => {
-        expect(transformYfm('<img src=a onerror=alert(1)>', {needToSanitizeHtml: true})).toBe(
-            '<img src="a" />',
-        );
+    describe('by default transform should sanitize html', () => {
+        describe('html in markdown', () => {
+            it('should sanitize danger attributes', () => {
+                expect(transformYfm('<img src="a" onerror=alert(1)>')).toBe('<img src="a" />');
+            });
+
+            it('should not sanitize style tag', () => {
+                expect(transformYfm('<style>h2 {color: red;}</style>')).toBe(
+                    '<style>h2 {color: red;}</style>',
+                );
+            });
+        });
+
+        describe('plugin markdown-it-attrs', () => {
+            it('should sanitize danger attributes', () => {
+                expect(transformYfm('Click {onfocus="alert(1)" onclick="alert(1)"}')).toBe(
+                    '<p>Click</p>\n',
+                );
+            });
+
+            it('should not sanitize safe attributes', () => {
+                expect(transformYfm('Click {.style-me data-toggle=modal}')).toBe(
+                    '<p class="style-me" data-toggle="modal">Click</p>\n',
+                );
+            });
+
+            it('should not sanitize style attribute', () => {
+                expect(
+                    transformYfm(
+                        '[example.com](https://example.com){style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: red; opacity: 0.5"}',
+                    ),
+                ).toBe(
+                    '<p><a href="https://example.com" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:red;opacity:0.5">example.com</a></p>\n',
+                );
+            });
+        });
     });
 
-    it('by default transform should not sanitize html', () => {
-        expect(transformYfm('<img src=a onerror=alert(1)>')).toBe('<img src=a onerror=alert(1)>');
+    it('transform should not sanitize html', () => {
+        expect(transformYfm('<img src=a onerror=alert(1)>', {needToSanitizeHtml: false})).toBe(
+            '<img src=a onerror=alert(1)>',
+        );
     });
 });