react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

CSP: Refused to apply inline style because it violates the following Content Security Policy

Open JacobDel opened this issue 2 years ago • 0 comments

Is there an existing request?

  • [X] I have searched for this request

Describe the feature request

These are my headers (react native web application deployed with cloudfront):

function handler(event) {
    var response = event.response;
    var headers = response.headers;
    headers['x-frame-options'] = {value:'DENY'}; // clickjacking
    headers['content-security-policy'] =  {value:"default-src 'self'; frame-ancestors 'none'"}
    headers['strict-transport-security'] = {value: "max-age=63072000; includeSubDomains"}
    return response;
}

However, the app doesn't work and the styles isn't loaded correctly. The issue is value:"default-src 'self'; as I can confirm it works correctly without this part. With google inspect I have the following error:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

I saw the following PR so I'm wondering if I'm missing something obvious: https://github.com/necolas/react-native-web/pull/948

A code snippet from my project regarding how I use styles:

export function Text(props: TextExtendedProps) {
  const theme = useTheme();
  const {name, ...otherProps} = props;
  const {style, variant, children} = otherProps;
  const styleWithDefaultColor = [{color: theme.colors.text}, style];

  const iconSize = getFontStyle(variant).fontSize * 1.2;
  // @ts-ignore
  const color = style?.color ?? theme.colors.text;

  if (name) {
    return (
      <TextDefault {...otherProps} style={[styles.container, styleWithDefaultColor]}>
        <View>
          <Icon name={name} style={styles.icon} color={color ?? undefined} size={iconSize} />
        </View>
        {children}
      </TextDefault>
    );
  } else {
    return <TextDefault {...otherProps} style={styleWithDefaultColor} />;
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  icon: {
    marginRight: 3,
    marginBottom: -2,
  },
});

Version: "react-native-web": "^0.19.7",

JacobDel avatar Oct 03 '23 19:10 JacobDel