javascript - 我是否应该允许包含脚本标签(来自 WordPress 数据库)的内容动态插入到我的应用程序中的 html 中？

Question

我正在为本地一家在线报纸公司构建一个应用程序。

他们有一个现有的网站，该网站是一个 WordPress 网站，他们在其中上传新闻报道(WordPress 帖子)。

唯一上传新闻报道的人是公司内部的记者。

在我正在构建的应用程序的主要部分之一中，我连接到此 WordPress 数据库(在同一服务器上有一个 php 文件)并检索要显示的新闻报道内容在应用程序内。我自己用 php 构建了这个服务，并使用 javascript 插入到客户端的 html 中。

我一直在阅读有关安全性的内容(包括 OWASP cheat sheet for XSS prevention )，并采取必要的步骤在应用程序中实现最大的安全性，包括在插入 html 之前对数据进行编码。然而，来自数据库的一些内容包含 html，这就是我关心/问题所在(更多详细信息即将到来)

这是应用程序的流程:

与 wordpress 数据库建立 PDO 连接(同时将字符集设置为 utf-8。并 setAttribute(PDO::ATTR_EMULATE_PREPARES, false);)，如所述 here用于防止 SQL 注入(inject)。

<?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);

然而，wordpress post_content 字段(包含主要故事内容)包含许多不同的 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

The company have an anti spam on their wordpress site. Does this lessen the security concern for me when displaying this content in the app?

一点也没有。 WordPress 反垃圾邮件插件仅屏蔽评论。

Also, Should I allow the script tags at all?

这取决于您的用例。您的示例帖子似乎包括 <script>作为帖子的一部分有意插入的标签，因此您可能需要将它们保留在其中。

Overall, can you give me some advice on what is the most secure way to display this data. I have looked into html purifier. Is this a good option?

总的来说，是的。 HTML Purifier 是处理不受信任的 HTML 的好方法。

在这个具体情况下，可能不会。根据您的描述，HTML 内容都是由对应用程序具有特殊访问权限的用户(记者)编写的 - 它是受信任的输入，可能不需要过滤。