GridStackWidget.content only used as textContent

adumesny · adumesny · commit f1ca7b1597b3 · 2024-09-28T16:11:42.000-07:00
* fix #2736 * All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS * addWidget(w: GridStackWidget) only signature * fixed RTL demo see readme V11 for more info
diff --git a/README.md b/README.md
@@ -47,6 +47,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Migrating to v8](#migrating-to-v8)
   - [Migrating to v9](#migrating-to-v9)
   - [Migrating to v10](#migrating-to-v10)
+  - [Migrating to v11](#migrating-to-v11)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -460,6 +461,21 @@ breaking change:
 * 1 column mode switch is no longer by default (`columnOpts` is not defined) as too many new users had issues. Instead set it explicitly (see above).
 * `oneColumnModeDomSort` has been removed. Planning to support per column layouts at some future times. TBD
 
+## Migrating to v11
+
+All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS. we now create DIV directly or use `el.textContent = w.content` for `GridStackWidget.content` field.
+
+breaking change:
+* if you code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
+```ts
+// NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+GridStack.renderCB = function(el, w) {
+  el.innerHTML = w.content;
+};
+```
+* V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
+* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`Util.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
diff --git a/demo/column.html b/demo/column.html
@@ -47,6 +47,11 @@ <h1>column() grid demo (fix cellHeight)</h1>
   </div>
 
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
+
     let test1 = [ // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
       /* match karma testing
       {x: 0, y: 0, w: 4, h: 2},
diff --git a/demo/knockout.html b/demo/knockout.html
@@ -36,7 +36,7 @@ <h1>knockout.js Demo</h1>
               }
 
               let item = items.find(function (i) { return i.nodeType == 1 });
-              grid.addWidget(item);
+              grid.makeWidget(item);
               ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
                 grid.removeWidget(item);
               });
diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html
@@ -5,94 +5,44 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Right-To-Left (RTL) demo</title>
-
-  <link rel="stylesheet" href="demo.css"/>
   <style type="text/css">
+    /* don't include demo.css as that has some forced text aligment */
+    @import "../dist/gridstack.css";
+    .grid-stack {
+      background: #FAFAD2;
+    }
     .grid-stack-item-content {
-      text-align: right; /* override demo.css */
+      background-color: #18bc9c;
     }
   </style>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>
-  <div class="container-fluid">
-    <h1>RTL Demo</h1>
-    <div>
-      <a class="btn btn-primary" data-bind="click: addNewWidget">Add Widget</a>
-    </div>
-    <br>
-    <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+  <h1>RTL Demo</h1>
+  <div>
+    <button onClick="addWidget()">Add Widget</button>
   </div>
+  <br>
+  <div class="grid-stack"></div>
 
   <script type="text/javascript">
-    ko.components.register('dashboard-grid', {
-      viewModel: {
-        createViewModel: function (controller, componentInfo) {
-          let ViewModel = function (controller, componentInfo) {
-            let grid = null;
-
-            this.widgets = controller.widgets;
-
-            this.afterAddWidget = function (items) {
-              if (!grid) {
-                grid = GridStack.init({auto: false});
-              }
-
-              let item = items.find(function (i) { return i.nodeType == 1 });
-              grid.addWidget(item);
-              ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
-                grid.removeWidget(item);
-              });
-            };
-          };
-
-          return new ViewModel(controller, componentInfo);
-        }
-      },
-      template:
-        [
-          '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
-          '   <div class="grid-stack-item" data-bind="attr: {\'gs-x\': $data.x, \'gs-y\': $data.y, \'gs-w\': $data.w, \'gs-h\': $data.h, \'gs-auto-position\': $data.auto_position}">',
-          '     <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
-          '   </div>',
-          '</div> '
-        ].join('')
-    });
-
-    let Controller = function (widgets) {
-      let self = this;
-
-      this.widgets = ko.observableArray(widgets);
-
-      this.addNewWidget = function () {
-        this.widgets.push({
-          x: 0,
-          y: 0,
-          w: Math.floor(1 + 3 * Math.random()),
-          h: Math.floor(1 + 3 * Math.random()),
-          auto_position: true,
-          index: 'auto'
-        });
-        return false;
-      };
-
-      this.deleteWidget = function (item) {
-        self.widgets.remove(item);
-        return false;
+    let items = [
+      {x: 0, y: 0, w: 2, h: 1},
+      {x: 2, y: 0, w: 4, h: 1},
+      {x: 6, y: 0, w: 2, h: 2},
+    ];
+    items.forEach((item, i) => item.content = 'item ' + i);
+    let grid = GridStack.init({rtl: true, children: items});
+
+    function addWidget() {
+      let w = {
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random()),
+        content: 'new item',
       };
+      grid.addWidget(w);
     };
 
-    let widgets = [
-      {x: 0, y: 0, w: 2, h: 2, index: 1},
-      {x: 2, y: 0, w: 4, h: 2, index: 2},
-      {x: 6, y: 0, w: 2, h: 4, index: 3},
-      {x: 1, y: 2, w: 4, h: 2, index: 4}
-    ];
-
-    let controller = new Controller(widgets);
-    ko.applyBindings(controller);
   </script>
 </body>
 </html>
diff --git a/demo/serialization.html b/demo/serialization.html
@@ -24,6 +24,11 @@ <h1>Serialization demo</h1>
   </div>
   <script src="events.js"></script>
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
+
     let serializedData = [
       {x: 0, y: 0, w: 2, h: 2},
       {x: 2, y: 1, w: 2, h: 3, 
diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
@@ -61,6 +61,11 @@ <h1>sizeToContent options demo</h1>
 
   </div>
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
+
     let text ='some very large content that will normally not fit in the window.'
     text = text + text;
     let count = 0;
diff --git a/demo/web1.html b/demo/web1.html
@@ -23,6 +23,11 @@ <h1>Web demo 1</h1>
   <div class="grid-stack"></div>
 
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
+
     let grid = GridStack.init({
       cellHeight: 70,
     });
diff --git a/demo/web2.html b/demo/web2.html
@@ -57,6 +57,10 @@ <h1>Advanced Demo</h1>
   </div>
 
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
 
     let grid = GridStack.init({
       cellHeight: 70,
diff --git a/demo/website.html b/demo/website.html
@@ -336,6 +336,10 @@ <h1>Used by</h1>
   <!-- /.container -->
 
   <script type="text/javascript">
+    // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
+    GridStack.renderCB = function(el, w) {
+      el.innerHTML = w.content;
+    };
     var simple = [
       {x: 0, y: 0, w: 4, h: 2, content: '1'},
       {x: 4, y: 0, w: 4, h: 4, content: '2'},
diff --git a/src/gridstack.ts b/src/gridstack.ts
diff --git a/src/types.ts b/src/types.ts
diff --git a/src/utils.ts b/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ <h1>knockout.js Demo</h1>`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`let item = items.find(function (i) { return i.nodeType == 1 });`
`39`		`- grid.addWidget(item);`
	`39`	`+ grid.makeWidget(item);`
`40`	`40`	`ko.utils.domNodeDisposal.addDisposeCallback(item, function () {`
`41`	`41`	`grid.removeWidget(item);`
`42`	`42`	`});`