How to allow embedded images when sanitizing html with OWASP Java HTML Sanitizer

Question

I would like to allow:

<img src="data:image/jpg;base64,..."/>

I see there's documentation on how to do this but I don't understand how to implement it. I tried to add the pattern

.allowUrlProtocols("data")
.allowAttributes("src").matching(Pattern.compile("$data:image.*")).onElements("img")

But that didn't work. I understand the pattern must be a regex expression but I'm not sure I understand how it all links up. I get that it's trying to look for img tags and then looks at the src attribute. My understanding is that it should then look for the string data:image and if finds that allows it through. But that's not happening...

Thinking it was some kind of related issue I tried to remove the / but that nonetheless didn't allow the element. I just removed the / from the question to show that this wasn't the issue. But good catch. — Stephane Grenier
– Stephane Grenier, Commented Nov 17, 2017 at 7:41
Just an FYI I also tried contains just data, as in /data/ but that didn't work either. Therefore even just a basic regex is not working or the above setup code is wrong... — Stephane Grenier
– Stephane Grenier, Commented Nov 17, 2017 at 7:50
I tried adding ^.*data.*$ but either way they both failed... Also just to let you know I'm using the ebay example policy and just added those two lines. Since it's allow versus deny it shouldn't matter if another allowAttribute overlaps... — Stephane Grenier
– Stephane Grenier, Commented Nov 17, 2017 at 8:11

Greg Gum · Accepted Answer · 2018-05-02 22:25:16Z

7

If you got here (like I did) but you are using the HTMLSanitizer for C#, then the answer is:

var sanitizer = new HtmlSanitizer();
sanitizer.AllowedSchemes.Add("data");

answered May 2, 2018 at 22:25

Greg Gum

38.8k46 gold badges183 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephane Grenier · Accepted Answer · 2017-11-17 08:48:11Z

2

The issue is that I had:

private static final PolicyFactory POLICY_DEFINITION = new HtmlPolicyBuilder()
    .allowUrlProtocols("data")
    .allowAttributes("src").matching(ONSITE_OR_OFFSITE_URL).onElements("img")
    .allowAttributes("src").matching(Pattern.compile("^.*data:image/.*$")).onElements("img")
    .toFactory();

This caused an issue in that I assumed allowAttribute would combine both. Instead what you have to do is OR the pattern matching (for whatever pattern you want to match) as in:

Pattern EMBEDDED_IMAGE = Pattern.compile("^.*data:image/.*$")
ONSITE_OR_OFFSITE_URL_OR_EMBEDDED_IMAGE = matchesEither(ONSITE_URL, OFFSITE_URL, EMBEDDED_IMAGE);

private static final PolicyFactory POLICY_DEFINITION = new HtmlPolicyBuilder()
    .allowUrlProtocols("data")
    .allowAttributes("src").matching(ONSITE_OR_OFFSITE_URL_OR_EMBEDDED_IMAGE).onElements("img")
    .toFactory();

This code assumes you're using the EbayPolicyExample

answered Nov 17, 2017 at 8:48

Stephane Grenier

16k42 gold badges123 silver badges208 bronze badges

2 Comments

Mark Over a year ago

Good but doesn't work to combine 3 params as matchesEither in the Ebay Policy Example only takes 2 params.

Kyrstellaine Over a year ago

Note that there's no point using ^ to anchor the beginning of the pattern if you immediately follow it with .*.

Collectives™ on Stack Overflow

How to allow embedded images when sanitizing html with OWASP Java HTML Sanitizer

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related