Bootstrap 3.4.1 sanitizer:允许在弹出窗口中使用进度条 [英] Bootstrap 3.4.1 sanitizer: allow progress-bar inside a popover

问题描述

Bootstrap 3.4.1 和 4.3.1 现在带有

使用引导程序文档中指定的自定义消毒剂白名单，不显示进度条:

这是自定义白名单:

 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'];控制台日志(myDefaultWhiteList)；$(函数(){$('[data-toggle="popover"]').popover({白名单:myDefaultWhiteList});});

这是我弹出框的内容:

<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"aria-valuenow="6" aria-valuemin="0"aria-valuemax="10"样式=宽度:60%"><span class="sr-only">6/10</span>

<div class="no-padding"><table class="table table-condensedtherapy-popover-table"><tr><td>Protocollo N°</td><td>837-2019PC</td></tr><tr><td>Codice prescrizione</td><td>93xxxx1</td></tr><tr><td>处方</td><td><small>IDROCHINESITERAPIA INDIVIDUALE (9xxxx1) (30')</small></td></tr><tr><td>数据事件到 lesivo</td><td>10/09/2019</td></tr><tr><td>数据规定</td><td>10/09/2019</td></tr><tr><td>优先事项</td><td>布雷夫</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>

有人遇到过引导程序清理程序和自定义白名单的问题吗?在我中，除了进度条之外，一切正常(表格、colspan 属性等...)...

解决方案

该死.我忘记了 style 属性.

所以正确的角色是:

myDefaultWhiteList.div = ['style'];

因为'role'、'aria-valuenow'、'aria-valuemin'、'aria-valuemax' 已经在默认白名单中定义.

Bootstrap 3.4.1 and 4.3.1 now comes with a sanitizer to perform XSS prevention. I'm trying to allow all the necessary attributes to render a progress bar inside the popover of an AdminLTE based on bootstrap 3.4.1. With .popover({sanitize: false}); everything works as expected:

With a custom sanitizer whitelist, as specified on the bootstrap docs, the progress bar is't displayed:

This is the custom whitelist:

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

And this is the content of my popover:

<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>

Does anyone experienced a problem with bootstrap sanitizer and custom whitelist? In my, everything works (tables, colspan attributes, etc...) except the progress bar...

解决方案

Shit. I forgot the style attribute.

So the right role is:

myDefaultWhiteList.div = ['style'];

because 'role', 'aria-valuenow', 'aria-valuemin', 'aria-valuemax' are already defined in the default whitelist.

这篇关于Bootstrap 3.4.1 sanitizer:允许在弹出窗口中使用进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！