相关疑难解决方法(0)

我需要在JavaScript中动态创建一个CSS样式表类,并将其分配给某些HTML元素,如div,table,span,tr等,以及某些控件,如asp:Textbox,Dropdownlist和datalist.

可能吗？

一个样本会很好.

我已经使用以下定义设置了内容安全策略（CSP）style-src：

style-src 'self' 'nonce-somenonce'

然后，在我的标记中，我包含了 SVG，如下所示：

<svg role="img" title="Clock">
    <use xlink:href="/Content/Styles/svg/sprite.symbol.svg#icon-clock" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

外部 SVG 包含多个带路径的符号：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 40 40" id="arrow-right" xmlns="http://www.w3.org/2000/svg">
        <path d="M29 20l-5-5v4H11v2h13v4l5-5z"/>
    </symbol>
    <symbol viewBox="0 0 22 22" id="icon-clock" xmlns="http://www.w3.org/2000/svg">
        <path fill="#c20418" class="atcls-1" d="M17.727 9.777h-5.5v-5.5a1.222 ..."/>
    </symbol>
</svg>

Chrome 拒绝允许此代码，并且我不知道如何在没有'unsafe-inline'. 根据这两个测试，SVG 不是 nonceable 元素：

1. CSP 测试：'nonce-value' - 元素是否为 nonceable？
2. CSP 测试：如何使 CSP 合规

我查看了这个线程，它建议将 SVG 分组为 a<style>和 nonce，但我不知道如何执行此操作，以及它是否适用于外部定义。

还有这个线程建议使用 JS …

在我们的应用程序代码中，我们允许一些对象在页面上拖放。此外，我们还有诸如弹出窗口之类的东西，它们需要定位在我们在页面中定位的按钮和对话框下方。

为此，我们需要允许以下内联 css 属性

• z-索引
• 上、下、左、右
• 高度宽度

我们真的不能为此创建类，想象一下，例如左边可能是 0 到 20000，所以我们需要数百万个类。

除了内联css之外，我看不到任何其他方式。

所以要解决 CSP ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) 那么这意味着我们需要完全允许style-src: unsafe-inline

我确定这是一个常见的场景。人们如何看待这个案子？我们还使用 veracode 来扫描我们的软件，所以我认为我们只是通过解释我们只允许一组内联 css 属性来“模仿”这一点。

但我认为也许 CSP 应该允许动态 css 属性的某个子集。

有没有人遇到过这种情况并有任何想法？