Skip to Main Content

Breadcrumb

Examples

Using PL/SQL to Generate Content

This is an example that is very similar to our Static Region demo. The difference being to show you how we can programatically control more variations of the layout design when we use PLSQL rather than static text with substitutions to control what and how things should be displayed.

Try changing the values below....

Lazy Loading

Sometimes we may not want to show or refresh our dynamic content until it's actually visible to the user i.e. it's hidden behind a tab, scrolled into view etc. This can have performance advantages for our application as we only fetch the dynamic content when the user actually is viewing the content.

In some cases the user may never click on a tab to view the content so we save time on processing/rendering, which can be really helpful on pages with a very high page view count or which have a high number of AJAX calls to refresh many regions.

This is an example showing you that we only load the dynamic content when we click the 2nd tab, and we only refresh on button click when the tab is active.

Placeholder Tab

This is just some dummy content. Please click the other tab to see the content load dynamically.

Note: we have purposely put a 1 second delay to show you the content loading.

Events

Browser events allow us to respond to things happening on the page. We have added support to fire an event "before" and "after" refreshing the PL/SQL Dynamic content region plug-in. The button below will refresh the demo in the "Server Side Substitutions" section above. You can see the refresh time change each time you click the "Refresh" button.

Output Methods

As of UC version 20.2, besides the traditional calls to htp.p, this plug-in supports an additional output method - assignment to APEX_APPLICATION.g_clob_01.

This method is perfect for when you have the content is larger than 32k, as you won't have to loop and chunk the content so you can pass it through htp.p.

Here's a quick example: 

apex_application.g_clob_01 := '<h3 style="text-align: center;">Hello UC World!</h3>';

Will result in:

Hello UC World!

HTML Sanitization

As of UC version 20.2, this plug-in can also sanitize its output to avoid Cross Site Scripting attacks (XSS).

Simply enable the plug-in's "Sanitize Content" option, and all dangerous content will be stripped away, leaving the legal HTML intact. This way you can allow users to edit HTML code, say via a Rich Text Editor, and present that HTML to other users, without risking an XSS attack. We recommend using this plug-in whenever you wish to present HTML you didn't write yourself.

Take the following example. Both of the following 2 instances of the UC - PL/SQL Dynamic Content plug-in are based on the same dangerous HTML source:


<!-- attack 1 nonexistent image-->
<img src="nonexistent" onerror="console.log('XSS 1');">

<!-- attack 2 regular script tag-->
<script>console.log('XSS 2');</script>

<!-- attack 3 mouseover-->
<h3 onmouseover="console.log('XSS 3');">Hello UC World!</h3>

Unsanitized Content

Hello UC World!

Sanitized Content

Now check your console. You should see XSS 1 and 2 being console logged, but only once, caused by the left example. The right example was sanitized and did not cause any damage.

Same with the mouseover event. As you hover over the left "Hello UC World" you will see a message being logged. When hovering over the same text on the right, nothing will happen.

This demonstration uses a simple console.log, but an attacker could easily use the same technique to steal your cookie and session and hijack your session or steal sensitive information. As a rule of thumb, untrusted HTML should always be either completely escaped, or sanitized.

Under the hood, this plug-in uses the popular JavaScript library DOMPurify. If you wish to fine control its options you can use the JavaScript Initialization Code as follows:


function(options){
    // allow only h1, h2 and h3 elements, very strict
    options.DOMPurifyConfig = {
        ALLOWED_TAGS: ['h1', 'h2', 'h3']
    };
}

See the DOMPurify documentation for more info.

Credits

The avatar icons have been developed by Oxygenna, made freely available, which you can download from the Oxygenna Website

FAQ

  • Why would I want to lazy load or lazy refresh the region?

    The reason you would choose to do this is for performance i.e. you only want to load content the user is looking at. If the content is hidden behind tabs then by lazy loading you will only load the content from the server when that tab is clicked. This means that the processing of that region content is deferred until the user looks at it. This might be necessary when you have many users simultaneously viewing the page, or when there is some business rules/logic that takes extra processing time to generate the content.

    You can speed up the initial page load by using the lazy loading technique. As for refreshing the same principle applies. You might be refreshing many regions at once, so to reduce the load you only refresh hidden regions the next time they are shown. If they aren't shown to the user then you have saved processing time using this technique.