清理 HTML 输入

Question

I'm thinking of adding a rich text editor to allow a non-programmer to change the aspect of text. However, one issue is that it's possible to distort the layout of a rendered page if the markup is incorrect. What's a good lightweight way to sanitize html?

Answer 1

You will have to decide between good and lightweight. The recommended choice is 'HTMLPurifier', because it provide no-fuss secure defaults. As faster alternative it is often advised to use ' htmLawed '.

See also this quite objective overview from the HTMLPurifier author: http://htmlpurifier.org/comparison

Answer 2

我真的很喜欢HTML Purifier ，它允许您指定 HTML 代码中允许使用哪些标签和属性——并生成有效的 HTML。

Answer 3

Use BB codes (or like here on SO), otherwise chances are very slim. Example function...

function parse($string){

    $pattern = array(
    "/\[url\](.*?)\[\/url\]/",
    "/\[img\](.*?)\[\/img\]/",
    "/\[img\=(.*?)\](.*?)\[\/img\]/",
    "/\[url\=(.*?)\](.*?)\[\/url\]/",
    "/\[red\](.*?)\[\/red\]/",
    "/\[b\](.*?)\[\/b\]/",
    "/\[h(.*?)\](.*?)\[\/h(.*?)\]/",
    "/\[p\](.*?)\[\/p\]/",    
    "/\[php\](.*?)\[\/php\]/is"
    );

    $replacement = array(
    '<a href="\\1">\\1</a>',
    '<img alt="" src="\\1"/>',
    '<img alt="" class="\\1" src="\\2"/>',
    '<a rel="nofollow" target="_blank" href="\\1">\\2</a>',
    '<span style="color:#ff0000;">\\1</span>',
    '<span style="font-weight:bold;">\\1</span>',
    '<h\\1>\\2</h\\3>',
    '<p>\\1</p>',
    '<pre><code class="php">\\1</code></pre>'
    );

    $string = preg_replace($pattern, $replacement, $string);

    $string = nl2br($string);

    return $string;

}

...

echo parse("[h2]Lorem Ipsum[/h2][p]Dolor sit amet[/p]");

Result...

<h2>Lorem Ipsum</h2><p>Dolor sit amet</p>

Or just use HTML Purifier :)

Answer 4

Both HTML Purifier and htmLawed are good. htmLawed has the advantage of a much smaller footprint and high configurability. Besides doing the standard work of balancing tags, filtering specific HTML tags or their attributes or attribute content (through white or black lists), etc., it also allows the use of custom functions.

Answer 5

Using the HTML Sanitizer API it's easy to do:

// our input string to clean
const stringToClean = 'Some text <b><i>with</i></b> <blink>tags</blink>, including a rogue script <script>alert(1)</script> def.';

const result = new Sanitizer().sanitizeToString(stringToClean);
console.log(result);
// Logs: "Some text <b><i>with</i></b> <blink>tags</blink>, including a rogue script def."