Content Security Policy and Office UI Fabric

问题

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

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

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.

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.

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?

Thanks

Chris

回答1:

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

or

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

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

来源：https://stackoverflow.com/questions/55599944/content-security-policy-and-office-ui-fabric