Должен ли я разрешать содержимое, содержащее теги скриптов (из базы данных wordpress), динамически вставляться в html в моем приложении?

Question

Я создаю приложение для местной интернет-газеты.

У них есть существующий веб-сайт, который является сайтом wordpress, где они загружают новостные сюжеты (сообщения Wordpress).

Единственные люди, загружающие новости, - это журналисты внутри компании.

В одном из основных разделов приложения, которое я создаю, я подключаюсь к этой базе данных wordpress (с файлом php на том же сервере) и извлекаю содержимое новостей для отображения в приложении. Я сам создал эту службу с помощью php и использовал javascript для вставки в html на стороне клиента.

Я читал информацию о безопасности (включая OWASP cheat sheet for XSS prevention) и предпринимал необходимые шаги для обеспечения максимальной безопасности в приложении, включая кодирование данных, перед вставкой в ​​html. Однако некоторые из содержания, поступающего из базы данных содержит HTML и это где мое беспокойство/вопрос является (более подробно об этом впереди)

Вот поток приложения:

Установить соединение ПДО с (также устанавливая кодировку для utf-8 и setAttribute(PDO::ATTR_EMULATE_PREPARES, false);), как указано here для защиты от SQL-инъекции.

<?php 
include_once 'wp_psl_config.php'; 
//initiate a PDO connection 
$pdoConnection = new PDO(HOSTDBNAME, USER, PASSWORD); 
$pdoConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
$pdoConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$pdoConnection->exec("SET CHARACTER SET utf8"); 
?> 

Я использую параметризованные запросы и подготовленные заявления для получения новостей следующим образом:

function getStoryData($story_id, $pdoConnection){  
    $data = array();  
    $query ='SELECT * FROM wp_posts WHERE ID=:story_id'; 

    $statement = $pdoConnection->prepare($query);  
    $statement->bindValue(':story_id', $story_id, PDO::PARAM_INT); 
    $statement->execute(); 
    $statement->setFetchMode(PDO::FETCH_ASSOC); 
    //store content into $data array 
    return $data; 
} 

На стороне клиента я использую OWASP ESAPI javascript library для кодирования контента, прежде чем вставлять в HTML. Я использую функцию encodeForHTML() для кодирования post_title, post_excerpt, post_date и т. Д. (Перед вставкой в ​​мой html) , так как они не содержат html, который нужно визуализировать.

Вот пример моего Javascript/JQuery код для создания и вставки HTML:

var safe_post_title = $ESAPI.encoder().encodeForHTML(post_title); 
var safe_story_html = '<h3 class="story_headline">' + safe_post_title + '</h3>';   
$('#story_area').html(safe_story_html); 

Однако POST_CONTENT поле WordPress (который содержит основное содержание рассказа) содержит множество различных HTML элементов, а также теги сценария и поэтому это то, о чем я беспокоюсь.

Вот пример данных в WordPress POST_CONTENT поле:

Line of text... more text... more text. 
more text... 
If you're not sure who represents you, you can find out 
<a href="http://example.com/">here</a>. 

<h5>Search here:</h5> 

<div id="ragic_webview"></div> 

<script type="text/javascript">// <![CDATA[ 

var ragic_url = 'www.ragic.com/companyname/sheets/3'; 
var ragic_feature= 'fts'; 
var exactMatch = true; 

/* * * DON'T EDIT BELOW THIS LINE * * */ 

(function() { 
var rq = document.createElement('script'); 
rq.type = 'text/javascript'; 
rq.async = true; 
rq.src = window.location.protocol == "https:" ? "https://www.ragic.com/intl/common/loadfts.js" : "http://www.ragic.com/intl/common/loadfts.js"; 

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(rq); 

})(); 


// ]]> 
</script> 

<noscript>Please enable JavaScript to view the <a href="http://www.ragic.com/?ref_noscript">Online database form by Ragic.</a></noscript> 
<a id="ragic-link" href="http://www.ragic.com">online database form by <span class="logo-ragic">Ragic</span></a> 

Другой пример данных POST_CONTENT:

Line of text... more text... more text. 
more text... 

<script id="infogram_0_housing_list_by_area" src="//e.infogr.am/js/embed.js?c5h" type="text/javascript"></script> 


<div style="width: 100%; padding: 8px 0; font-family: Arial; font-size: 13px; line-height: 15px; text-align: center;"> 

<a style="color: #989898; text-decoration: none;" href="https://infogr.am/housing_list_by_area" target="_blank">Housing List, by Area</a> <span class="break_between_paragraphs"></span> 

<a style="color: #989898; text-decoration: none;" href="https://infogr.am" target="_blank"> 

Create your own infographics</a> 
</div> 

Некоторые основные вопросы, у меня есть:

1. У компании есть антиспам на своем сайте Wordpress. Означает ли это, что уменьшает заботу о безопасности при отображении этого содержимого в приложении?

2. Кроме того, Должен ли я разрешать теги сценария вообще?

3. В целом, можете ли вы дать мне несколько советов о том, что является самым надежным способом отображения этих данных. Я просмотрел html purifier. Это хороший вариант?

Answer 1

Компания имеет антиспам на своем сайте Wordpress. Уменьшает ли это проблему безопасности при отображении этого содержимого в приложении?

Даже немного. Плагины для защиты от спама WordPress позволяют просматривать только комментарии.

Кроме того, Должен ли я разрешать теги сценария вообще?

Это будет зависеть от вашего варианта использования. Ваш пример сообщения, по всей видимости, включают <script> теги, которые были преднамеренно вставлены как часть поста, поэтому вам может понадобиться, чтобы оставить их.

В целом, вы можете дать мне несколько советов о том, что это самый безопасный способ для отображения эти данные. Я просмотрел html очиститель. Это хороший вариант?

В общем, да. HTML Purifier - хороший способ борьбы с ненадежным HTML.

В этом конкретном случае, вероятно, нет. Из того, что вы описали, содержимое HTML все написано пользователями со специальным доступом к приложению (журналистам) - это надежный ввод и, возможно, его не нужно фильтровать.