I am trying to integrate Vue JS in one of my application with latest version 2.4.2.Backend implementation uses struts and we set Content-Security-Policy script-src 'self' 'unsafe-inline' in response headers.
At first I was trying to use standalone Vue JS instead of using webpack or any other tool. I see the following CSP error when I execute my page using Vue JS :
[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.
warn — vue.min.js:485
compileToFunctions — vue.min.js:9842
$mount — vue.min.js:10040
Global Code — example.do:51
To avoid this issue, I have started using webpack to pre-compile the templates so that the issue will be resolved and I still see the below error in webpack JS :
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' 'unsafe-inline'".
Is there any solution to use webpack / Vue JS with CSP's enabled ? What is the suitable solution to handle CSP issues.
Sample Example : Vue is not detected when JSP is loaded through struts
Thanks for your help in advance.
Got to know there are different options to set up "devtools" attribute in webpack config file.
Issue and solution details : https://github.com/webpack/webpack/issues/4094
https://webpack.js.org/configuration/devtool/#devtool explains detailed options and selection to resolve CSP issues.
Related
I am trying to create chrome extension that uses Three.js and some of its plugins and I cannot import them without an importmap as the modules themselves are importing Three.js as 'three' without the path to three.module.js.
However, when trying to use an importmap I run into CSP violation as it would be an inline script. Even after adding the lines bellow into my manifest.json (manifest version 3), I still get CSP violations.
"content_security_policy": {
"script-src": "'self' 'unsafe-inline' 'sha256-InlineScriptHash' 'nonce-NonceAddedToInline'"
},
How should the "content_security_policy" be changed to allow importmap or how should I go about importing Three.js plugins?
I am absolutely new with phaser 3.
I have installed the library with npm. Then I naively fetch the bundled file from node_modules.
<body>
<script src="./node_modules/phaser/dist/phaser-arcade-physics.js"></script>
<script src="./js/start.js"></script>
</body>
When I load index.html in the browser as file, it works fine. But now I have created a little v-host in my Apache and let it serve the files. This works too, but phaser yells at me:
Uncaught TypeError: this.texture is undefined
setFrame http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138726
setTexture http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138699
Image http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:29328
<anonymous> http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:168386
create http://game.localhost/personwar/js/start.js:34
[...]
DOMContentLoaded http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:86811
Game http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:154945
<anonymous> http://game.localhost/personwar/js/start.js:17
I have stolen start.js from the beginner tutorial and here it all starts:
function create () {
console.log('this', this);
this.add.image(0, 0, 'bg').setOrigin(0, 0);
...
}
I don't understand, why this.texture changes when the library is self hosted, compared to being delivered by file://. What do I need to change here?
It might be a timing problem, maybe I need to setup smth else before calling this.add.image in the create callback.
I will go on with investigating, what texture actually is.
Issue were Header, which was set by server: Content-Security-Policy
The rule "default-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'"
blocked this call
blob:http://game.localhost/b6ac3ad7-e25b-4b82-8d07-8f4ce6c331c3
which was the call for one of our images. This is weird and I don't get it. But the point is: no image loaded -> no texture.
Well I don't know which file your are linking. the main phaser file is called phaser.js or phaser.min.js. I think this is the root of your problem.
The easy solution is to download the phaser javascript file into your webfolder, or link it from a cdn. (https://phaser.io/download/stable)
If you (want to) use npm you will need a bundler like webpack, parcel, ... there are serval templates out there. (like this one https://github.com/photonstorm/phaser3-project-template).
btw.: I'm no expert, but I would in general never have the node_modules directory in a webserver accessible folder (if not really needed, and if you are running apache, it is probably not needed), since this could create be a potential security risk.
I am writing a plugin for a third-party web application, whose code I can see but can't modify. I'm running it in Chrome. The main webapp and the plugin are both (separate) webpack bundles. At runtime when the page loads, the webapp fetches the plugin bundles from the same server, and initialises them.
My objective is to make my plugin patch/wrap a function in the third-party application, in the module webapp/utils/target.tsx, such that calls to that function from within the webapp have my modified behaviour. Something like this:
// somehow import the `target` module (this is the problem, see below...)
oldFunc = target.targetFunc;
target.targetFunc = function targetFunc(args) {
// do extra stuff here
return oldFunc(args);
}
But I don't know how to import the target module or whether this is possible. Specifically:
I can't just import target, because application/webapp is not a dependency of my plugin
Plugins are meant to access limited entrypoints that get attached to window by the webapp, so they have no direct dependency on the webapp
I don't think I can add application/webapp as a dependency because
it's not a published package (perhaps I can add it as a github link?) and
I don't want webpack to include it in the bundle, so I think I'd have to specify it as an external dependency, but I don't know how to do that...
I can't modify application to do any extra things in its webpack (like exposing target in a different way)
I thought perhaps I could import it dynamically at runtime:
import(/*webpackIgnore: true*/ '/application/webapp/utils/target').then({
...
})
This gives me the error Expected a JavaScript module script but the server responded with a MIME type of "text/html".
If it helps, when the page is fully loaded and the app has loaded my plugin, in Chrome developer tools under Sources -> Page, I see a tree structure like this:
- localhost:port
- .
- com.mydomain.myplugin
- <modules for my plugin>
- application
- webapp
- .
- <other modules>
- utils
- target.tsx
- <other files>
- webpack
Meanwhile the original html page source seems to load the webapp via this tag in the header:
<script defer="defer" src="/static/main.c4e2eaf1d8c47b01fa6c.js"></script>
The Chrome devtools say "Source map detected".
Is it even possible to do what I'm trying to do?
From what i understand, you can import the module object, edit with the Object. library and return the edited module. If you don't understand nothing but knows the core, these references should helpful to solve this.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties
I have pretty strange problem with webpack and aurelia.
I've made new webpack configuration based on the internet and in official webpack and aurelia documentation. Compilation works, everything seems to be fine. But in runtime, I'm getting this error:
css-resource.js?ada4:17 Uncaught (in promise) Error: Failed loading required CSS file: aurelia-notify/style.css
at fixupCSSUrls (css-resource.js?ada4:17)
at eval (css-resource.js?ada4:56)
at <anonymous>
Originally, I thought it might be some issue related to this comment:
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
mentioned here: https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/webpack.config.js#L70 but it doesn't seem to be.
While creating working example, I made a strange discovery. Everything works, until I load one of CSS files from following dependencies:
<require from="aurelia-bootstrap-datetimepicker/src/bootstrap-datetimepicker-bs4.css"></require>
<require from="eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"></require>
(Please not the dependencies and error message - they are completely unrelated).
Here is example repository: https://github.com/klinki/aurelia-webpack-issue
(also have a look at tag working-state: https://github.com/klinki/aurelia-webpack-issue/tree/working-state - only one commit back and it works).
I fixed your problem:
new ModuleDependenciesPlugin({
'aurelia-testing': [ './compile-spy', './view-spy' ],
// 'aurelia-notify': [ './style.css' ]
}),
First this is not needed because AureliaPlugin installs a loader by default on all HTML files to detect and process <require> dependencies. style.css is required from an HTML template somewhere inside aurelia-notify. This is handled for you, no config required.
Second this was bad because the rest of your config is set up with appropriate loaders based on whether the CSS dependency comes from inside a .html (assuming an Aurelia <require>) or not (assuming a JS import).
By using ModuleDependenciesPlugin in this way, Webpack did not see a .html origin for the dependency and incorrect loaders were applied.
I get this error when reloading my Chrome Extension after compiling using Webpack:
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' blob: filesystem: chrome-extension-resource:".
at new Function (<anonymous>)
at evalExpression (compiler.js:33919)
at jitStatements (compiler.js:33937)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34520)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34448)
at compiler.js:34347
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34347)
at compiler.js:34217
at Object.then (compiler.js:474)
My CSP grants the unsafe-eval permission.
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
How can I permit the use of eval() in my code (because Webpack uses this to generate source maps)?
Took me a few hours but what you probably want to do is change the style of source mapping webpack uses.
By default it uses eval.
https://webpack.js.org/configuration/devtool/
I added this to my webpack.config.js:
devtool: 'cheap-module-source-map'
The trick to this was figuring out why webpack --mode development has the error and webpack --mode production didn't.
Also I'm using React not Polymer but I'm pretty sure this still applies.
Interesting read to overcome via Manifest
https://developer.chrome.com/extensions/contentSecurityPolicy
Evaluated JavaScript
The policy against eval() and its relatives like
setTimeout(String), setInterval(String), and new Function(String) can
be relaxed by adding 'unsafe-eval' to your policy:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
However, we strongly recommend against doing this.
These functions are notorious XSS attack vectors.
Thanks for the answer from #Randy. However, For Vue CLI generated vue project, there's no webpack.config.js, so the solution will be adding the following config into vue.config.js:
configureWebpack: {
devtool: 'cheap-module-source-map'
}
A chrome extension is not allowed to use unsafe-eval, or eval at all in fact.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy
When making a Chrome extension understand that it's severely limited by Content Security Policies. Make sure you read and understand the WebExtensions Content Security Policy. If you want to have an inline script like:
<script>
alert('hello')
</script>
You're gonna have to calculate the script tags contents into its SHA256 value and add that to your manifest in order for it to be allowed to be executed.
Webpack V5
Use --no-devtool to get out of trouble quickly.
No eval code, no .map file.
npx webpack watch --no-devtool
webpack cli
https://webpack.js.org/api/cli#negated-flags
FYI, I meet this issue because I add istanbul plugin in babel.config.js.
And the build result contains new Function('return this')
For Manifest 3 you can use
"content_security_policy": {
"extension_page":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
}
Scripts from external domains are not allowed in mv3, all scripts must be included into extension package.
Please see the Migrating to Manifest V3.
In my case working on an MVC 5 application, all I had to do was to install the Nuget package in Visual Studio: 'NWebsec.Mvc' and the application ran just fine.