import statement in empythoned doesn't work in chrome extension - javascript

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.

Related

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.

How to import an npm_module in Cordova

I'm using Cordova to make a cross-platform app. My method so far has been to first make something work on my PC (since debugging is easy in google chrome) and then test it on my phone.
I need to import the module 'axios' that I installed with npm. The index.html includes the javascript file: js/index.js. Inside this file I tried loading the module by writing:
import axios from 'axios';
However, this gives me the error "Uncaught SyntaxError: Cannot use import statement outside a module". I then tried importing the module from index.html:
<script type="module" src="../node_modules/axios/index.js"></script>
But it then throws a security error:
Access to script at '<path-to-app-root>/node_modules/axios/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
When I google the error I find workarounds (that I also cannot get to work). But I feel it shouldn't be this hard since I'm working with a well-known framework. For example, I tried the method used here but once again I get a security error.
I'm at a loss here. Should I use a complex workaround from the internet or am I missing the regular/easy way?
You cannot use Node with Cordova. Node.JS is a back end environment.

Importing js file as module in html gives CORS errors in firefox [duplicate]

This question already has an answer here:
Importing script with type=module from local folder causes a CORS issue
(1 answer)
Closed 1 year ago.
I have a simple html file:
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<script type="module">
import init from './target/test.js'
init()
</script>
</html>
And in the target folder a test.js file:
function init() {
console.log("It works");
}
export default init;
But when I open the html file with firefox I get the following errors in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/wanne/Bureaublad/hmm/target/test.js. (Reason: CORS request not http).
Module source URI is not allowed in this document: “file:///C:/Users/wanne/Bureaublad/hmm/target/test.js”.
According to this article, running modules require a HTTP(s) connection and will not work locally:
If you try to open a web-page locally, via file:// protocol, you’ll
find that import/export directives don’t work. Use a local web-server,
such as static-server or use the “live server” capability of your
editor, such as VS Code Live Server Extension to test modules.
So I'd suggest exactly that and instead of running it locally, use a live server extension from your preferred text editor.

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"
]

Load JS script in the app running in local context

I have HTML/JS based UWP application. The app is running in local context, so my "Start page" in package manifest contains: index.html.
index.html contains following line:
<script src="ms-appdata:///temp/myScript.js"></script>
So myScript is placed in temporary (TempState) folder. I am aware that files in the temp folder can be deleted by system anytime.
When I launch the app I can see following error:
CSP14312: Resource violated directive 'script-src ms-appx: 'unsafe-eval' blob:' in Host Defined Policy: ms-appdata:///temp/myScript.js. Resource will be blocked.
I know that when I switch to web context by using ms-appx-web, it will work, however, is there any other way to load any JS script in the app running in local context?
UPDATE:
I just forgot to point out that the script is provided by somebody else and cannot be included in the app package.
This is a CSP error, it's not quite relevant to the web/local context. You need to configure your CSP in <meta/> tag on the index.html. Please see the Content Security Policy (CSP)
for more details.

Categories