Solution for livereload problems with new CSP rules

ionic-v1
1

Since the introduction of the cordova-whitelist-plugin and Content Security Policy we have to add rules if we want to external ressources (ajax/scripts/css/images).

Today I stumbled on a problem with livereload on an android device. If you don’t add some special rule the livereload script is not evaluated due to the CSP and you’ll have an error like this

Refused to load the script 'http://192.168.0.99:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".

and therefore no livereload functionality.

I don’t know if livereload is used a lot by ionic developers here but for me this CSP tag solved the problem

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 192.168.0.99:35729">

You should replace the ip adress with the one of your development machine. Strangely it didn’t work with a wildcard.

Could be interesting to have this handled automatically by ionic if possible? :smile:

Hope this helps.

2 Likes
2

Does anybody know if this depends on the platform?

At work on my Mac I certainly had this problem.
But now at home on my linux machine I don’t need the CSP for livereloading at all.

Or I’m seeing problems that don’t exist :wink:

3

Replacing script-src 'self' with script-src * should fix it as a workaround. I say as a workaround because it’s not very good from a security point of view.

And yes it would be nice if the ionic starter templates already included some working CSP rules. I’ll look into submitting a patch when I have some time.

5 Likes
4

Without CSP rules livereload works fine. But if you run on Android it keeps logging a warning every second or so that you don’t have those rules.

If you add CSP rules suggested by the whitelist plugin doc then livereload stops working. At least that’s what I’m seeing, on both Mac and Linux.

5

You cant use script-src * its throw error.
Better try something like that:

<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:35729">

But set your path over my http://localhost:35729

1 Like
6

Allowing only http://localhost:35729 would work for ionic serve but not if you want to use livereload when running in an emulator.

This seems to work fine in all cases for me

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

You’ll probably want to replace that with some safer rules for a release build of course.

8 Likes
7

this rules work fine for me aswell, thanks

8

Its compatible with CORS rules like this guide or not?

9

Content Security Policy and CORS are two separate things. CORS is the web service declaring which apps are authorized to call the service.

Content Security Policy is kind of the opposite: it’s the app that declares which services can be called.

1 Like
10

CSP pretty much breaks my ionic run development flow when it comes to live reload.
Isn’t there something that can be done to avoid * or specifying one or more IP addresses for script-src. Both options kinda beat the point of CSP.

Any word from @jbavari1, @mhartington?

11

I’m using Google Maps and live-reload with this rule:

<meta http-equiv="Content-Security-Policy"
      content="default-src *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://*.gstatic.com
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           ;
               style-src  'self' 'unsafe-inline'
                           127.0.0.1
                           http://*.gstatic.com
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
">

I am using ionic serve --address 127.0.0.1 and have a CORS rule for the loopback address on my backend server

3 Likes
12

Thanks! This is working for me as well.

Regards,

Christian

1 Like
13

:thumbsup: :thumbsup:

14

I don’t know if things have changed on android since this post (or maybe I am doing something slightly different) but I found that for remote loading of scripts (such as weinery) on a local network IP address I need to declare the IP address in both script-src AND connect-src:


    <meta http-equiv="Content-Security-Policy"
          content="
          default-src 'self' data: gap:
                      ;
          font-src    'self'
                      ;
          img-src     'self'
                      https://csi.gstatic.com
                      http://openweathermap.org
                      ;
          style-src   'self' 'unsafe-inline'
                      ;
          script-src  'self'
                      https://maps.googleapis.com
                      https://csi.gstatic.com
                      http://192.168.1.80:*
                      ;
          connect-src 'self'
                      http://api.openweathermap.org
                      http://192.168.1.80:*">