react-native-web
react-native-web copied to clipboard
CSP: Refused to apply inline style because it violates the following Content Security Policy
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",