如何让用户输入的内容支持html语法?

Published on:

这次jd-store魔改大赛我卖的是大神的教程,当时我能想到的是,用跳转链接的方式实现,但我们的text栏位的内容是识别不了链接的,出来只是一串字符。

最后,接受@lubiao同学的折中方案,用二维码图片代码链接。让用户自己拿出手机扫二维码。

当然,我知道这种体验也他妈太差了,用户好不容易发现了一个教程,他妈的才发现是个二维码,鬼才想扫你的二维码呢。

后来,@megy 提供了另外一种思路,直接把教程做成网页,不引用后台卖者输入的内容。

真是个好方法,不过太麻烦,如果产品少还好,多了就没法做,负担太大。

今天,比赛快结束,才想起来请教一下@YY老师。

老师给我的建议是google,搜索“rails html doesn't work text”。

好方法,虽然我此前尝试过google,但关键词选的不对。

然后,我尝试用不同的关键词试了一下,最后用这个关键词“rails text recognize html”,找到我想要的内容。

首先是找到了stack overflow上的一个问答:

ok,先试试html_safe。

果然有用,在后台添
加内容时用html的a标签,比如:

具体请戳此鏈接跳转
<a href=‘http://yy4ever.logdown.com/posts/1069287' target=‘_blank’>logdown</a >

出来的效果就是这样:

但是这个安全吗?我查了一下apidock:

果然,这样没办法确认用户发来的链接中是否有恶意的内容。

也有人说 raw 会比较安全:

具体的写法是,拿用户发来的评论内容举例,可以这么写:

<h4><%= comment.body.html_safe %></h4>
<h4><%= raw(comment.body) %></h4>

事实上,最安全的写法是用sanitize配合增加白名单使用。

<h4><%= sanitize comment.body %></h4>

sanitize白名单如下:

允许的 HTML 标籤 strong em b i p code pre tt samp kbd var sub sup dfn cite big small address hr br div span h1 h2 h3 h4 h5 h6 ul ol li dl dt dd abbr acronym a img blockquote del ins
允许的 HTML 属性 href src width height alt cite datetime title class name xml:lang abbr

如何想要支持更多的属性,可以在config/application.rb中增加,比如我们想增加 table和 style:

+  config.action_view.sanitized_allowed_tags = Rails::Html::WhiteListSanitizer.allowed_tags + %w(table tr td)
+  config.action_view.sanitized_allowed_attributes = Rails::Html::WhiteListSanitizer.allowed_attributes + %w(style border)

最后,这个是我的参赛作品页面: Yammy 的 JD-Store 商店创意大赛作品 | 新生大学全栈营


Relevant links please refer to :

1.https://stackoverflow.com/questions/2831072/in-rails-how-can-i-allow-some-html-in-a-text-area
2.sanitize (ActionView::Helpers::SanitizeHelper) - APIdock
3.html_safe (String) - APIdock
4.When to use raw() and when to use .html_safe
5.https://makandracards.com/makandra/2579-everything-you-know-about-html_safe-is-wrong

Comments

comments powered by Disqus