feat: 🎸 don't use innerhtml when passing a string

BREAKING CHANGE: When providing a string as content, we use innertext instead to prevent
xss

.gitignore

@@ -44,3 +44,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+cypress/screenshots

projects/ngneat/helipopper/package.json

@@ -7,6 +7,9 @@
     "tippy.js": "^6.2.3",
     "tslib": "^2.0.0"
   },
+  "peerDependencies": {
+    "@ngneat/overview": "*"
+  },
   "keywords": [
     "angular",
     "angular tooltip",

projects/ngneat/helipopper/src/lib/tippy.directive.ts

@@ -211,6 +211,10 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
         },
         onShow: instance => {
           this.zone.run(() => {
+            const content = this.resolveContent();
+            if (isString(content)) {
+              instance.setProps({ allowHTML: false });
+            }
             instance.setContent(this.resolveContent());
             this.hideOnEscape && this.handleEscapeButton();
           });

src/app/app.component.html

@@ -273,3 +273,16 @@ <h6>Menu</h6>
     </div>
   </div>
 </ng-container>
+
+<div>
+  <h6>Sanitize</h6>
+
+  <input
+    style="max-width: 600px"
+    type="text"
+    placeholder="Sanitize"
+    tippy="<img src='empty.gif' onerror='alert(1);' />"
+  />
+</div>
+
+<hr />