Bootstrap 3.4.1 sanitizer:允许弹出框内的进度条
Bootstrap 3.4.1 sanitizer: allow progress-bar inside a popover
Bootstrap 3.4.1 和 4.3.1 现在带有 sanitizer 来执行 XSS 预防。
我正在尝试允许所有必要的属性在基于 bootstrap 3.4.1 的 AdminLTE 的弹出窗口内呈现进度条。
使用 .popover({sanitize: false});
一切正常:
使用 bootstrap 文档中指定的自定义消毒剂白名单,不会显示进度条:
这是自定义白名单:
var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.div = ['role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'];
myDefaultWhiteList.span = ['class'];
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = ['colspan'];
console.log(myDefaultWhiteList);
$(function () {
$('[data-toggle="popover"]').popover({
whiteList: myDefaultWhiteList
});
});
这是我的弹出窗口的内容:
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="6" aria-valuemin="0"
aria-valuemax="10"
style="width: 60%">
<span class="sr-only">6/10</span>
</div>
</div>
<div class="no-padding">
<table class="table table-condensed therapy-popover-table">
<tbody>
<tr>
<td>Protocollo N°</td>
<td>837-2019PC</td>
</tr>
<tr>
<td>Codice prescrizione</td>
<td>93xxxx1</td>
</tr>
<tr>
<td>Prescrizione</td>
<td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td>
</tr>
<tr>
<td>Data evento lesivo</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Data prescrizione</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Priorità</td>
<td>Breve</td>
</tr>
<tr>
<td>Tipo prestazione</td>
<td>Privato</td>
</tr>
<tr>
<td colspan="2"><a href="/prescription/update/2602"><i class="fa fa-share-square"></i> Vai alla prescrizione</a></td>
</tr>
</tbody>
</table>
</div>
有人遇到过 bootstrap 消毒剂和自定义白名单的问题吗?
在我的,一切正常(表,colspan 属性等...)除了进度条...
该死。我忘记了 style
属性。
所以正确的角色是:
myDefaultWhiteList.div = ['style'];
因为'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'
已经定义在默认白名单中。
Bootstrap 3.4.1 和 4.3.1 现在带有 sanitizer 来执行 XSS 预防。
我正在尝试允许所有必要的属性在基于 bootstrap 3.4.1 的 AdminLTE 的弹出窗口内呈现进度条。
使用 .popover({sanitize: false});
一切正常:
使用 bootstrap 文档中指定的自定义消毒剂白名单,不会显示进度条:
这是自定义白名单:
var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList;
myDefaultWhiteList.div = ['role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'];
myDefaultWhiteList.span = ['class'];
myDefaultWhiteList.table = ['class'];
myDefaultWhiteList.tbody = [];
myDefaultWhiteList.tr = [];
myDefaultWhiteList.td = ['colspan'];
console.log(myDefaultWhiteList);
$(function () {
$('[data-toggle="popover"]').popover({
whiteList: myDefaultWhiteList
});
});
这是我的弹出窗口的内容:
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="6" aria-valuemin="0"
aria-valuemax="10"
style="width: 60%">
<span class="sr-only">6/10</span>
</div>
</div>
<div class="no-padding">
<table class="table table-condensed therapy-popover-table">
<tbody>
<tr>
<td>Protocollo N°</td>
<td>837-2019PC</td>
</tr>
<tr>
<td>Codice prescrizione</td>
<td>93xxxx1</td>
</tr>
<tr>
<td>Prescrizione</td>
<td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td>
</tr>
<tr>
<td>Data evento lesivo</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Data prescrizione</td>
<td>10/09/2019</td>
</tr>
<tr>
<td>Priorità</td>
<td>Breve</td>
</tr>
<tr>
<td>Tipo prestazione</td>
<td>Privato</td>
</tr>
<tr>
<td colspan="2"><a href="/prescription/update/2602"><i class="fa fa-share-square"></i> Vai alla prescrizione</a></td>
</tr>
</tbody>
</table>
</div>
有人遇到过 bootstrap 消毒剂和自定义白名单的问题吗? 在我的,一切正常(表,colspan 属性等...)除了进度条...
该死。我忘记了 style
属性。
所以正确的角色是:
myDefaultWhiteList.div = ['style'];
因为'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax'
已经定义在默认白名单中。