Как отобразить гиперссылку внутри строки из переменной в Pug, не отменяя экранирование остальной части текста? - PullRequest
Новая
       26

Как отобразить гиперссылку внутри строки из переменной в Pug, не отменяя экранирование остальной части текста?

0 голосов
/ 19 июня 2020

Представьте, что ваш пользователь пишет сообщение и включает одну или две гиперссылки где-нибудь в тексте. Все это сохраняется в базе данных в виде строки. Чтобы отобразить контент и сделать ссылки доступными для кликов, нужно сделать следующее: 

const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
let content = userInput = "Hey everybody, look at this cool site I found: http://www.cool-site.com"
let url = content.match(urlRegex);
.postContents !{content.replace(url[0], `<a href="${url[0]}">${url[0]}</a>`)}

Маркер! {} Гарантирует, что Pug рассматривает теги html так, как они есть. Однако такой подход непрактичен. Злоумышленник может легко опубликовать <a href="www.u-r-hacked.com">Click me!</a>, и Паг возьмет эту строку и отобразит ее, потому что содержимое не экранируется. С другой стороны, если я экранирую содержимое, рекурсивно добавленный тег <a href="blahblah">blahblah</a> будет рассматриваться как текст, и никакие ссылки не будут доступны для нажатия. Одно из решений, о котором я подумал, - это разложить всю строку на массив слов, чтобы позже перекомпоновать ее снова, используя # {} для не-URL-адресов и! {} Для URL-адресов, хотя это кажется довольно сложным для проблемы, с которой могли столкнуться многие другие разработчики. уже.

Примечание: я знаю, что код не перебирает все совпадающие URL. Я выясню это позже. Моя проблема сейчас состоит в том, чтобы найти способ безопасного "URL-адреса" текста.

1 Ответ

0 голосов
/ 19 июня 2020

Вы можете использовать существующий пакет, например linkify-urls, и передать его Pug для использования во время компиляции: 

const linkifyUrls = require('linkify-urls');

app.get('/', function(req, res, next) {
  res.render('index', { linkifyUrls });
});

.postContents!= linkifyUrls(userInput)
...