How to insert html securely in your visual app

In this tutorial we’ll see the recommended way to insert html string in visual applications. We do not recommend inserting html using data-bind= “html : …” syntax or element.innerHtml since these are prone to xss attacks.

Using oj-bind-dom

Here’s a DOM binding example on Oracle JET Cookbook and link to js doc.

Create a Module function that returns the config required by the DOM binding.

define(['ojs/ojhtmlutils'], function(HtmlUtils) {
  'use strict';
var PageModule = function PageModule() {};
  
  PageModule.prototype.getConfig = function() {
    const viewStr = '<div> Sample <b>text</b> from <i>module function.</i></div>'
    return {
      view: HtmlUtils.stringToNodeArray(viewStr),
      data: {
      }
    }
  }
  return PageModule;
});

Use it in your html

<div class="oj-flex">
  <oj-bind-dom config="[[$functions.getConfig()]]"></oj-bind-dom>
</div>

Run it…

Assets

Visual App

Version

VBCS: 19.4.3.1

JET: 8.1.3