Content Security Policy violation problem in a fresh Ember app

Ember CLI
1

Grettings, Ember-community

At the moment I’ve almost reached the “desperate” mood. 3 days ago I wanted to get started with Ember by creating a small prototype, but at one point I faced “a wall”. I don’t have developer-friends who worked with ember, I’ve googled for solutions and asked smart guys from StackOverflow as well.

I’ll explain my current situation I would be infinitely glad if someone would be able to suggest a solution.

My environment:

  • Mac, OS X (10.10.3)
  • ember -v: 0.2.3
  • node -v: 0.12.2
  • npm -v: 2.7.6

I installed ember-cli, created a new app, started the server:

$ npm install -g ember-cli

$ ember new my-app

$ cd my-app

$ ember server

Afterwards I visit the url http://localhost:4200/ and see Welcome to Ember.js.

The next step is to “try and change” this text. So I go to application.hbs and change the content of the file to:

Welcome to Ember.js, BRO

{{outlet}}

So I return to the browser, refresh the page and nothing has changed. No errors in browser’s console. Nevertheless in terminal I get messages like

Content Security Policy violation: {}

I tried to delete the CSP line from package.json - nothing. But anyway “Removing the check that’s warning you of vulnerabilities doesn’t count as fixing your vulnerabilities” (c)

I have no clue what to try and where to search

Thank you in advance,

Ted

2

A fresh app should not have CSP warnings. Please test in an incognito window (without browser extensions). These warnings on a fresh app are often caused by chrome/Firefox extensions mis-behaving.

3

Nope, the content remains static and terminal produces those warnings:

Content Security Policy violation: {}

Content Security Policy violation: {}

Checked in:

  • Incognito mode in Chrome: 42.0.2311.90
  • Safari: 8.0.5
4

Some additional info:

I figured out that the problem is that the ember app does not “hear” the trigger, when a file has been changed. I don’t receive a

file changed templates/application.hbs

notification in the terminal. Something globally is blocking or interrupting the regular app run.

Still looking forward receiving your suggestions !

5

Update. Temporary fix found: Starting the server with

ember server --watcher=polling

Still searching for the answer what is blocking the events of the file system

6

Did you get anywhere with this?

After fixing all browser console errors for the security policies, I’m seeing the same in the ember server output: Content Security Policy violation: {}

Since it’s empty, is there anything to be concerned about?

thx

7

I am also having similar issues.

$ ember --version
version: 1.13.1
node: 0.12.6
npm: 2.12.1

$ watchman --version
3.3.0

However ember server --watcher=polling did not seem to resolve anything for me, nor did the incognito window.

Any ideas?

8

Hi, I have a similar problem. I created a new ember app following the ember guide. I also did a ember build (>Ember build). In the dist folder, I opened the vendor.js file. I see three evals that are flagged as potential CSP issues. Here are the three lines:

// “…/…/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js”: /!****************************************************************************************************!
! C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js ! **************************************************************************************************/ /! no static exports found / // (function(module, exports, webpack_require) {

eval(“\nif (typeof document !== ‘undefined’) {\n webpack_require.p = (function(){\n var scripts = document.querySelectorAll(‘script’);\n return scripts[scripts.length - 1].src.replace(/\/[^/]*$/, ‘/’);\n })();\n}\n\nmodule.exports = (function(){\n var d = _eai_d;\n var r = _eai_r;\n window.emberAutoImportDynamic = function(specifier) {\n if (arguments.length === 1) {\n return r(‘eai_dyn’ + specifier);\n } else {\n return r(‘eai_dynt’ + specifier)(Array.prototype.slice.call(arguments, 1))\n }\n };\n})();\n\n\n//# sourceURL=webpack://ember_auto_import/C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js?”);

/***/ }),

// “…/…/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js”: /!!
! C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js ! **/ /! no static exports found / // (function(module, exports) {

eval(“\nwindow._eai_r = require;\nwindow._eai_d = define;\n\n\n//# sourceURL=webpack://ember_auto_import/C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js?”);

/***/ }),

// 0: /!!
! multi C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js ! */ /! no static exports found / /*/ (function(module, exports, webpack_require) {

eval(“webpack_require(/*! C:\Users\lester\AppData\Local\Temp\2\broccoli-53036GLnLQ6wNbskf\cache-318-bundler\staging\l.js /"…/…/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js");\nmodule.exports = webpack_require(/! C:\Users\lester\AppData\Local\Temp\2\broccoli-53036GLnLQ6wNbskf\cache-318-bundler\staging\app.js */"…/…/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js");\n\n\n//# sourceURL=webpack://ember_auto_import/multi_C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/l.js_C:/Users/lester/AppData/Local/Temp/2/broccoli-53036GLnLQ6wNbskf/cache-318-bundler/staging/app.js?”);

/***/ })

/******/ });//# sourceMappingURL=vendor.map

My environment information. C:\EmberApps\super-rental>ember -v ember-cli: 3.28.5 node: 14.16.1 os: win32 x64

Is there a way to prevent the evals? Thanks.

9

hi @zzr994! Looks like these are potentially being caused by ember-auto-import so try setting the forbidEval flag to true in your ember-auto-import settings

10

Hello dknutsen, Thanks for the quick response. I tried it on the fresh app and it does remove the eval from the bundle and the application still works. However when I tried this with my production app, it has some side effects where some of application feature do not work. I guess I will have to look into why those features are not working. Again, thank you for pointing me in the right direction.

11

Glad you made some sort of progress at least! If you get stuck on anything else feel free to start a new thread or ask in the Discord server. Good luck!