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

Question

我一直在尝试从 CSP style-src headers 中删除 unsafe-inline，因为它很容易受到攻击。删除它时，我在 chrome:

中的 jQuery 执行中遇到以下错误

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-TXYxR0tlamZ1emk2a3Y4RHFwdTdTZ0JaR1R2TTdEaUk=' 'unsafe-eval' ". Either the 'unsafe-inline' keyword, a hash ('sha256-Z0MkpGRk0/9QW+7eJ/G1D//1i6WKVbat+HlIwkiFln4='), or a nonce ('nonce-...') is required to enable inline execution

在调试时我发现它在

失败了

From jquery 3.5.1

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

在 buildFragment 方法中。在失败点，elem 被评估为一个字符串，其中包含 html for tr 包含由 datatables.Even 生成的内联样式，尽管数据表似乎正在应用 CSP 安全方式如下但当它被传递回jQuery 包含内联样式的整个 TR 作为 innerHTML 加载，由于 unsafe-inline

而失败

from 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='...'。在文档准备就绪事件中，您需要 select 所有 data-style 属性，以将其内容解析为数组并将 CSP 安全 element.style= 应用到每个数组的元素。

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

Jquery +datatables causing CSP errors for inline style

javascript

jquery

datatables

content-security-policy