Jquery +datatables导致内联样式的CSP错误

Question

我一直试图从 CSP style-src 标头中删除 unsafe-inline，因为它很容易受到攻击。 在删除它时，我在 chrome 中执行 jQuery 时遇到以下错误：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' 'nonce-TXYxR0tlamZ1emk2a3Y4RHFwdTdTZ0JaR1R2TTdEaUk=' 'unsafe-eval' ”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-Z0MkpGRk0/9QW+7eJ/G1D//1i6WKVbat+HlIwkiFln4=”）或随机数（“nonce-...”）

在调试时我发现它失败了

来自 jquery 3.5.1

    tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ]; 

在 buildFragment 方法中。 在失败点，elem 被评估为包含 tr 的 html 的字符串，该 tr 包含由数据表生成的内联样式。即使数据表似乎正在应用 CSP 安全方式，如下所示，但是当它被传递回 jQuery 时，整个 TR 包含内联样式加载为由于不安全内联而失败的 innerHTML

来自 datatables.js 1.10.21

_fnApplyToChildren( function(nSizer, i) {
            nSizer.innerHTML = '<div class="dataTables_sizing">'+footerContent[i]+'</div>';
            nSizer.childNodes[0].style.height = "0";
            nSizer.childNodes[0].style.overflow = "hidden";
            nSizer.style.width = footerWidths[i];
        }, footerSrcEls );
    }

如上所示，数据表以 CSP 可接受的方式应用内联样式，因为它们直接在元素样式属性上应用样式属性 下面是在包含内联样式的 jquery buildFragment 方法中的“elem”中评估的运行时值

<tr role="row"><th class="dataGridCheckBoxCell sorting" aria-controls="tablegrid" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 41px;" role="columnheader"><div class="dataTables_sizing" **style="height: 0px; overflow: hidden;"**><div id="checkAllQueues" class="selectable" role="checkbox"></div>

我不确定这是数据表问题还是 jquery 问题或两者兼而有之。 对此问题的任何见解或任何可以应用的解决方法都会有所帮助

Answer 1

是的，jQuery buildFragment DataTables 插件的细节以 CSP 安全的方式创建“片段”，但之后buildFragment 将这些片段保留为 HTML 字符串并将其插入为 HTML。

jQuery 有htmlPrefilter() 方法来修改所有现有的jQuery 操作方法。 buildFragment 包装存储元素时使用此方法：
tmp.innerHTML = '<div>' + htmlPrefilter(elem) + '</div>';

您可以修改此 htmlPrefilter() 以在所有标签中添加 style='...' -> data-style='...'。在文档就绪事件上，您需要选择所有 data-style 属性，将其内容解析为数组，并将 CSP 安全 element.style= 应用于每个数组的元素。