ページダウンエディターを使用しています。プレビューを生成するために使用しているコードは次のとおりです。
$(document).ready(function () {
var previewConverter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(previewConverter);
editor.run();
});
入力にテキストを入力している間:
動的に生成された出力プレビューは期待どおりになり、次のようになります。
次に、コンテンツ (以下に示す純粋な入力テキスト) がデータベースに保存されます。
"http://www.google.com\n\n<script>alert('hi');</script>\n\n[google][4]\n\n\n [1]: http://www.google.com"
サーバー側では、ページがレンダリングされる前に、このmarkdownsharp ライブラリ v1.13.0.0を使用して、データベース テキストから取得したテキストを変換しています。変換後、ここで見つけた Jeff Atwood のコードを使用して html をサニタイズしています。
private static Regex _tags = new Regex("<[^>]*(>|$)",
RegexOptions.Singleline | RegexOptions.ExplicitCapture | RegexOptions.Compiled);
private static Regex _whitelist = new Regex(@"
^</?(b(lockquote)?|code|d(d|t|l|el)|em|h(1|2|3)|i|kbd|li|ol|p(re)?|s(ub|up|trong|trike)?|ul)>$|
^<(b|h)r\s?/?>$",
RegexOptions.Singleline | RegexOptions.ExplicitCapture | RegexOptions.Compiled | RegexOptions.IgnorePatternWhitespace);
private static Regex _whitelist_a = new Regex(@"
^<a\s
href=""(\#\d+|(https?|ftp)://[-a-z0-9+&@#/%?=~_|!:,.;\(\)]+)""
(\stitle=""[^""<>]+"")?\s?>$|
^</a>$",
RegexOptions.Singleline | RegexOptions.ExplicitCapture | RegexOptions.Compiled | RegexOptions.IgnorePatternWhitespace);
private static Regex _whitelist_img = new Regex(@"
^<img\s
src=""https?://[-a-z0-9+&@#/%?=~_|!:,.;\(\)]+""
(\swidth=""\d{1,3}"")?
(\sheight=""\d{1,3}"")?
(\salt=""[^""<>]*"")?
(\stitle=""[^""<>]*"")?
\s?/?>$",
RegexOptions.Singleline | RegexOptions.ExplicitCapture | RegexOptions.Compiled | RegexOptions.IgnorePatternWhitespace);
/// <summary>
/// sanitize any potentially dangerous tags from the provided raw HTML input using
/// a whitelist based approach, leaving the "safe" HTML tags
/// CODESNIPPET:4100A61A-1711-4366-B0B0-144D1179A937
/// </summary>
public static string Sanitize(string html)
{
if (String.IsNullOrEmpty(html)) return html;
string tagname;
Match tag;
// match every HTML tag in the input
MatchCollection tags = _tags.Matches(html);
for (int i = tags.Count - 1; i > -1; i--)
{
tag = tags[i];
tagname = tag.Value.ToLowerInvariant();
if(!(_whitelist.IsMatch(tagname) || _whitelist_a.IsMatch(tagname) || _whitelist_img.IsMatch(tagname)))
{
html = html.Remove(tag.Index, tag.Length);
System.Diagnostics.Debug.WriteLine("tag sanitized: " + tagname);
}
}
return html;
}
変換とサニタイズ プロセスは次のとおりです。
var md = new MarkdownSharp.Markdown();
var unsafeHtml = md.Transform(content);
var safeHtml = Sanitize(unsafeHtml);
return new HtmlString(safeHtml);
unsafeHtml
含む
"<p>http://www.google.com</p>\n\n<script>alert('hi');</script>\n\n<p><a href=\"http://www.google.com\">google</a></p>\n"
safeHtml
含む
"<p>http://www.google.com</p>\n\nalert('hi');\n\n<p><a href=\"http://www.google.com\">google</a></p>\n"
これは次のようにレンダリングされます。
したがって、サニタイズと 2 番目のリンクは期待どおりに変換されました。残念ながら、最初のリンクはもはやリンクではなく、単なるテキストです。これを修正するには?
おそらくより良いアプローチは、サーバー側の変換を使用するのではなく、javascript を使用してページにマークダウン テキストをレンダリングすることですか?