We Keep Coding

unsafe eval error while building react app chrome extension

I have an chrome extension that renders a react app in a sidebar (iframe) upon clicking on the extension icon.
The react app is being built using webpack (configured with create-react-app with craco)
I'm having the following error while trying to open the extension:
Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
The react app code is inside src dir and the extension code in the public dir.
And I'm loading the extension from the build directory.
I did try to add devtool: 'cheap-module-source-map' as mentioned in this post to my craco.config.js
and also adding the following csp to my manifest.json
"content_security_policy": {
"extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}
but it did not resolve the issue.

ExcelJS: "Uncaught EvalError: 'unsafe-eval' is not an allowed source of script in the following Content" in Angular App

I have deployed Angular Application that uses ExcelJS library on IIS server. My current security policy forces me to return below header in IIS Http Response
content-security-policy: script-src 'self';img-src 'self'
With this setting, angular app is not loading and giving following error.
exceljs.js:87162 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
Is there any way to override Http Response security Policy. I tried to add content security policy using
But it did not work.
Could anyone please suggest how to run ExcelJS with strict content security policy?

Resolved by using below Steps:
First include import regenerator-runtime before exceljs import
import 'regenerator-runtime/runtime';
import { Workbook } from 'exceljs';
2nd go to tsconfig.json and include bare version of exceljs path after "compileOnSave":false
"exceljs": [
"node_modules/exceljs/dist/exceljs.bare.min.js"
]

How to set up Visual Studio Code for multiple debuggers?

I'm using VS Code as my IDE and need multiple debuggers available for the various projects. I have Extendscript as one and would like to have Chrome for other files.
This is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "1.0.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "extendscript-debug",
"request": "launch",
"name": "Ask for script name",
"program": "${workspaceFolder}/${command:AskForScriptName}",
"stopOnEntry": false
}
]
}
VSC is complaining about it "Matches multiple schemas when only one must validate." having two schema.
Also VSC is providing this: "Configuration 'Launch Chrome against localhost' is missing in 'launch.json'."
I'm able to debug the Extendscript files (jsx) but not the JS or HTML/JS/CSS files.
I am totally lost as used to use ESDK for jsx files and did Chrome in the browser. There seems to be no way to select the debugger I need.
I'm on Win10 very latest 1909 and VSC Version: 1.44.2 (user setup)
Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd
Date: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
Thanks,
RONC

Regarding the complaining message, this might be a mismatch. Please restart the VS Code first. The messages should disappear after restart.
For setup of multiple debuggers, you need to add configuration separately to launch.json, like what you have done in your current launch.json, and you can choose the debugger you want to run in the option.
Try the following steps to get the Chrome debugger working:
Go to Extensions View (⇧⌘X) and search for Debugger for Chrome extension and then install.
You have specified http://localhost:8080 in your chrome url of the configuration, so you have to run a web server on that URL. Like step 1, go to Extensions View to search for Live Server extension and then install. Moreover, go to Command Palette (⇧⌘P) with Preferences: Open Settings (JSON), add the below snippet:
{
"liveServer.settings.port": 8080,
}
This will set custom port number of Live Server. In your case, 8080.
Click Go Live at the bottom right of VS Code to start the server. This will open a new Chrome browser. You can close it or leave it there.
Go to Run View (⇧⌘D) and select Launch Chrome option to run the debugger. It will launch a new Chrome browser, and at this point you should be able to start debugging by setting breakpoints.
You can see https://code.visualstudio.com/docs/debugging for more useful information and https://github.com/Microsoft/vscode-chrome-debug#using-the-debugger for Debugger for Chrome in specific.

Ember Deprecation: lookupFactory was called on a registry

I just installed a fresh version of ember-cli. I did an ember g my_project and then ember s. I have a couple of deprecations out of the box:
DEBUG: -------------------------------
ember.debug.js:4888DEBUG: Ember : 1.12.0
ember.debug.js:4888DEBUG: Ember Data : 1.0.0-beta.18
ember.debug.js:4888DEBUG: jQuery : 1.11.3
ember.debug.js:4888DEBUG: -------------------------------
ember.debug.js:4954DEPRECATION: `lookupFactory` was called on a Registry. The `initializer` API no longer receives a container, and you should use an `instanceInitializer` to look up objects from the container. See http://emberjs.com/guides/deprecations#toc_deprecate-access-to-instances-in-initializers for more details.
at Object.Registry.lookupFactory (http://localhost:4200/assets/vendor.js:12183:26)
at ember$data$lib$initializers$store$$initializeStore (http://localhost:4200/assets/vendor.js:70659:48)
at Object.ember$data$lib$setup$container$$setupContainer [as initialize] (http://localhost:4200/assets/vendor.js:70969:7)
at http://localhost:4200/assets/vendor.js:14662:23
at http://localhost:4200/assets/vendor.js:14685:9
at visit (http://localhost:4200/assets/vendor.js:12701:7)
at visit (http://localhost:4200/assets/vendor.js:12699:9)
at DAG.topsort (http://localhost:4200/assets/vendor.js:12813:11)
at Namespace.default.extend._runInitializer (http://localhost:4200/assets/vendor.js:14684:13)
ember.debug.js:4954DEPRECATION: `lookup` was called on a Registry. The `initializer` API no longer receives a container, and you should use an `instanceInitializer` to look up objects from the container. See http://emberjs.com/guides/deprecations#toc_deprecate-access-to-instances-in-initializers for more details.
at Object.Registry.lookup (http://localhost:4200/assets/vendor.js:12173:26)
at ember$data$lib$initializers$store$$initializeStore (http://localhost:4200/assets/vendor.js:70677:28)
at Object.ember$data$lib$setup$container$$setupContainer [as initialize] (http://localhost:4200/assets/vendor.js:70969:7)
at http://localhost:4200/assets/vendor.js:14662:23
at http://localhost:4200/assets/vendor.js:14685:9
at visit (http://localhost:4200/assets/vendor.js:12701:7)
at visit (http://localhost:4200/assets/vendor.js:12699:9)
at DAG.topsort (http://localhost:4200/assets/vendor.js:12813:11)
at Namespace.default.extend._runInitializer (http://localhost:4200/assets/vendor.js:14684:13)
jquery-1.7.2.min.js:1 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK_hcA04='), or a nonce ('nonce-...') is required to enable inline execution.
(anonymous function) # jquery-1.7.2.min.js:1(anonymous function) # jquery-1.7.2.min.js:1(anonymous function) # jquery-1.7.2.min.js:3
Also, I have a bunch of Report Only warnings:
[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-j0bVhc2Wj58RJgvcJPevapx5zlVLw6ns6eYzK_hcA04='), or a nonce ('nonce-...') is required to enable inline execution.
How can I "correctly" fix these warnings on a fresh app from ember-cli?

import statement in empythoned doesn't work in chrome extension

I am using javascript generated by Empythoned to create a chrome extension. Python import doesn't work in chrome extension where as it works in web application. Here is the demo.
Sample code:
Web App
Input
import collections
print collections
Output
<module 'collections' from '/lib/python2.7/collections.py'>
Chrome Extension
Input
import collections
Output
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/lib/python2.7/collections.py", line 8, in <module>
from _collections import deque, defaultdict
ImportError: Could not evaluate dynamic lib: //lib/python2.7/_collections.so
Is it something to do with chrome extension handling JS ?

Empythoned is trying to eval() code, and Chrome by default restricts eval() from being used in extensions.
More details on the Content Security Policy can be found here:
https://developer.chrome.com/extensions/contentSecurityPolicy
If you add this line relaxing the security policy to your extension's manifest.json, you should be able to import those modules:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
As the documentation warns, eval() is a notorious XSS attack vector, so you should be careful when allowing it in your extensions.