CSS Styling doesn't recognize style attribue

[jason...@gmail.com]

I'm attempting to build my own policy which allows styling on any element.  I've tried to use the default allowStyling() method and also tried to use my own custom CSSSchema whitelist, but neither seems to work for my source, and I haven't found a good example of how to configure the CSSSchema, so not sure if I'm creating it correctly.  I'm using the latest version 20171016.1.  I'm also going to need how to allow pseudo style for data-mce-style attribute.

Here is sample code

    public static String sanitizeAllowRichContent(String content) {
        if (content == null || "".equals(content.trim())) {
            return content;
        }
        PolicyFactory policy = new HtmlPolicyBuilder().allowStyling()
                .allowStandardUrlProtocols()
                .allowAttributes("data-mce-style").globally()
                .allowAttributes("href").onElements("a").allowStandardUrlProtocols().allowAttributes("target").onElements("a").allowAttributes("data-mce-href").onElements("a").allowAttributes("data-mce-bogus").onElements("br").allowElements(
                        "a",
                        "p", "i", "b", "u", "strong", "em", "small", "big", "br", "col", "span",
                        "ul", "ol", "li", "tbody", "thead", "tfoot",
                        "table", "td", "th", "tr").toFactory();

        return policy.sanitize(content);
    }


Here is my unit test

    @Test
    public void testRichContent2() {
        assertEquals("<p><strong>Bold</strong></p><p><em>Italics</em></p><p><strong><em>Bold Italics</em></strong></p><p><span style=\\\"font-size: 24pt;\\\" data-mce-style=\\\"font-size: 24pt;\\\"><strong><em>Font size</em></strong></span></p><p style=\\\"text-align: left;\\\" data-mce-style=\\\"text-align: left;\\\">Align Left</p><p style=\\\"text-align: center;\\\" data-mce-style=\\\"text-align: center;\\\">Align center</p><p style=\\\"text-align: right;\\\" data-mce-style=\\\"text-align: right;\\\">Align Right</p><p style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Justify</p><ul><li style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Default Bullet</li></ul><p></p><ul style=\\\"list-style-type: circle;\\\" data-mce-style=\\\"list-style-type: circle;\\\"><li>Circle Bullet</li></ul><p></p><ul style=\\\"list-style-type: disc;\\\" data-mce-style=\\\"list-style-type: disc;\\\"><li>Disc Bullet</li></ul><p></p><ul style=\\\"list-style-type: square;\\\" data-mce-style=\\\"list-style-type: square;\\\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\\\"list-style-type: lower-alpha;\\\" data-mce-style=\\\"list-style-type: lower-alpha;\\\"><li>Lower alpha</li></ol><p></p><ol style=\\\"list-style-type: lower-greek;\\\" data-mce-style=\\\"list-style-type: lower-greek;\\\"><li>Lower greek</li></ol><p></p><ol style=\\\"list-style-type: lower-roman;\\\" data-mce-style=\\\"list-style-type: lower-roman;\\\"><li>Lower roman</li></ol><p></p><ol style=\\\"list-style-type: upper-alpha;\\\" data-mce-style=\\\"list-style-type: upper-alpha;\\\"><li>Upper Alpha</li></ol><p></p><ol style=\\\"list-style-type: upper-roman;\\\" data-mce-style=\\\"list-style-type: upper-roman;\\\"><li>Upper Roman</li></ol><p></p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\">Indent</p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\"></p><p><a href=\\\"http://www.apple.com\\\" target=\\\"_blank\\\" data-mce-href=\\\"http://www.apple.com\\\">Apple Website</a><br data-mce-bogus=\\\"1\\\"></p><table class=\\\"mce-item-table\\\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\\\"1\\\"></p>", SecurityUtil.sanitizeAllowRichContent("<p><strong>Bold</strong></p><p><em>Italics</em></p><p><strong><em>Bold Italics</em></strong></p><p><span style=\\\"font-size: 24pt;\\\" data-mce-style=\\\"font-size: 24pt;\\\"><strong><em>Font size</em></strong></span></p><p style=\\\"text-align: left;\\\" data-mce-style=\\\"text-align: left;\\\">Align Left</p><p style=\\\"text-align: center;\\\" data-mce-style=\\\"text-align: center;\\\">Align center</p><p style=\\\"text-align: right;\\\" data-mce-style=\\\"text-align: right;\\\">Align Right</p><p style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Justify</p><ul><li style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Default Bullet</li></ul><p></p><ul style=\\\"list-style-type: circle;\\\" data-mce-style=\\\"list-style-type: circle;\\\"><li>Circle Bullet</li></ul><p></p><ul style=\\\"list-style-type: disc;\\\" data-mce-style=\\\"list-style-type: disc;\\\"><li>Disc Bullet</li></ul><p></p><ul style=\\\"list-style-type: square;\\\" data-mce-style=\\\"list-style-type: square;\\\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\\\"list-style-type: lower-alpha;\\\" data-mce-style=\\\"list-style-type: lower-alpha;\\\"><li>Lower alpha</li></ol><p></p><ol style=\\\"list-style-type: lower-greek;\\\" data-mce-style=\\\"list-style-type: lower-greek;\\\"><li>Lower greek</li></ol><p></p><ol style=\\\"list-style-type: lower-roman;\\\" data-mce-style=\\\"list-style-type: lower-roman;\\\"><li>Lower roman</li></ol><p></p><ol style=\\\"list-style-type: upper-alpha;\\\" data-mce-style=\\\"list-style-type: upper-alpha;\\\"><li>Upper Alpha</li></ol><p></p><ol style=\\\"list-style-type: upper-roman;\\\" data-mce-style=\\\"list-style-type: upper-roman;\\\"><li>Upper Roman</li></ol><p></p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\">Indent</p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\"></p><p><a href=\\\"http://www.apple.com\\\" target=\\\"_blank\\\" data-mce-href=\\\"http://www.apple.com\\\">Apple Website</a><br data-mce-bogus=\\\"1\\\"></p><table class=\\\"mce-item-table\\\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\\\"1\\\"></p>"));
    }


Here is the error:

org.junit.ComparisonFailure: expected:<...strong></p><p><span [style=\"font-size: 24pt;\" data-mce-style=\"font-size: 24pt;\"><strong><em>Font size</em></strong></span></p><p style=\"text-align: left;\" data-mce-style=\"text-align: left;\">Align Left</p><p style=\"text-align: center;\" data-mce-style=\"text-align: center;\">Align center</p><p style=\"text-align: right;\" data-mce-style=\"text-align: right;\">Align Right</p><p style=\"text-align: justify;\" data-mce-style=\"text-align: justify;\">Justify</p><ul><li style=\"text-align: justify;\" data-mce-style=\"text-align: justify;\">Default Bullet</li></ul><p></p><ul style=\"list-style-type: circle;\" data-mce-style=\"list-style-type: circle;\"><li>Circle Bullet</li></ul><p></p><ul style=\"list-style-type: disc;\" data-mce-style=\"list-style-type: disc;\"><li>Disc Bullet</li></ul><p></p><ul style=\"list-style-type: square;\" data-mce-style=\"list-style-type: square;\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\"list-style-type: lower-alpha;\" data-mce-style=\"list-style-type: lower-alpha;\"><li>Lower alpha</li></ol><p></p><ol style=\"list-style-type: lower-greek;\" data-mce-style=\"list-style-type: lower-greek;\"><li>Lower greek</li></ol><p></p><ol style=\"list-style-type: lower-roman;\" data-mce-style=\"list-style-type: lower-roman;\"><li>Lower roman</li></ol><p></p><ol style=\"list-style-type: upper-alpha;\" data-mce-style=\"list-style-type: upper-alpha;\"><li>Upper Alpha</li></ol><p></p><ol style=\"list-style-type: upper-roman;\" data-mce-style=\"list-style-type: upper-roman;\"><li>Upper Roman</li></ol><p></p><p style=\"padding-left: 30px;\" data-mce-style=\"padding-left: 30px;\">Indent</p><p style=\"padding-left: 30px;\" data-mce-style=\"padding-left: 30px;\"></p><p><a href=\"http://www.apple.com\" target=\"_blank\" data-mce-href=\"http://www.apple.com\">Apple Website</a><br data-mce-bogus=\"1\"></p><table class=\"mce-item-table\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\"1\"]></p>> but was:<...strong></p><p><span [data-mce-style="\&#34;font-size: 24pt;\"><strong><em>Font size</em></strong></span></p><p data-mce-style="\&#34;text-align: left;\">Align Left</p><p data-mce-style="\&#34;text-align: center;\">Align center</p><p data-mce-style="\&#34;text-align: right;\">Align Right</p><p data-mce-style="\&#34;text-align: justify;\">Justify</p><ul><li data-mce-style="\&#34;text-align: justify;\">Default Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: circle;\"><li>Circle Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: disc;\"><li>Disc Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: square;\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-alpha;\"><li>Lower alpha</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-greek;\"><li>Lower greek</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-roman;\"><li>Lower roman</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: upper-alpha;\"><li>Upper Alpha</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: upper-roman;\"><li>Upper Roman</li></ol><p></p><p data-mce-style="\&#34;padding-left: 30px;\">Indent</p><p data-mce-style="\&#34;padding-left: 30px;\"></p><p><a target="\&#34;_blank\" data-mce-href="\&#34;http://www.apple.com\">Apple Website</a><br data-mce-bogus="\&#34;1\" /></p><table><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus="\&#34;1\" /]></p>>

[Mike Samuel]

On Mon, Dec 11, 2017 at 3:23 PM, <jason...@gmail.com> wrote:

I'm attempting to build my own policy which allows styling on any element.  I've tried to use the default allowStyling() method and also tried to use my own custom CSSSchema whitelist, but neither seems to work for my source, and I haven't found a good example of how to configure the CSSSchema, so not sure if I'm creating it correctly.  I'm using the latest version 20171016.1.  I'm also going to need how to allow pseudo style for data-mce-style attribute.

https://github.com/OWASP/java-html-sanitizer/blob/master/src/main/java/org/owasp/html/StylingPolicy.java is the attribute policy that is used to vet style attributes.

I suppose I could provide a public API to allow you to create one which you could then use with data-mce-style.

 

Here is sample code

    public static String sanitizeAllowRichContent(String content) {
        if (content == null || "".equals(content.trim())) {
            return content;
        }
        PolicyFactory policy = new HtmlPolicyBuilder().allowStyling()
                .allowStandardUrlProtocols()
                .allowAttributes("data-mce-style").globally()
                .allowAttributes("href").onElements("a").allowStandardUrlProtocols().allowAttributes("target").onElements("a").allowAttributes("data-mce-href").onElements("a").allowAttributes("data-mce-bogus").onElements("br").allowElements(
                        "a",
                        "p", "i", "b", "u", "strong", "em", "small", "big", "br", "col", "span",
                        "ul", "ol", "li", "tbody", "thead", "tfoot",
                        "table", "td", "th", "tr").toFactory();

        return policy.sanitize(content);
    }


Here is my unit test

These test strings are large.  Can you reduce this to a smaller test case?

 

    @Test
    public void testRichContent2() {
        assertEquals("<p><strong>Bold</strong></p><p><em>Italics</em></p><p><strong><em>Bold Italics</em></strong></p><p><span style=\\\"font-size: 24pt;\\\" data-mce-style=\\\"font-size: 24pt;\\\"><strong><em>Font size</em></strong></span></p><p style=\\\"text-align: left;\\\" data-mce-style=\\\"text-align: left;\\\">Align Left</p><p style=\\\"text-align: center;\\\" data-mce-style=\\\"text-align: center;\\\">Align center</p><p style=\\\"text-align: right;\\\" data-mce-style=\\\"text-align: right;\\\">Align Right</p><p style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Justify</p><ul><li style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Default Bullet</li></ul><p></p><ul style=\\\"list-style-type: circle;\\\" data-mce-style=\\\"list-style-type: circle;\\\"><li>Circle Bullet</li></ul><p></p><ul style=\\\"list-style-type: disc;\\\" data-mce-style=\\\"list-style-type: disc;\\\"><li>Disc Bullet</li></ul><p></p><ul style=\\\"list-style-type: square;\\\" data-mce-style=\\\"list-style-type: square;\\\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\\\"list-style-type: lower-alpha;\\\" data-mce-style=\\\"list-style-type: lower-alpha;\\\"><li>Lower alpha</li></ol><p></p><ol style=\\\"list-style-type: lower-greek;\\\" data-mce-style=\\\"list-style-type: lower-greek;\\\"><li>Lower greek</li></ol><p></p><ol style=\\\"list-style-type: lower-roman;\\\" data-mce-style=\\\"list-style-type: lower-roman;\\\"><li>Lower roman</li></ol><p></p><ol style=\\\"list-style-type: upper-alpha;\\\" data-mce-style=\\\"list-style-type: upper-alpha;\\\"><li>Upper Alpha</li></ol><p></p><ol style=\\\"list-style-type: upper-roman;\\\" data-mce-style=\\\"list-style-type: upper-roman;\\\"><li>Upper Roman</li></ol><p></p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\">Indent</p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\"></p><p><a href=\\\"http://www.apple.com\\\" target=\\\"_blank\\\" data-mce-href=\\\"http://www.apple.com\\\">Apple Website</a><br data-mce-bogus=\\\"1\\\"></p><table class=\\\"mce-item-table\\\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\\\"1\\\"></p>", SecurityUtil.sanitizeAllowRichContent("<p><strong>Bold</strong></p><p><em>Italics</em></p><p><strong><em>Bold Italics</em></strong></p><p><span style=\\\"font-size: 24pt;\\\" data-mce-style=\\\"font-size: 24pt;\\\"><strong><em>Font size</em></strong></span></p><p style=\\\"text-align: left;\\\" data-mce-style=\\\"text-align: left;\\\">Align Left</p><p style=\\\"text-align: center;\\\" data-mce-style=\\\"text-align: center;\\\">Align center</p><p style=\\\"text-align: right;\\\" data-mce-style=\\\"text-align: right;\\\">Align Right</p><p style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Justify</p><ul><li style=\\\"text-align: justify;\\\" data-mce-style=\\\"text-align: justify;\\\">Default Bullet</li></ul><p></p><ul style=\\\"list-style-type: circle;\\\" data-mce-style=\\\"list-style-type: circle;\\\"><li>Circle Bullet</li></ul><p></p><ul style=\\\"list-style-type: disc;\\\" data-mce-style=\\\"list-style-type: disc;\\\"><li>Disc Bullet</li></ul><p></p><ul style=\\\"list-style-type: square;\\\" data-mce-style=\\\"list-style-type: square;\\\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\\\"list-style-type: lower-alpha;\\\" data-mce-style=\\\"list-style-type: lower-alpha;\\\"><li>Lower alpha</li></ol><p></p><ol style=\\\"list-style-type: lower-greek;\\\" data-mce-style=\\\"list-style-type: lower-greek;\\\"><li>Lower greek</li></ol><p></p><ol style=\\\"list-style-type: lower-roman;\\\" data-mce-style=\\\"list-style-type: lower-roman;\\\"><li>Lower roman</li></ol><p></p><ol style=\\\"list-style-type: upper-alpha;\\\" data-mce-style=\\\"list-style-type: upper-alpha;\\\"><li>Upper Alpha</li></ol><p></p><ol style=\\\"list-style-type: upper-roman;\\\" data-mce-style=\\\"list-style-type: upper-roman;\\\"><li>Upper Roman</li></ol><p></p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\">Indent</p><p style=\\\"padding-left: 30px;\\\" data-mce-style=\\\"padding-left: 30px;\\\"></p><p><a href=\\\"http://www.apple.com\\\" target=\\\"_blank\\\" data-mce-href=\\\"http://www.apple.com\\\">Apple Website</a><br data-mce-bogus=\\\"1\\\"></p><table class=\\\"mce-item-table\\\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\\\"1\\\"></p>"));
    }


Here is the error:

org.junit.ComparisonFailure: expected:<...strong></p><p><span [style=\"font-size: 24pt;\" data-mce-style=\"font-size: 24pt;\"><strong><em>Font size</em></strong></span></p><p style=\"text-align: left;\" data-mce-style=\"text-align: left;\">Align Left</p><p style=\"text-align: center;\" data-mce-style=\"text-align: center;\">Align center</p><p style=\"text-align: right;\" data-mce-style=\"text-align: right;\">Align Right</p><p style=\"text-align: justify;\" data-mce-style=\"text-align: justify;\">Justify</p><ul><li style=\"text-align: justify;\" data-mce-style=\"text-align: justify;\">Default Bullet</li></ul><p></p><ul style=\"list-style-type: circle;\" data-mce-style=\"list-style-type: circle;\"><li>Circle Bullet</li></ul><p></p><ul style=\"list-style-type: disc;\" data-mce-style=\"list-style-type: disc;\"><li>Disc Bullet</li></ul><p></p><ul style=\"list-style-type: square;\" data-mce-style=\"list-style-type: square;\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol style=\"list-style-type: lower-alpha;\" data-mce-style=\"list-style-type: lower-alpha;\"><li>Lower alpha</li></ol><p></p><ol style=\"list-style-type: lower-greek;\" data-mce-style=\"list-style-type: lower-greek;\"><li>Lower greek</li></ol><p></p><ol style=\"list-style-type: lower-roman;\" data-mce-style=\"list-style-type: lower-roman;\"><li>Lower roman</li></ol><p></p><ol style=\"list-style-type: upper-alpha;\" data-mce-style=\"list-style-type: upper-alpha;\"><li>Upper Alpha</li></ol><p></p><ol style=\"list-style-type: upper-roman;\" data-mce-style=\"list-style-type: upper-roman;\"><li>Upper Roman</li></ol><p></p><p style=\"padding-left: 30px;\" data-mce-style=\"padding-left: 30px;\">Indent</p><p style=\"padding-left: 30px;\" data-mce-style=\"padding-left: 30px;\"></p><p><a href=\"http://www.apple.com\" target=\"_blank\" data-mce-href=\"http://www.apple.com\">Apple Website</a><br data-mce-bogus=\"1\"></p><table class=\"mce-item-table\"><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus=\"1\"]></p>> but was:<...strong></p><p><span [data-mce-style="\&#34;font-size: 24pt;\"><strong><em>Font size</em></strong></span></p><p data-mce-style="\&#34;text-align: left;\">Align Left</p><p data-mce-style="\&#34;text-align: center;\">Align center</p><p data-mce-style="\&#34;text-align: right;\">Align Right</p><p data-mce-style="\&#34;text-align: justify;\">Justify</p><ul><li data-mce-style="\&#34;text-align: justify;\">Default Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: circle;\"><li>Circle Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: disc;\"><li>Disc Bullet</li></ul><p></p><ul data-mce-style="\&#34;list-style-type: square;\"><li>Square Bullet</li></ul><p></p><ol><li>Default Number</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-alpha;\"><li>Lower alpha</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-greek;\"><li>Lower greek</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: lower-roman;\"><li>Lower roman</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: upper-alpha;\"><li>Upper Alpha</li></ol><p></p><ol data-mce-style="\&#34;list-style-type: upper-roman;\"><li>Upper Roman</li></ol><p></p><p data-mce-style="\&#34;padding-left: 30px;\">Indent</p><p data-mce-style="\&#34;padding-left: 30px;\"></p><p><a target="\&#34;_blank\" data-mce-href="\&#34;http://www.apple.com\">Apple Website</a><br data-mce-bogus="\&#34;1\" /></p><table><tbody><tr><td>row1 L</td><td>row1 R</td></tr><tr><td>Row2 L</td><td><p>Row2 R</p></td></tr></tbody></table><p><br data-mce-bogus="\&#34;1\" /]></p>>

--
You received this message because you are subscribed to the Google Groups "OWASP Java HTML Sanitizer Support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to owasp-java-html-sanitizer-support+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.