How to skip rendering images in Jsf

Question

I have a html string which contains images and text. While rendering, I only want to render the text and not the images.

I tried to do this :

<h:outputText escape="false" value="#{fn:replace(answerBlock.content,'&lt;img&gt;','')}" />

but this returned a malformed html which then rendered on the screen .

How can I skip the img tags and just render the text in jsf ?

Answer 1

Do not use string or regex functions to manipulate user-controlled HTML. The risk for a XSS attack hole is in this particular example very big as not all aspects are covered (e.g. <script>, onclick, etc). Just use a real HTML parser which is aware of XSS implications. For example Jsoup which has also a whitelist sanitizer feature.

String sanitizedHtml = Jsoup.clean(dirtyHtml, Whitelist.basic());

Then display that instead:

<h:outputText value="#{bean.sanitizedHtml}" escape="false" />

To improve performance, consider parsing it only once and saving in DB along with raw data.

See also:

• How to implement a possibility for user to post some html-formatted data in a safe way?
• CSRF, XSS and SQL Injection attack prevention in JSF

Answer 2

I would add code to your answerBlock bean. Something like:

public String imageStrippedContent() {
    return stripImgTags( content() );
}

private String stripImgTags( String html ) {
    // strip img tag using dom parser like jtidy, or maybe regex
    ...
}

Then modify your facelet to:

<h:outputText escape="false" value="#{answerBlock.imageStrippedContent} />