Query an external web service from a mango page
-
Hi guys,
Is it possible to query an external web service from a mango page?
I have included a GET and post-AJAX calls on a page.
The chrome console highlights the error "Refused to connect to" http: // localhost: 62224 / api / products' because it violates the following Content Security Policy directive: "connect-src ws: wss: 'self'". " -
Of course, I use angular js $http.post / get requests for my data.
That error however looks like you're trying to get something without the correct header information.
Best check with the service hosting the Api that sending from Mango's url is permitted and not treated as a loop unto itself. At least it appears to me it doesn't like local host in the name... -
Hi pierjsap,
@Jared-Wiltshire may have more to contribute, but in Mango 3.4.3 the content security policy configuration was exposed through the env.properties file as one means to mitigate various malicious actions.
edit. J.W. removed incorrect setting
Check out your Mango/classes/env.properties file to see all the content security settings. Swagger was affected by this in the current release, and requires adding exceptions for a font or disabling the content security policy.
-
As @phildunlap said we have implemented CSP (Content Security Policy) in the latest version of Mango. The following 2 links are very informative.
https://developers.google.com/web/fundamentals/security/csp/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSPBasically it blocks loading from or connecting to external domains unless they are whitelisted.
Please find the section in
${MA_HOME}/classes/env.properties
and copy it to yourenv.properties
in overrides. It will look a bit different to what @phildunlap originally posted above. I am going to make this a little easier to configure (multiple settings instead of all on one line) so check the release notes when you do your next Core update (you always should!).The current setting is
web.security.contentSecurityPolicy
, find theconnect-src ws: wss: 'self'
part and add the additional domain to the end. e.g.connect-src ws: wss: 'self' http://localhost:62224
. You need to include the port.Also note the comment in the
env.properties
file regarding websockets. I would highly recommend changing thews: wss:
part to your actual hostname. e.g.connect-src 'self' http://localhost:62224 wss://mangodomain.com
-
Hi Jared, Will
Thanks for this information. I am also getting a similar issue when trying to use the Google Maps example due to the CSP. One of the Angular scripts is also having issues:
https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.7.2/angular-locale_en-ca.js
I will take a look at this further to fix it.
Thanks
Ian -
Thanks guys ;)
-
@iperry said in Query an external web service from a mango page:
I am also getting a similar issue when trying to use the Google Maps example due to the CSP.
Correct, you need to whitelist the domain that Google Maps is loading from. I can find out the exact rules if you are having trouble.
@iperry said in Query an external web service from a mango page:
One of the Angular scripts is also having issues:
https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.7.2/angular-locale_en-ca.jsYep aware of this and will be looking at ways to include the locale files in the build so they don't have to be included via CDN. This really shouldn't affect too many people, if it does, whitelist https://cdnjs.cloudflare.com as a script-src.
Sorry this is a bit of a pain guys, its in the name of improving security.
-
This will let you use Google Maps, or just set it blank to disable CSP. Please be aware of the risks of disabling CSP.
web.security.contentSecurityPolicy=default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.google.com https://maps.googleapis.com; connect-src 'self' ws: wss:; img-src 'self' data: https://maps.google.com https://maps.gstatic.com
-
-
Good to know thanks Jared.