arkon / ng-sidebar

[Inactive] Angular sidebar component.
https://echeung.me/ng-sidebar
MIT License
388 stars 136 forks source link

Tools.isBrower doesn't support Content Security Policy #185

Closed Confusedfish closed 5 years ago

Confusedfish commented 5 years ago

The use of new Function() within tools.ts isBroswer() results in an eval function being used which means that any project using ng-sidebar cannot use a restrictive CSP header.

To reproduce the problem: ng new csp-test Edit index.htm to include: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'; connect-src 'self' ws://localhost:4200; font-src 'self';"> Reference ng_sidebar and use AOT: ng serve --aot

You will get errors in the browser when it blocks the eval function.

I do not understand the function or would make a fix & pull request but for my local version have just used return true; to sidestep the issue. Perhaps you know of another way to determine if the code is running inBrowser without the use of new Function()?

arkon commented 5 years ago

The function was written that way to avoid it crashing in Node.js contexts (i.e. SSR), but also written before Angular provided a way of checking the context.

It'll need to be updated to make use of PLATFORM_ID from @angular/core / isPlatformBrowser from @angular/common.

I'll try to get around to it within the next few days, but I'll also happily accept PRs. :)