javascript - .html() 方法是否自动编码 HTML?
问题描述
语境
我有一个网站,用户可以在其中撰写自己的文章。我使用了一个 contenteditable div,它允许用户标记他们的 HTML(粗体、斜体等),并且我想确保我能防止 XSS 攻击。为此,我htmlspecialchars()
在将数据输出到页面时使用。我想单独留下用户的输入数据并在输出时对其进行编码。但是,我使用该.html()
方法获取contenteditable div中的HTML内容,并且似乎用户插入的标签是由该.html()
方法或contenteditable div自动编码的。
contenteditable div的结构是
<div class="article" contenteditable="true"></div>
例如,如果用户尝试通过插入来对 contenteditable div 进行 XSS <script>alert('hi')</script>
,如下所示:
<div class="article" contenteditable="true">
<script>alert('hi')</script>
</div>
当我将数据提交到数据库时(使用var article = $(".article").html();
),我在数据库中看到的数据不是<script>alert('hi')</script>
,而是<script>alert('hi')</script>
尽管我自己没有编码任何东西。然后,我必须避免htmlspecialchars()
在输出文章内容时使用,以便 div 将字符串编码回其原始形式,而不是保持编码状态。
问题
该.html()
方法是否自动编码 HTML,如果是,如何阻止此功能(如果可取的话)?
解决方案
Ok Carson D,以下代码在我的旅行中让我受益匪浅。
这是源链接。如前所述,他们可能已将其更新为现代方法。如果您只想要一个独立功能,请module.exports =
从链接中的代码中删除该位,如下所示:
https://locutus.io/php/strings/htmlspecialchars_decode/
在 SO 的未来历史中,该链接可能会变得陈旧,因此这里是代码形式的代码,所有学分都已到期。这是我至少从 2013/14 开始使用的代码,因此它可能确实与链接中的代码不匹配,但我相信作者是相同的。
function htmlspecialchars_decode (string, quoteStyle) { // eslint-disable-line camelcase
// discuss at: https://locutus.io/php/htmlspecialchars_decode/
// original by: Mirek Slugen
// improved by: Kevin van Zonneveld (https://kvz.io)
// bugfixed by: Mateusz "loonquawl" Zalega
// bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
// bugfixed by: Brett Zamir (https://brett-zamir.me)
// bugfixed by: Brett Zamir (https://brett-zamir.me)
// input by: ReverseSyntax
// input by: Slawomir Kaniecki
// input by: Scott Cariss
// input by: Francois
// input by: Ratheous
// input by: Mailfaker (https://www.weedem.fr/)
// revised by: Kevin van Zonneveld (https://kvz.io)
// reimplemented by: Brett Zamir (https://brett-zamir.me)
// example 1: htmlspecialchars_decode("<p>this -> "</p>", 'ENT_NOQUOTES')
// returns 1: '<p>this -> "</p>'
// example 2: htmlspecialchars_decode("&quot;")
// returns 2: '"'
var optTemp = 0
var i = 0
var noquotes = false
if (typeof quoteStyle === 'undefined') {
quoteStyle = 2
}
string = string.toString()
.replace(/</g, '<')
.replace(/>/g, '>')
var OPTS = {
'ENT_NOQUOTES': 0,
'ENT_HTML_QUOTE_SINGLE': 1,
'ENT_HTML_QUOTE_DOUBLE': 2,
'ENT_COMPAT': 2,
'ENT_QUOTES': 3,
'ENT_IGNORE': 4
}
if (quoteStyle === 0) {
noquotes = true
}
if (typeof quoteStyle !== 'number') {
// Allow for a single string or an array of string flags
quoteStyle = [].concat(quoteStyle)
for (i = 0; i < quoteStyle.length; i++) {
// Resolve string input to bitwise e.g. 'PATHINFO_EXTENSION' becomes 4
if (OPTS[quoteStyle[i]] === 0) {
noquotes = true
} else if (OPTS[quoteStyle[i]]) {
optTemp = optTemp | OPTS[quoteStyle[i]]
}
}
quoteStyle = optTemp
}
if (quoteStyle & OPTS.ENT_HTML_QUOTE_SINGLE) {
// PHP doesn't currently escape if more than one 0, but it should:
string = string.replace(/�*39;/g, "'")
// This would also be useful here, but not a part of PHP:
// string = string.replace(/'|�*27;/g, "'");
}
if (!noquotes) {
string = string.replace(/"/g, '"')
}
// Put this in last place to avoid escape being double-decoded
string = string.replace(/&/g, '&')
return string
}
推荐阅读
- sql - 将SQL单行多列输出转换为两列(key, value)多行输出
- javascript - 如何使用 Laravel 处理 select2 倍数
- javascript - 通知用户有关 JavaScript 中的跨域重定向
- javascript - 进度条加载后加载页面
- javascript - 在 Top Tab Navigator 中自定义或修改 renderIndicator
- javascript - 如何在Vue cli中的浏览器后退按钮上进行分页和内容呈现?
- oracle - 使用 pl/sql 或 sql 将数据拆分到学生表中的多个列
- clang-format - 尽可能保持参数/参数在同一行
- php - 如何检查我的工作是否在分派后调用了句柄方法?
- spring-boot - redis:使用来自多个服务实例的 zset 中的元素