Unable to use icons with strict Content Security Policies

[vilidou]

We are working on an application that requires strict Content Security Policies (CSP). When using icons from this library, we get CSP violations because the library injects inline <style> elements without using our nonce.

Here is the error:

Refused to apply inline style because it violates the following Content Security Policy directive:
"style-src 'nonce-tpf8c2odeA+DFBpZj62Mrae31Uv2i2g/xBp1Vzpr02k=' 'self' 'report-sample'".
Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

I noticed that we are using griffel to add inline style (@griffel/core/renderer/getStyleSheetForBucket.esm.js) and their team recently added support for nonce - see https://github.com/microsoft/griffel/pull/86

I am not seeing any nonce/csp topics in this repo. How can I use these icons with strict CSP policies ?

[layershifter]

@vilidou as Griffel is used for styling, you can use createDOMRenderer() API to create a renderer with required attributes, for example:

import * as React from "react";
import { createDOMRenderer, RendererProvider } from "@griffel/react";

function AppContainer(props) {
  const { children, targetDocument = document } = props;
  const renderer = React.useMemo(
    () =>
      createDOMRenderer(targetDocument, {
        styleElementAttributes: {
          nonce: "random" /* you can a value that works for you there */,
        },
      }),
    [targetDocument]
  );

  return (
    <RendererProvider renderer={renderer} targetDocument={targetDocument}>
      {/* Children components */}
      {children}
    </RendererProvider>
  );
}

[vilidou]

@layershifter this could work - but are there plans to support nonce at of the box?

@tomi-msft - the script above forces users to know about implementations details (Griffel) - so IMO we should not close this issue?

[layershifter]

@layershifter this could work - but are there plans to support nonce at of the box?

We don't have a feature request for that in Griffel and AFAIK there is no CSS-in-JS that supports it out of the box. More or less, we are currently in the same position as styled-components: https://github.com/styled-components/styled-components/issues/2363#issuecomment-895464410