Получение WordPress сообщений с реакции показывает специальные символы вместо апостроф - PullRequest
Новая
       44

Получение WordPress сообщений с реакции показывает специальные символы вместо апостроф

0 голосов
/ 24 апреля 2020

Я получаю то, что я предполагаю, это json данные из конечной точки блога WordPress, например:

https://example.com/wp-json/wp/v2/posts

Я перебираю и показываю плитки на данный момент: 

<div>{posts && posts.map((post) => <h1>{post.title.rendered}</h1>)}</div>

Но заголовки сообщений не отображаются должным образом. Например, слово Не показывает Don&#8217;t

Я обнаружил, что могу использовать dangerouslySetInnerHTML, чтобы решить эту проблему, но безопасно ли это? Тот факт, что в нем есть слово «опасно», вызывает беспокойство.

1 Ответ

1 голос
/ 24 апреля 2020

Я считаю, что dangerouslySetInnerHTML - это способ go об этом, но я go расскажу более подробно о том, почему «опасно» находится в «опасно множестве HTML», и, надеюсь, это поможет вам сделать информированный решение для вашей ситуации.

То, что делает dangerouslySetInnerHTML, представляет любую строку HTML, переданную ему в элементе DOM.

Например: 

<h1 dangerouslySetInnerHTML={{__html: post.title.rendered}} />

(кроме того, обратите внимание, что у клавиши __html есть два подчеркивания)

Правильно отобразит строку Don&#8217;t в Don't.

Это все довольно безопасно, однако, если, например, значение post.title.rendered может быть установлено ненадежной стороной (такой как произвольный пользователь), и если этот произвольный пользователь хотел сделать при некотором повреждении они могут ввести строку, такую ​​как: 

<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>

Этот код будет затем выполняться браузером при загрузке страницы - поскольку React сгенерировал бы следующий DOM: 

<h1>
   <script type="text/javascript>
   // Do evil stuff
   console.log('I did some evil stuff');
   </script>
</h1>

Итак, учитывая все это, если вы уверены , что значение этого поля находится в пределах вашего элемента управления (и никого другого), и вы также знайте , что в этих строках не будет произвольного кода, затем go вперед и используйте dangerouslySetInnerHTML.

Однако, если есть вероятность, что кто-то, кроме вас, может манипулировать этим полем, я вместо этого будет выглядеть что-то вроде decode- * 104 3 * -entities - таким образом вы можете получить желаемую презентацию, не ставя под угрозу ваше приложение / пользователей.

...