Rails HTML sanitizer (Loofah) 在元素之间添加了不需要的换行符答案

【问题标题】：Rails HTML sanitizer (Loofah) adds unwanted line breaks between elementsRails HTML sanitizer (Loofah) 在元素之间添加了不需要的换行符
【发布时间】：2018-12-07 18:07:52
【问题描述】：

Rails 的内置 HTML 清理程序（使用 gem Loofah）在 <ul> 和 <li> 标记之间添加换行符。我想用white-space: pre-wrap; 显示经过清理的内容，因为它来自所见即所得的编辑器，但是额外的换行符会使输出看起来错误。期望在顶部，实际在底部，背景颜色添加到 ul 以强调：

当我通过 rails 控制台中的 sanitize 运行一些代码时，会发生以下情况：

2.2.2 :033 > input = "<ul><li>a</li><li>b</li></ul>"
 => "<ul><li>a</li><li>b</li></ul>"
2.2.2 :034 > WhiteListSanitizer.new.sanitize(input)
 => "<ul>\n<li>a</li>\n<li>b</li>\n</ul>"

如果我创建一个丝瓜络对象并将其转换为 html 而不进行擦除，它仍然会添加换行符。

2.2.2 :035 > Loofah.fragment(input).to_html
 => "<ul>\n<li>a</li>\n<li>b</li>\n</ul>"

如何让它不留空白？

如果绝对必要，我可以使用正则表达式去除换行符，但似乎很奇怪，没有选项可以禁用此行为。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-4 sanitization sanitize

【解决方案1】：

您需要从DEFAULT_HTML 选项中排除FORMAT option（两者都属于Nokogiri）：

input = "<ul><li>a</li><li>b</li></ul>"
disable_formatting = Nokogiri::XML::Node::SaveOptions::DEFAULT_HTML ^ Nokogiri::XML::Node::SaveOptions::FORMAT
Loofah.fragment(input).to_html(save_with: disable_formatting)
# => "<ul><li>a</li><li>b</li></ul>"

【讨论】：

【解决方案2】：

看起来 Loofah 实际上是在幕后使用 Nokogiri，它默认显示格式化/缩进的 html——因此是换行符。我发现 another (similar) question 关于 Nokogiri 的这种行为，下面是我相信适用于您的情况的代码：

Loofah.fragment(input).to_html(:save_with => 
Nokogiri::XML::Node::SaveOptions::AS_XML | 
Nokogiri::XML::Node::SaveOptions::NO_DECLARATION).strip

【讨论】：

【解决方案3】：

代替 Rails 的内置 HTML 清理器

ActionController::Base.helpers.sanitize('<script/><ul><li>111</li><li>222</li></ul>', tags: %w(p br ul ol li a), attributes: %w(href))
#=> "<ul>\n" + "<li>111</li>\n" + "<li>222</li>\n" + "</ul>"

丝瓜可以直接使用

loofah_fragment = Loofah.fragment('<script/><ul><li>111</li><li>222</li></ul>')
scrubber = Rails::Html::PermitScrubber.new
scrubber.tags = %w(p br ul ol li a)
scrubber.attributes = %w(href)
unformatted_html = Nokogiri::XML::Node::SaveOptions.class_eval { |m| m::DEFAULT_HTML ^ m::FORMAT }
loofah_fragment.scrub!(scrubber).to_html(save_with: unformatted_html)
#=> "<ul><li>111</li><li>222</li></ul>"

【讨论】：