HTML Control needed (to embed and sanitize third party HTML properly)

[MFel0123]

Feature Request Description

In our new app (using UI5 Web Components) we want to embed HTML (in this case coming from an email) in a Tab of our detail component. We need an option to securely embed and display it. In our case the user has to see the html content because his/her decisions depend on it.

Proposed Solution

We would like to have a control like in already exists in SAPUI5 or Open UI5: https://openui5.hana.ondemand.com/api/sap.ui.core.HTML#overview

Proposed Alternatives

To build it on our own (using a div or iFrame) would not be an option for us since we would also have to build our own sanitizer. We would like to avoid this.

Additional Context

We also found this documentation from the Fiori Design Guidelines:
https://experience.sap.com/fiori-design-web/html/

Priority

• Low
• Medium
• High
• Very High

It is quite urgent for us since it is an obligatory part of the app we need to build.

Stakeholder Info (if applicable)

Organization: SAP
Business impact: lower usability (or even no usability)

[ilhan007]

Hello @MFel0123 thanks for your interest in UI5 Web Components.

I saw the "Organization: SAP" field. Before discussing the requirement itself, could you give us more details about the product, app you are building - some documentation, links to the app would be great. And, as "SAP" is to broad, which team/org is exactly implementing it.

Best Regards,
ilhan

[MFel0123]

Hello,
the project is the same this request was raised for: #3319
It is in the Marketing Area.
I will see if I can add more infos if really needed. But I hope the requirement itself is clear so far.

[ilhan007]

Hello @MFel0123 yes the requirement is clear itself. It's just the priority of evaluating, planning and implementing the feature requests depends on the product, so yes if you share more information would be great!

[MFel0123]

We already clarified this with @ilhan007 via email.

[ilhan007]

Hello @MFel0123 as discussed offline, we will work on providing the requested functionality (to sanitize HTML content) and we will have more details on the implementation approach and possible timelines at the start of the next week.

Could you let us know any deadlines you have for this requirements that we must be aware of?

BR,
ilhan

[vladitasev]

Hello @MFel0123

Please have a look at the commit description of this PR:
#3525

It outlines the proposed API and how it will be used with some examples.

Let me give you the background: in OpenUI5 the sap.ui.core.HTML control serves 2 main purposes:

• To create a break-out for user-defined HTML, since OpenUI5 development revolves around using the already built controls and not writing your own HTML
• To provide sanitization

As for UI5 Web components - you already can write your own HTML, as this is the premise of the project, so the only value here would be the sanitization part. A component would be an overkill, so we have decided for a new utility module (see the PR example) that you can import from your app and call the sanitizeHTML function and pass the user-defined HTML.

Does it make sense?

Regards,
Vladislav

[MFel0123]

First of all let me thank you very much for your support and proposal. We will have a closer look at the PR at first. Our main intention is to be compliant with the Security Guidelines. That is why are interested in such a functionality.

[vladitasev]

Welcome :)

The sanitization code is taken from the sap.ui.core library of OpenUI5, and is therefore compliant with the security guidelines. What we did was declare OpenUI5 core as a dev dependency, copy the relevant files from node_modules/ during a build step, and transform them to ES6 modules so that they can be integrated seamlessly into the project.

Thus you get the exact same code that runs inside sap.ui.core.HTML:

if ( this.getSanitizeContent() ) {
	Log.trace("sanitizing HTML content for " + this);
	sContent = sanitizeHTML(sContent);
}

this.setProperty("content", sContent, true);

where sanitizeHTML.js is :

"sap/base/security/sanitizeHTML"

(top of the file)

Regards

[MFel0123]

That sounds really good. So, if you ask us, we would like to go for it. And we would be interested to test this as early as possible.

[ilhan007]

Hello @MFel0123

The feature has been released with 1.0.0-rc.15.

import { sanitizeHTML, URLListValidator } from "@ui5/webcomponents-base/dist/util/HTMLSanitizer.js";
URLListValidator.add("http", "www.google.com"); // Add all allowed URLs
URLListValidator.add("https", "www.google.com"); // format is: protocol, host, port, path

sanitizeHTML(`
<div style="color: blue;">This is OK</div>
<script>alert(1);</script>
<a onlick="alert(2)" href="https://www.google.com">This link is OK</a>
<a href="http://my.site.com">This link is not</a>
`);

Note: there are a lot of breaking changes that have to be adopted before upgrading to RC.15
See the BREAKING_CHANGE section: https://github.com/SAP/ui5-webcomponents/releases/tag/v1.0.0-rc.15