In chrome app I am trying to load images from external link but getting error
Refused to load the image
'unsafe:https://www.google.co.in/images/srpr/logo11w.png' because it
violates the following Content Security Policy directive: "img-src
'self' blob: filesystem: data: chrome-extension-resource:
I already added content_security_policy in manifest.json file
"content_security_policy": "img-src 'self' https://www.google.co.in/ blob: filesystem: data: chrome-extension-resource:;"
and
also explicitly added URL protocols to Angular's whitelist using a regular expression
.config(['$compileProvider',
function ($compileProvider) {
var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0, -1)
+ '|chrome-extension:'
+ currentImgSrcSanitizationWhitelist.toString().slice(-1);
console.log("Changing imgSrcSanitizationWhiteList from " + currentImgSrcSanitizationWhitelist + " to " + newImgSrcSanitizationWhiteList);
$compileProvider.imgSrcSanitizationWhitelist(newImgSrcSanitizationWhiteList);
}
]);
but still error is there.
You cannot override CSP for Chrome Apps (that key is only for extensions).
You will need to adapt your App to fetch then locally cache the images - you can't embed them directly. See Google's guide on Referencing external resources.
Also, take another look at this question - if you're getting unsafe: in your URLs you aren't doing it correctly.
Related
I've been stuck with this for days and finally decided to ask out. I've read dozens of issues, pages here but none of them solved my problem. I have an application built on top of this boilerplate: https://github.com/codesbiome/electron-react-webpack-typescript-2022 (the boilerplate isn't important as much, but there are some webpack configs there). I've read the documentation and it says that I should define a protocol for rendering images in this case, like this
app.whenReady().then(() => {
protocol.registerFileProtocol('atom', (request, callback) => {
const filePath = url.fileURLToPath(
'file://' + request.url.slice('atom://'.length),
);
callback(filePath);
});
});
This responds with an error "refused to load resource", even with content security policy set like this:
<meta
http-equiv="Content-Security-Policy"
content="
worker-src atom:;
child-src atom: gap:;
img-src 'self' atom: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
/>
If I change atom to something like blob or file it errors with "it is not allowed to load resource".
I'm rendering it inside react, like this
const image_path = `atom://${image.path}`;
<img src={image_path} />
Turning off security doesn't work, and even if it did I don't find it as an acceptable answer. I'm trying to read the file off of the local machine and I've looked up how some other applications that use electron are doing it (by uploading it to their servers). But I'm still wondering if something like this was even possible without an additional server as I want the app to work offline. Thank you.
I am trying to pull in the current URL to use in my fetch command, but I received an error when attempting to parse the URL via window.location. It appears that this URL use is not allowed, but I'm not sure of another alternative to achieve what I'm looking for. I'm avoiding setting a string so I can adapt my React setup to multiple environments.
Error:
Error: only absolute urls are supported
Line creating the error:
console.log(protocol + '//' + hostname + ':' + port + '/api' + window.location.search);
Variables:
var urlPath = window.location.pathname;
var hostname = window.location.hostname;
var protocol = window.location.protocol;
var port = window.location.port;
I prefer dotenv. Then all you need to do is to create a .env file. There are a couple ways of loading it into your app.
Webpack(not the npm package listed above, instead is webpack-dotenv-plugin)
import DotenvPlugin from 'webpack-dotenv-plugin';
plugins: [
new DotenvPlugin({
sample: './.env.default',
path: './.env',
}),
Not webpack
As early as possible:
require('dotenv').config()
consider the following scenario:
My express server dynamically generates HTML for the "/" route of my single page application.
I would like to re-serve this same generated HTML as the service worker navigateFallback when the user is offline.
I'm using https://www.npmjs.com/package/sw-precache-webpack-plugin in my webpack configuration.
If I generate an index.html via html-webpack-plugin, say, and set index.html as my navigateFallback file, that generated file gets served correctly by the service worker.
However, I can see no way to cause the on-the-fly rendered index html (what the live server returns for the "/" path) to be cached and used as the offline html.
Use dynamicUrlToDependencies option of Service Worker Precache to cache your route url and its dependencies. Then set navigateFallback to '/' and navigateFallbackWhitelist to a regex matching your sublinks logic.
Take this configuration : (Add const glob = require('glob') atop of your webpack config)
new SWPrecacheWebpackPlugin({
cacheId: 'my-project',
filename: 'offline.js',
maximumFileSizeToCacheInBytes: 4194304,
dynamicUrlToDependencies: {
'/': [
...glob.sync(`[name].js`),
...glob.sync(`[name].css`)
]
},
navigateFallback: '/',
navigateFallbackWhitelist: [/^\/page\//],
staticFileGlobsIgnorePatterns: [/\.map$/],
minify: false, //set to "true" when going on production
runtimeCaching: [{
urlPattern: /^http:\/\/localhost:2000\/api/,
// Use network first and cache as a fallback
handler: 'networkFirst'
}],
})
That use case should be supported. I have an example of something similar using the underlying sw-precache library, and I believe the syntax should be equivalent when using the Webpack wrapper.
In this case, /shell is the URL used for dynamically generated content from the server, constituting the App Shell, but it sounds like your use case is similar, with / instead of /shell.
{
// Define the dependencies for the server-rendered /shell URL,
// so that it's kept up to date.
dynamicUrlToDependencies: {
'/shell': [
...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`),
...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`),
`${SRC_DIR}/views/index.handlebars`
]
},
// Brute force server worker routing:
// Tell the service worker to use /shell for all navigations.
// E.g. A request for /guides/12345 will be fulfilled with /shell
navigateFallback: '/shell',
// Other config goes here...
}
I've run a pen test tool (Burp) against my node(express)/angular application and it identified a reflected XSS vulnerability specifically when attempting a GET request for static assets (noticeably vulnerabilities were not found for any of the requests being made when a user interacts with the application).
The issue detail is:
The name of an arbitrarily supplied URL parameter is copied into a
JavaScript expression which is not encapsulated in any quotation
marks. The payload 41b68(a)184a9=1 was submitted in the name of an
arbitrarily supplied URL parameter. This input was echoed unmodified
in the application's response.
This behavior demonstrates that it is possible to inject JavaScript
commands into the returned document. An attempt was made to identify a
full proof-of-concept attack for injecting arbitrary JavaScript but
this was not successful. You should manually examine the application's
behavior and attempt to identify any unusual input validation or other
obstacles that may be in place.
The vulnerability was tested by passing an arbitrary url parameter to the request like so:
GET /images/?41b68(a)184a9=1
The response was:
HTTP/1.1 404 Not Found
X-Content-Security-Policy: connect-src 'self'; default-src 'self'; font-src 'self'; frame-src; img-src 'self' *.google-analytics.com; media-src; object-src; script-src 'self' 'unsafe-eval' *.google-analytics.com; style-src 'self' 'unsafe-inline'
X-XSS-Protection: 1; mode=block
X-Frame-Options: DENY
Strict-Transport-Security: max-age=10886400; includeSubDomains; preload
X-Download-Options: noopen
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 52
Date: Wed, 08 Oct 2015 10:46:43 GMT
Connection: close
Cannot GET /images/?41b68(a)184a9=1
You can see that I have CSP in place (using Helmet to implement) and other protections against exploits. The app is served over https, but no user auth is required. CSP restricts request to the app's domain only plus google analytics.
The pen test report advises validating input (I am, but surely that would make requests including data sent by a user unsafe if I wasn't?), and encoding html which angular does by default.
I'm really struggling to find a solution to preventing or mitigating this for those requests for static assets:
Should I whitelist all requests for my application under csp?
Can I even do this, or will it only whitelist domains?
Can/should all responses from node/express to requests for static assets be encoded in some way?
The report states that "The name of an arbitrarily supplied URL parameter is copied into a JavaScript expression which is not encapsulated in any quotation marks". Could this expression be somewhere in the express code that handles returning static assets?
Or that GET request param can somehow be evaluated in my application code?
Update
Having done some investigation into this it seems that at least part of the mitigation is to escape data in url param values and sanitize the input in the url.
Escaping of the url is already in place so:
curl 'http://mydomain/images/?<script>alert('hello')</script>'
returns
Cannot GET /images/?<script>alert(hello)</script>
I've also put express-sanitized in place on top of this.
However, if I curl the original test the request param is still reflected back.
curl 'http://mydomain/images/?41b68(a)184a9=1'
Cannot GET /images/?41b68(a)184a9=1
Which you would expect because html is not being inserted into the url.
The responses to GET requests for static assets are all handled by app.use(express.static('static-dir')) so the query is passed into this. express.static is based on serve-static which depends on parseurl.
The cause of the issue is that for invalid GET requests express will return something like:
Cannot GET /pathname/?yourQueryString
Which in many cases is a valid response, even for serving static assets. However, in my case and I'm sure for others the only valid requests for static assets will be something like:
GET /pathname/your-file.jpg
I have a custom 404 handler that returns a data object:
var data = {
status: 404,
message: 'Not Found',
description: description,
url: req.url
};
This is only handled for invalid template requests in app.js with:
app.use('/template-path/*', function(req, res, next) {
custom404.send404(req, res);
});
I've now added explicit handlers for requests to static folders:
app.use('/static-path/*', function(req, res, next) {
custom404.send404(req, res);
});
Optionally I could also strip out request query params before the 404 is returned:
var data = {
status: 404,
message: 'Not Found',
description: description,
url: url.parse(req.url).pathname // needs a var url = require('url')
};
I am trying to retrieve data from mobile data services using bluemix.
The code that I am using is:
jQuery.ajax({
type: 'GET',//POST
url: 'https://mobile.ng.bluemix.net:443/data/rest/v1/apps/c3b20173-b6a4-42d0-b543-93da13c1953e/objects?classname=Report&start=0&num=0',
headers: {"IBM-Application-Secret": "2fc3aa67db1ab71a80f4f38aa1770ff802120848"},
data: data,
dataType: 'json',
crossDomain: true,
success : getData,
error : throwError
})
function getData(data)
{
console.log('GOT REPORT' + JSON.stringify(data));
}
function throwError(data)
{
/*var query = Bluemixdata.Query.ofType("Report");
query.find({Severity: "SEV 4"});
console.log('Pallavi'+ JSON.stringify(query));*/
console.log('GOT REPORTError' + JSON.stringify(data));
}
but on executing the control is moving to throwError method somehow may be its not hitting the URL.
Please suggest if I am doing anything wrong. Want to acknowledge that I am getting data through bluemix console and via postman but not able to retrieve using code.
Even tried to retrieve data using Bluemixdata.Query.ofType("Report"); but getting IBMBluemix not defined error message that should be thrown as <script type="text/javascript" src="js/Bluemix/IBMBluemix.js"></script> is already defined in index.html above all the below given js
LogCat Console Output:
08-13 14:36:21.993: E/AndroidProtocolHandler(21658): Unable to open asset URL: file:///android_asset/www/default/js/Bluemix/cordova_plugins.js
08-13 14:36:22.343: I/chromium(21658): [INFO:CONSOLE(10)] "calling bluemix initialize with values----------------", source: file:///android_asset/www/default/js/Services.js (10)
08-13 14:36:22.423: I/chromium(21658): [INFO:CONSOLE(13)] "---- IBM Bluemix Initializing ------", source: file:///android_asset/www/default/js/Services.js (13)
08-13 14:36:22.433: I/chromium(21658): [INFO:CONSOLE(16)] "HiPal", source: file:///android_asset/www/default/js/Services.js (16)
08-13 14:36:22.433: I/chromium(21658): [INFO:CONSOLE(17)] "GOT A PERSON ----[object Object]", source: file:///android_asset/www/default/js/Services.js (17)
08-13 14:36:22.453: I/chromium(21658): [INFO:CONSOLE(36)] "GOT REPORTError{"statusText":"Not Found","status":404,"response":"","responseType":"","responseXML":null,"responseText":"","upload":{"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null},"withCredentials":false,"readyState":4,"timeout":0,"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null}", source: file:///android_asset/www/default/js/BarChart.js (36)
Is there a reason you are using jQuery.ajax to formulate your REST request? I suspect there is something wrong with the way you are configuring the request.
If you are going to use our hybrid SDK, you can use the APIs we provide, located here to accomplish the same thing.
I also notice that the Bluemix Cordova plugin is having some problems. Try removing your android platform from your cordova project and re-add it. You can try the same with the plugins.
Also, I recommend checking out the sample bluemixcordovadata for more detailed usages and general help.
Warning: Please avoid pasting your app secret since this is a public forum.