内容安全策略和Office UI Fabric [英] Content Security Policy and Office UI Fabric

问题描述

我一直在尝试设置CSP以与Office UI Fabric React一起使用.有没有比 style-src'unsafe-inline'更安全的东西了?

I've been trying to set up a CSP to work with Office UI Fabric React. Is it possible to get anything more secure than style-src 'unsafe-inline'?

我们有一个带有TypeScript的Create React App，我们正在使用Office UI Fabric React提供一致的外观.

We have a Create React App with TypeScript and we're using Office UI Fabric React to provide a consistent look and feel.

使用csp-html-webpack-plugin和craco，在设置 INLINE_RUNTIME_CHUNK = false 时，可以为我们自己的代码生成带有样式和脚本哈希值的CSP.

Using csp-html-webpack-plugin and craco, when INLINE_RUNTIME_CHUNK=false is set it is possible to generate the CSP with hashes for styles and scripts for our own code.

Office UI Fabric React出现问题-通过合并样式和@ microsoft/load-themed-styles将7或8种样式注入页面.

The problem occurs with Office UI Fabric React - it injects 7 or 8 styles into the page via merge-styles and @microsoft/load-themed-styles.

我找不到任何其他人在谈论使用Office UI Fabric React设置CSP的参考，更不用说任何潜在的解决方案了.

I haven't been able to find any references to anyone else talking about setting up a CSP with Office UI Fabric React, let alone any potential solutions.

错过了一个非常明显的设置和文档吗?

Have a missed a really obvious setting and documentation?

谢谢

克里斯

推荐答案

感谢您引起我们的注意.我们在@ uifabric/merge-styles v6.17.0中添加了对"nonce"的支持.随机数是在FabricConfig对象上指定的:

Thank you for bring this to our attention. We added support for 'nonce' in @uifabric/merge-styles v6.17.0. The nonce is specified on FabricConfig object:

window.FabricConfig = { 

        mergeStyles: {
            cspSettings: { nonce: 'mynonce'}
        }
    }

或

Stylesheet.getInstance().setConfig({
 cspSettings: {
 nonce: "abc"
 }
});

(请参见 https://codesandbox.io/s/0x1okoklrv 中的完整示例)

(See complete example in https://codesandbox.io/s/0x1okoklrv)

这篇关于内容安全策略和Office UI Fabric的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！