Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

p-pickList: Content-Security-Policy throws a inline-style error when [responsive]="true" #14847

Closed
victorgawk opened this issue Feb 20, 2024 · 8 comments
Closed

p-pickList: Content-Security-Policy throws a inline-style error when [responsive]="true" #14847

victorgawk opened this issue Feb 20, 2024 · 8 comments
Labels
Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response Type: Bug Issue contains a bug related to a specific component. Something about the component is not working

Comments

@victorgawk
Copy link

victorgawk commented Feb 20, 2024 •
edited
Loading

Describe the bug

If Content-Security-Policy header is enabled and the user tries to render a p-pickList with [responsive]="true", the browser throws a inline-style error.
Related:
#14584
#14846
#13438
#12787

Environment

Add a CSP header enforcing style-src: 'self' in order to reproduce the error:

<head>
<meta http-equiv="Content-Security-Policy" content="
    default-src 'self'; 
    script-src 'self' 'nonce-randomNonceString';
    style-src 'self' 'nonce-randomNonceString';">
</head>
<body>
<app-root ngCspNonce="randomNonceString">
   ...
</app-root>
</body>

Reproducer

No response

Angular version

17.2.1

PrimeNG version

17.7.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.0

Browser(s)

Chrome 121.0.6167.185

Steps to reproduce the behavior

  1. The error happens when the <p-pickList> is loaded / initialized.

Expected behavior

Should have an option to add a nonce attribute to the component that is receiving the style, or not adding style at all.
@victorgawk victorgawk added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 20, 2024
@victorgawk victorgawk changed the title p-picklList: Content-Security-Policy throws a inline-style error when [responsive]="true" p-pickList: Content-Security-Policy throws a inline-style error when [responsive]="true" Feb 20, 2024
@mehmetcetin01140 mehmetcetin01140 added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Feb 26, 2024
@jlfrances
Copy link

Indeed, I have the same error.

It's happening when setting styles to make the data table responsive.
It happens when it appends this InnerHTML, exactly here:

@SoyDiego
Copy link
Contributor

Any idea @cetincakiroglu @mehmetcetin01140.
Maybe you can give us an idea with this problem.

Thanks!! :)

@SoyDiego
Copy link
Contributor

Hi @victorgawk did you have any solution?
Thanks!

@jlfrances jlfrances mentioned this issue Jun 26, 2024
Closed
@victorgawk
Copy link
Author

unfortunately no 😢

@SoyDiego
Copy link
Contributor

unfortunately no 😢

Thanks for your reply. We have created a new issue giving more information and a reproducer here:
#15911

Thanks!

@victorgawk
Copy link
Author

victorgawk commented Jun 26, 2024 •
edited
Loading

I also had this problem with two other NPM components, each used a different solution to solve:

  • ng-icons: added a withContentSecurityPolicy() config issue solution
  • codemirror: added a EditorView.cspNonce.of("rAnd0mNonceVaue") option to inform the nonce string issue solution

@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response label Oct 25, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@victorgawk @SoyDiego @jlfrances @mehmetcetin01140