unsafe html

Author: Vishal Vora

examples/html.py

@@ -0,0 +1,13 @@
+from datastack import datastack
+
+ds = datastack(main=True)
+
+
+#  HTML
+ds.subheader("HTML")
+ds.html(
+    """<div style="color:green">
+  HTML text
+</div>""",
+    allow_unsafe_html=False,
+)

frontend/src/app/app.component.html

@@ -82,7 +82,7 @@ <h3 style="font-size: calc(1.3rem + .4vw); font-weight:600">{{element.prop.data}
       </div>
       <div *ngIf="element.type == 'html'">
         <!-- {{element.prop.data}} -->
-        <div [innerHTML]="element.prop.data"></div>
+        <div [innerHTML]="senitized_html(element.prop)"></div>
       </div>
       <div *ngIf="element.type == 'editable_html'">
         <ng-container *ngTemplateOutlet="editable;context:{element:element}"></ng-container>

frontend/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
@@ -27,7 +27,8 @@ interface  g {
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 
 
@@ -561,6 +562,14 @@ plotly_click(element, event){
   this.req(element,  {value: event.points, action:'chart_click'})
 }
 
+senitized_html(prop){
+  if (prop.allow_unsafe_html){
+    return  this.sanitizer.bypassSecurityTrustHtml(prop.data)
+  }
+  else{
+    return prop.data
+  }
+}
 }
 
 

lib/datastack/stacker/stacker.py

@@ -679,14 +679,19 @@ def write(self, data, id: Optional[str] = None):
         if not self.replace_block(id, block):
             self.append_block(block)
 
-    def html(self, html: str, id: Optional[str] = None):
+    def html(
+        self, html: str, allow_unsafe_html: bool = False, id: Optional[str] = None
+    ):
         """Diapy html element
 
         Parameters
         ----------
         html : str
             html string
 
+        allow_unsafe_html : bool
+            By default, any HTML tags found in the body will be escaped and therefore treated as pure text. This behavior may be turned off by setting this argument to True.
+
         id : str
             An optional string or integer to use as the unique key for the element.
 
@@ -703,6 +708,7 @@ def html(self, html: str, id: Optional[str] = None):
             "prop": {
                 "data": html,
                 "data_var": argname("html", vars_only=False, func=self.html),
+                "allow_unsafe_html": allow_unsafe_html,
             },
         }
         if not self.replace_block(id, block):

lib/setup.py

@@ -4,7 +4,7 @@
 
 setuptools.setup(
     name="pydatastack",
-    version="0.0.8",
+    version="0.0.9",
     author="Vishal Vora, Mayur Pokiya, Karan Doshi",
     description="The Fastes way to build apps in python",
     long_description_content_type="text/markdown",