Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self'"...

[esporysz]

Is this a bug, enhancement, or feature request?

BUG

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

"@angular/core": "^17.2.0",
"@fundamental-ngx/cdk": "^0.50.1-rc.0",
"@fundamental-ngx/core": "^0.50.1-rc.0",
"@fundamental-ngx/i18n": "^0.50.1-rc.0",
"@sap-theming/theming-base-content": "^11.9.0",
"fundamental-styles": "^0.37.0",

If this is a bug, please provide steps for reproducing it; the exact components you are using;

When applying following Content-Security-Policy 'Content-Security-Policy' "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; we get following error in the Chrome 126.0.6478.127 console: Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback. which is caused by

<style>
            html {
                line-height: 1.15;
                -webkit-text-size-adjust: 100%
            }

            body {
                margin: 0
            }

            @charset "UTF-8";:root {
                --fdMicro_Process_Flow_Item_Background: var(--sapNeutralBackground);
                --fdMicro_Process_Flow_Item_Border_Color: var(--sapNeutralBorderColor);
                --fdMicro_Process_Flow_Item_Hover_Background: var(--fdMicro_Process_Flow_Item_Background);
                --fdMicro_Process_Flow_Item_Hover_Border_Color: var(--fdMicro_Process_Flow_Item_Border_Color);
                --fdMicro_Process_Flow_Item_Active_Background: var(--sapHighlightColor);
                --fdMicro_Process_Flow_Item_Active_Border_Color: var(--sapHighlightColor);
                --fdMicro_Process_Flow_Item_Width: 2.75rem;
                --fdMicro_Process_Flow_Item_Min_Width: 1.875rem;
                --fdMicro_Process_Flow_Compact_Item_Width: 2rem;
                --fdMicro_Process_Flow_Compact_Item_Min_Width: 1.375rem;
                --fdMicro_Process_Flow_Connector_Width: 1.125rem;
                --fdMicro_Process_Flow_Compact_Connector_Width: .625rem;
                --fdMicro_Process_Flow_Icon_Font_Size: var(--sapFontLargeSize);
                --fdMicro_Process_Flow_Visible_items: 8;
                --fdMicro_Process_Flow_Max_Container_Width: calc(var(--fdMicro_Process_Flow_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem);
                --fdMicro_Process_Flow_Compact_Max_Container_Width: calc(var(--fdMicro_Process_Flow_Compact_Item_Width)*(var(--fdMicro_Process_Flow_Visible_items) + 1) + .0625rem)
            }

            :root {
                --fdList_Item_Background_Color: var(--sapList_Background);
                --fdList_Item_Text_Color: var(--sapList_TextColor);
                --fdList_Item_Border_Color: var(--sapList_BorderColor);
                --fdList_Item_Text_Font_Size: var(--sapFontLargeSize);
                --fdList_Item_Icon_Font_Size: 1.125rem;
                --fdList_Item_Height: var(--sapElement_LineHeight);
                --fdList_Status_Text_Color: var(--sapNeutralTextColor);
                --fdList_Message_Background_Color: var(--sapNeutralBackground)
            }
        </style>

Is it possible to move code above to the file to avoid error message in the console?

[khotcholava]

@esporysz Hello, Can you please provide more information how to reproduce this issue?

[esporysz]

Hello,

1. create sample angular application with fundamental using versions:

"@angular/core": "^17.2.0",
"@fundamental-ngx/cdk": "^0.50.1-rc.0",
"@fundamental-ngx/core": "^0.50.1-rc.0",
"@fundamental-ngx/i18n": "^0.50.1-rc.0",
"@sap-theming/theming-base-content": "^11.9.0",
"fundamental-styles": "^0.37.0",

2. to the index.html add CSP configuration:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'" />

3. Run application in prod mode, you should see error in the browser console Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

[khotcholava]

@esporysz I can't reproduce the issue on the latest version of Fundamental NGX. Here are the steps I followed:

• Created an Angular application.
• Installed Fundamental NGX using the command: ng add @fundamental-ngx/core.
• Ran the application.

Result:

No warnings appeared in the console.

[esporysz]

Did you run application in prod mode?

[khotcholava]

@esporysz Yes. Created prod build and then run it with http-server and not getting any warnings

[krzysiek-kr]

Hi, @khotcholava Could you show the browser's source of your application? I mean not the source code that the application is built on but the resulting source on the browser side when you click "View Page Source" in your browser. The element may exist on your page but the browser does not report it because some reason.

[meeque]

@khotcholava, is it possible that you've missed @esporysz's step 2? I mean, did you actually set up a CSP? Just asking because you haven't mentioned it in your comments.