From 1506307f2f903ce0f80155072a33345c702b7c76 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Jan 2019 16:48:38 +0100 Subject: Increase abuse length to 3000 And correctly handle new lines --- .../app/shared/renderer/html-renderer.service.ts | 35 +++++++ client/src/app/shared/renderer/index.ts | 3 + .../src/app/shared/renderer/linkifier.service.ts | 115 +++++++++++++++++++++ client/src/app/shared/renderer/markdown.service.ts | 79 ++++++++++++++ 4 files changed, 232 insertions(+) create mode 100644 client/src/app/shared/renderer/html-renderer.service.ts create mode 100644 client/src/app/shared/renderer/index.ts create mode 100644 client/src/app/shared/renderer/linkifier.service.ts create mode 100644 client/src/app/shared/renderer/markdown.service.ts (limited to 'client/src/app/shared/renderer') diff --git a/client/src/app/shared/renderer/html-renderer.service.ts b/client/src/app/shared/renderer/html-renderer.service.ts new file mode 100644 index 000000000..d49df9b6d --- /dev/null +++ b/client/src/app/shared/renderer/html-renderer.service.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core' +import { LinkifierService } from '@app/shared/renderer/linkifier.service' +import * as sanitizeHtml from 'sanitize-html' + +@Injectable() +export class HtmlRendererService { + + constructor (private linkifier: LinkifierService) { + + } + + toSafeHtml (text: string) { + // Convert possible markdown to html + const html = this.linkifier.linkify(text) + + return sanitizeHtml(html, { + allowedTags: [ 'a', 'p', 'span', 'br' ], + allowedSchemes: [ 'http', 'https' ], + allowedAttributes: { + 'a': [ 'href', 'class', 'target' ] + }, + transformTags: { + a: (tagName, attribs) => { + return { + tagName, + attribs: Object.assign(attribs, { + target: '_blank', + rel: 'noopener noreferrer' + }) + } + } + } + }) + } +} diff --git a/client/src/app/shared/renderer/index.ts b/client/src/app/shared/renderer/index.ts new file mode 100644 index 000000000..39202b385 --- /dev/null +++ b/client/src/app/shared/renderer/index.ts @@ -0,0 +1,3 @@ +export * from './html-renderer.service' +export * from './linkifier.service' +export * from './markdown.service' diff --git a/client/src/app/shared/renderer/linkifier.service.ts b/client/src/app/shared/renderer/linkifier.service.ts new file mode 100644 index 000000000..2529c9eaf --- /dev/null +++ b/client/src/app/shared/renderer/linkifier.service.ts @@ -0,0 +1,115 @@ +import { Injectable } from '@angular/core' +import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' +// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged? +const linkify = require('linkifyjs') +const linkifyHtml = require('linkifyjs/html') + +@Injectable() +export class LinkifierService { + + static CLASSNAME = 'linkified' + + private linkifyOptions = { + className: { + mention: LinkifierService.CLASSNAME + '-mention', + url: LinkifierService.CLASSNAME + '-url' + } + } + + constructor () { + // Apply plugin + this.mentionWithDomainPlugin(linkify) + } + + linkify (text: string) { + return linkifyHtml(text, this.linkifyOptions) + } + + private mentionWithDomainPlugin (linkify: any) { + const TT = linkify.scanner.TOKENS // Text tokens + const { TOKENS: MT, State } = linkify.parser // Multi tokens, state + const MultiToken = MT.Base + const S_START = linkify.parser.start + + const TT_AT = TT.AT + const TT_DOMAIN = TT.DOMAIN + const TT_LOCALHOST = TT.LOCALHOST + const TT_NUM = TT.NUM + const TT_COLON = TT.COLON + const TT_SLASH = TT.SLASH + const TT_TLD = TT.TLD + const TT_UNDERSCORE = TT.UNDERSCORE + const TT_DOT = TT.DOT + + function MENTION (this: any, value: any) { + this.v = value + } + + linkify.inherits(MultiToken, MENTION, { + type: 'mentionWithDomain', + isLink: true, + toHref () { + return getAbsoluteAPIUrl() + '/services/redirect/accounts/' + this.toString().substr(1) + } + }) + + const S_AT = S_START.jump(TT_AT) // @ + const S_AT_SYMS = new State() + const S_MENTION = new State(MENTION) + const S_MENTION_DIVIDER = new State() + const S_MENTION_DIVIDER_SYMS = new State() + + // @_, + S_AT.on(TT_UNDERSCORE, S_AT_SYMS) + + // @_* + S_AT_SYMS + .on(TT_UNDERSCORE, S_AT_SYMS) + .on(TT_DOT, S_AT_SYMS) + + // Valid mention (not made up entirely of symbols) + S_AT + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + S_AT_SYMS + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + // More valid mentions + S_MENTION + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_COLON, S_MENTION) + .on(TT_NUM, S_MENTION) + .on(TT_UNDERSCORE, S_MENTION) + + // Mention with a divider + S_MENTION + .on(TT_AT, S_MENTION_DIVIDER) + .on(TT_SLASH, S_MENTION_DIVIDER) + .on(TT_DOT, S_MENTION_DIVIDER) + + // Mention _ trailing stash plus syms + S_MENTION_DIVIDER.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) + S_MENTION_DIVIDER_SYMS.on(TT_UNDERSCORE, S_MENTION_DIVIDER_SYMS) + + // Once we get a word token, mentions can start up again + S_MENTION_DIVIDER + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + + S_MENTION_DIVIDER_SYMS + .on(TT_DOMAIN, S_MENTION) + .on(TT_LOCALHOST, S_MENTION) + .on(TT_TLD, S_MENTION) + .on(TT_NUM, S_MENTION) + } +} diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts new file mode 100644 index 000000000..07017eca5 --- /dev/null +++ b/client/src/app/shared/renderer/markdown.service.ts @@ -0,0 +1,79 @@ +import { Injectable } from '@angular/core' + +import * as MarkdownIt from 'markdown-it' + +@Injectable() +export class MarkdownService { + static TEXT_RULES = [ + 'linkify', + 'autolink', + 'emphasis', + 'link', + 'newline', + 'list' + ] + static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ]) + + private textMarkdownIt: MarkdownIt.MarkdownIt + private enhancedMarkdownIt: MarkdownIt.MarkdownIt + + constructor () { + this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES) + this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES) + } + + textMarkdownToHTML (markdown: string) { + if (!markdown) return '' + + const html = this.textMarkdownIt.render(markdown) + return this.avoidTruncatedTags(html) + } + + enhancedMarkdownToHTML (markdown: string) { + if (!markdown) return '' + + const html = this.enhancedMarkdownIt.render(markdown) + return this.avoidTruncatedTags(html) + } + + private createMarkdownIt (rules: string[]) { + const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true }) + + for (let rule of rules) { + markdownIt.enable(rule) + } + + this.setTargetToLinks(markdownIt) + + return markdownIt + } + + private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) { + // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer + const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) { + return self.renderToken(tokens, idx, options) + } + + markdownIt.renderer.rules.link_open = function (tokens, index, options, env, self) { + const token = tokens[index] + + const targetIndex = token.attrIndex('target') + if (targetIndex < 0) token.attrPush([ 'target', '_blank' ]) + else token.attrs[targetIndex][1] = '_blank' + + const relIndex = token.attrIndex('rel') + if (relIndex < 0) token.attrPush([ 'rel', 'noopener noreferrer' ]) + else token.attrs[relIndex][1] = 'noopener noreferrer' + + // pass token to default renderer. + return defaultRender(tokens, index, options, env, self) + } + } + + private avoidTruncatedTags (html: string) { + return html.replace(/\*\*?([^*]+)$/, '$1') + .replace(/]+>([^<]+)<\/a>\s*...((<\/p>)|(<\/li>)|(<\/strong>))?$/mi, '$1...') + .replace(/\[[^\]]+\]?\(?([^\)]+)$/, '$1') + + } +} -- cgit v1.2.3