我在考虑添加一个富文本编辑器,让非程序员也能够改变文本的样式。然而,问题是如果标记不正确,可能会扭曲渲染页面的布局。有没有一种良好的轻量级方法来清理HTML代码?
我在考虑添加一个富文本编辑器,让非程序员也能够改变文本的样式。然而,问题是如果标记不正确,可能会扭曲渲染页面的布局。有没有一种良好的轻量级方法来清理HTML代码?
你需要在优秀和轻量之间做出选择。推荐的选择是 'HTMLPurifier',因为它提供了易于使用、安全的默认设置。作为更快速的替代方案,通常建议使用 'htmLawed'。
此外,请参阅 HTMLPurifier 作者提供的这篇相当客观的概述:http://htmlpurifier.org/comparison
使用BB代码(或像SO这样的网站),否则成功的机会非常小。 示例函数...
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]");
结果...
<h2>Lorem Ipsum</h2><p>Dolor sit amet</p>
或者只需使用HTML Purifier :)
[img]http://picture.of.a/pony.png" onload="execute(); arbitrary(); javascript();[/img]
会产生什么结果。 - Lauren无论是HTML Purifier还是htmLawed都很好。 htmLawed 拥有更小的占用空间和更高的可配置性优势。除了做标签平衡、过滤特定的HTML标签或它们的属性或属性内容(通过白名单或黑名单等),它还允许使用自定义函数。
使用HTML Sanitizer API很容易实现:
// 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."