app.use(helmet());
const scriptSrcUrls = [
"https://stackpath.bootstrapcdn.com/",
"https://api.tiles.mapbox.com/",
"https://api.mapbox.com/",
"https://kit.fontawesome.com/",
"https://cdnjs.cloudflare.com/",
"https://cdn.jsdelivr.net",
];
const styleSrcUrls = [
"https://kit-free.fontawesome.com/",
"https://stackpath.bootstrapcdn.com/",
"https://api.mapbox.com/",
"https://api.tiles.mapbox.com/",
"https://fonts.googleapis.com/",
"https://use.fontawesome.com/",
];
const connectSrcUrls = [
"https://api.mapbox.com/",
"https://a.tiles.mapbox.com/",
"https://b.tiles.mapbox.com/",
"https://events.mapbox.com/",
];
const fontSrcUrls = [];
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: [],
connectSrc: ["'self'", ...connectSrcUrls],
scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
workerSrc: ["'self'", "blob:"],
objectSrc: [],
imgSrc: [
"'self'",
"blob:",
"data:",
"https://res.cloudinary.com/sdfgsfgsssss/"
"https://images.unsplash.com/",
],
fontSrc: ["'self'", ...fontSrcUrls],
},
})
);
I am getting these errors in the console
Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://kit-free.fontawesome.com/ https://stackpath.bootstrapcdn.com/ https://api.mapbox.com/ https://api.tiles.mapbox.com/ https://fonts.googleapis.com/ https://use.fontawesome.com/". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
clusterMap.js:13 Map Loaded
campgrounds:1 Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://kit-free.fontawesome.com/ https://stackpath.bootstrapcdn.com/ https://api.mapbox.com/ https://api.tiles.mapbox.com/ https://fonts.googleapis.com/ https://use.fontawesome.com/". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Does anyone know why I am getting these errors in the console
The whole website works but all the bootstrap styling has been disabled!
When I remove the npm helmet all the bootstrap loads again.
has anyone got any ideas?
https://cdn.jsdelivr.net is not in your list of style-src directives.
const styleSrcUrls = [
"https://cdn.jsdelivr.net",
// ...
Related
I clone electron-quick-start demo, and test ipcMain function.
Follow the document add this in main.js
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // print "ping"
event.reply('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // print "ping"
event.returnValue = 'pong'
})
in preload.js
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // print "pong"
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // print "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
I can't add in renderer.js because it said
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
and it can't find require(in renderer.js)
The problem is the development tool can't get value in preload.js at this one
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // print "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')
my node.js terminal can get the 'ping' string, and this is development tool's issues==>
screenshot
The index.html file of electron-quick-start demo contains the CSP rules:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
change it to:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'">
because eval-expressions are used somewhere. Yes, it is "not secure", but this is just demo. Later you can sort out what of "eval" construct is used and fix those.
Also you can remove both above meta tags to avoid troubles with Content Security Policy at first steps.
Electron 3.0.0-beta.1
Node 10.2.0
Chromium 66.0.3359.181
The problem I'm having is importing a module. I created the following protocol:
protocol.registerFileProtocol('client', (request, callback) => {
var url = request.url.substr(8);
callback({path: path.join(__dirname, url)});
});
The output of the protocol is the correct path
"/Users/adviner/Projects/Client/src/ClientsApp/app.js"
I have the following module app.js with the following code:
export function square() {
return 'hello';
}
in my index.html I import the module like so:
<script type="module" >
import square from 'client://app.js';
console.log(square());
</script>
But I keep getting the error:
app.js/:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
I'm done searches but can't seem to find a solution. Can anyone suggest a way I can make this work?
Thanks
This is a tricky question and i will refer to Electron#12011 and this GitHub Gist for a deeper explaination but the core learning is that the corresponding HTML spec, disallows import via file:// (For XSS reasons) and a protocol must have the mime types defined.
The file protocol you use client:// has to set the correct mime-types when serving the files. Currently i would guess they are not set when you define the protocol via protocol.registerBufferProtocol thus you recive a The server responded with a non-JavaScript MIME type of "", the gist above has a code sample on how to do it.
Edit: I just want to emphasize the other answers here do only cover the absolute minimum basics implementation with no consideration of exceptions, security, or future changes. I highly recommend taking the time and read trough the gist I linked.
To confirm: this is there for security reasons.
However, in the event that you just need to get it deployed:
Change "target": "es2015" to "target": "es5" in your tsconfig.json file
Quick Solution:
const { protocol } = require( 'electron' )
const nfs = require( 'fs' )
const npjoin = require( 'path' ).join
const es6Path = npjoin( __dirname, 'www' )
// <= v4.x
// protocol.registerStandardSchemes( [ 'es6' ] )
// >= v5.x
protocol.registerSchemesAsPrivileged([
{ scheme: 'es6', privileges: { standard: true } }
])
app.on( 'ready', () => {
protocol.registerBufferProtocol( 'es6', ( req, cb ) => {
nfs.readFile(
npjoin( es6Path, req.url.replace( 'es6://', '' ) ),
(e, b) => { cb( { mimeType: 'text/javascript', data: b } ) }
)
})
})
<script type="module" src="es6://main.js"></script>
Based on flcoder solution for older Electron version.
Electron 5.0
const { protocol } = require('electron')
const nfs = require('fs')
const npjoin = require('path').join
const es6Path = npjoin(__dirname, 'www')
protocol.registerSchemesAsPrivileged([{ scheme: 'es6', privileges: { standard: true, secure: true } }])
app.on('ready', async () => {
protocol.registerBufferProtocol('es6', (req, cb) => {
nfs.readFile(
npjoin(es6Path, req.url.replace('es6://', '')),
(e, b) => { cb({ mimeType: 'text/javascript', data: b }) }
)
})
await createWindow()
})
Attention! The path always seems to be transformed to lowercase
<script type="module" src="es6://path/main.js"></script>
Sorry Viziionary, not enough reputation to answer the comment.
I've now done it like this:
https://gist.github.com/jogibear9988/3349784b875c7d487bf4f43e3e071612
my problem was, I also wanted to support modules which are imported via none relative path's, so I don't need to transpile my code.
I'm trying to get the example code for the file-transfer plugin working, it's taken straight from the Cordova docs:
function downloadFile2() {
window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
console.log('file system open: ' + fs.name);
// Make sure you add the domain name to the Content-Security-Policy <meta> element.
var url = 'http://cordova.apache.org/static/img/cordova_bot.png';
// Parameters passed to getFile create a new file or return the file if it already exists.
fs.root.getFile('downloaded-image.png', { create: true, exclusive: false }, function (fileEntry) {
download2(fileEntry, url, true);
}, function () { logError('Error creating file'); });
}, function () { logError('Error creating fs'); });
}
function download2(fileEntry, uri, readBinaryData) {
var fileTransfer = new FileTransfer();
var fileURL = fileEntry.toURL();
console.log('Downloading ' + uri + ' to ' + fileURL);
fileTransfer.download(
uri,
fileURL,
function (entry) {
console.log("Successful download...");
console.log("download complete: " + entry.toURL());
if (false && readBinaryData) {
// Read the file...
readBinaryFile(entry);
}
else {
// Or just display it.
displayImageByFileURL(entry);
}
},
function (error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
null, // or, pass false
{
//headers: {
// "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
//}
}
);
}
function displayImageByFileURL(fileEntry) {
var elem = document.getElementById('imageElement');
elem.src = fileEntry.toURL();
}
I'm using the latest versions of the file-transfer and file plugins (1.7.1/6.0.1). I have added the domain to the Content-Security-Policy element as mentioned in the example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://cordova.apache.org https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
When I run it up in the simulator (Android/iOS) from VS2017 the download fails silently. Neither the success or error callbacks are called, and it doesn't appear to generate a network request. The console log is as follows:
file system open: http_localhost_4400:Temporary
Downloading http://cordova.apache.org/static/img/cordova_bot.png to filesystem:http://localhost:4400/temporary/downloaded-image.png
That filesystem URL looked a bit odd to me, so I have tried other variants such as the full file path, using persistent storage instead of temporary, using 'cdvfile://localhost/persistent/downloaded-image.png', all with the same result. I'm at a loss as to how I can debug this further and wondering if I've missed something really obvious, so any advice appreciated...
Edit
I tried running it again today, and a dialog pooped up in Visual Studio with the message:
There is no handler for the following exec call:
FileTransfer.download("http://cordova.apache.org/static/img/cordova_bot.png", "cdvfile://localhost/persistent/downloaded-image.png", true, 1, null)
I did some more experimenting, including running it up in the VS simulator for Android. For some reason it had trouble connecting to cordova.apache.org (I was also unable to access this site in the browser on the emulator), but downloading a file from github worked correctly....
I have identified an Javascript library (incremental-dom) as both a global and external. I'm loading the library in a script tag.
When the rollup format is 'iife' the library in injected into the iife and everything works.
However when I use the 'es' format, the global is never referenced and the browser throws a type error:
Uncaught TypeError: Failed to resolve module specifier 'incremental-dom'
Here's my rollup.config.js file:
const path = require('path');
const root = process.cwd();
const string = require('rollup-plugin-string');
const superviews = require('rollup-plugin-superviews');
export default [
{
input: path.resolve(root, 'src', 'idx-admin-tab', 'component.js'),
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']})
],
globals: {'incremental-dom': 'IncrementalDOM'},
external: ['incremental-dom'],
output: {
file: path.resolve(root, 'dist', 'idx-admin-tab.es.js'),
format: 'es'
}
}
];
globals only works in the context of iife or umd output — if you're creating an es bundle, it will simply be ignored.
If you wanted to just use the browser's native import support, you would have to turn the module specifier incremental-dom into one that the browser can resolve — something like this:
export default [
{
// ...
external: ['incremental-dom'],
paths: {
'incremental-dom': '/node_modules/incremental-dom/dist/incremental-dom.js'
},
// ...
}
];
Unfortunately incremental-dom doesn't have an ESM build, so you can't import it. So if you don't want to bundle it, you will have to trick Rollup into using the global IncrementalDOM even in es mode.
You should be able to do that with rollup-plugin-virtual:
export default [
{
// ...
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']}),
virtual({
'incremental-dom': 'export default window.IncrementalDOM'
})
],
// ...
}
];
I have this problem in dart
Refused to load the image 'https://**.png' because it violates the
following Content Security Policy directive: "img-src 'self' data:
chrome-extension-resource:".
when try to set src in image element
ImageButtonInputElement button = new ImageButtonInputElement();
button.className="button_element";
button.src=el["imageUrl"]; //like "https://**.png"
whit this manifest.json
"content_security_policy":"img-src https://server.example.org"
Someone would know help me?
Thanks
Sorry for my bad English
EDIT
I have the same problem with
<iframe id="iframe" src="https://server.example.org/example.html"></iframe>
Refused to frame
https://server.example.org/example.html
because it violates the following Content Security Policy directive:
"frame-src 'self' data: chrome-extension-resource:".
This is the solution I have adopted in the end:
var imgRequest = new HttpRequest();
imgRequest.open('GET', url);
imgRequest.responseType = 'blob';
imgRequest.onReadyStateChange.listen((var request){
if (imgRequest.readyState == HttpRequest.DONE &&
imgRequest.status == 200) {
FileReader reader = new FileReader();
reader.onLoad.listen((fe) {
button.src = reader.result;
});
reader.readAsDataUrl(imgRequest.response);
}
});
imgRequest.send();
Apps cannot override the CSP. That manifest key is only for extensions.
See documentation for loading remote content for display.
Likewise, you have to use <webview> instead of iframes in a Chrome App.