htmlpurifier with borderRadius
I forked the original repo and added functionality for border radius in the purifying function, code is found here
https://github.com/msvensson82/htmlpurifier
I basically just added this to the CSSDefinition.php file, if you wish to amend yours instead of getting my repo.
// border-radius
$border_radius =
$this->info['border-top-left-radius'] =
$this->info['border-top-right-radius'] =
$this->info['border-bottom-left-radius'] =
$this->info['border-bottom-right-radius'] = new HTMLPurifier_AttrDef_CSS_Composite(array(
new HTMLPurifier_AttrDef_CSS_Length('0'),
new HTMLPurifier_AttrDef_CSS_Percentage(true)
));
$this->info['border-radius'] = new HTMLPurifier_AttrDef_CSS_Multiple($border_radius);
htmlpurifier drops border-color defined in rgb but not in hex
I solved my problem by creating a compound border attribute every time I set the border color, like this:
change: function(hex) {
//console.log(hex + ' - ' + opacity);
var curObj = window.curObj;
var inner = '#' + $(curObj).attr("id") + ' .object_inner';
$(inner).css('border-color', hex);
//hack for chrome to get around htmlpurifier bug dropping border-color defined in rgb on IMG tags.
var border_all = $(inner).css('border');
if (border_all == '') { //ff returns empty string so we'll have to uild our own compound object
var width = $(inner).css('border-top-width');
var color = $(inner).css('border-top-color');
$(inner).css('border','solid '+width+' ' + color);
}
else { //but for chrome it is enough to pull the compound out, then set it hard. The browser does the work.
$(inner).css('border',border_all);
}
}
htmlpurifier with an html5 doctype
No, HTML Purifier does not currently support HTML 5.
HtmlPurifier AutoParagraph + Html.Allowed
It's a bug. If you add 'div' to your Allowed list, you will have the desired effect.
It has been fixed in:
commit 0680832d41d4d5377ea3ea8d8c10fd574d2deb7e
Author: Edward Z. Yang
Date: Tue May 21 17:19:59 2013 -0700
Use info_parent_def to get parent information, since it may not be present in info array.
Signed-off-by: Edward Z. Yang
Detecting and preventing XSS, but allowing the html formatting
Any time you use arbitrary data in the context of HTML, you should be using htmlspecialchars()
. The reason for this is that it prevents your text content from being treated as HTML, which could potentially be malicious if coming from outside users. It also ensures you are generating valid HTML that browsers can handle consistently.
Suppose I want the text "8 > 3" to appear on in HTML. To do this, my HTML code would be 8 > 3
. The >
is encoded as >
so that it isn't misinterpreted as part of a tag.
Now, suppose I am making a web page about how to write HTML. I want the user to see the following:
<p>This is how to make a paragraph</p>
If I don't want <p>
and </p>
to be interpreted as an actual paragraph, but as text, you need to encode:
<p>This is how to make a paragraph</p>
htmlspecialchars()
does that. It allows you to insert arbitrary text into an HTML context in a safe way.
Now, in your second example:
$safe = "<div style='border-radius:45px; border-width: 2px; border-style: dashed; border-color: black;'><center><h4><b>$enrollmentno</b></h4></center></div>";
echo htmlspecialchars($safe, ENT_QUOTES);
This does exactly what you asked it to do. You gave it some text, and it encoded that. If you wanted it as HTML, you should have just echoed it.
Now, if you need to display HTML as HTML and it comes from an untrusted source (i.e. not you), then you need tools like HTMLPurifier. You do not need this if you trust the source. Running all your output through htmlspecialchars()
doesn't magically make things safe. You only need it when inserting arbitrary text data. Here's a good use case:
echo '<h1>Product Review from ', htmlspecialchars($username), '</h1>';
echo htmlspecialchars($reviewText);
In this case, both the username and review text can contain whatever that user typed in, and they will be encoded correctly for use in HTML.
Related Topics
How Automatically Adjust Div's Width Using CSS
How to Set Div Height to 100% of Chosen Print Paper
Is Position: Static Identical to Position: Relative, with No Other Properties Specified
Inheriting Height of a Child Node (Img Inside A)
Unwanted CSS Injected into Posts
How to Alternate The Number of Children Between Odd and Even Rows
How to Use CSS Rotate() in Th Table Tags
Chrome Not Loading CSS Source Maps
Configuring Compass on Windows
Is It Somehow Possible to Style an Iframes Before/After Pseudo-Element
CSS Background Color Extend as Far as Text
Loading Global SASS Files in Multiple Compass Projects
Apply a Different CSS Width Property Based on Browser? (Ie8, Ff)