Content Security Policy in dev environment

đź’» Development app dev
1

Hello,

I need some help in order to set up the development environment.

Here is where I am stuck: I set up a docker-compose for nextcloud and a volume that maps the github-project into /var/www/html/custom_apps/contacts:

docker-compose.yml 

version: '2'

volumes:
 nextcloud:

services:
  app:
    image: nextcloud
    ports:
      - 8099:80
    volumes:
      - nextcloud:/var/www/html
      - ./contacts:/var/www/html/custom_apps/contacts
    restart: unless-stopped

In that folder I am running make watch-js, so my changes are compiled (works!)

But when I tried to load a foreign image with axios.get(${imageUrl}), I get a Content Server Policy error. This is where I need help: Is this a miss-configuration of my development environment? Or how can I load a picture from an external source? (Background: working on #1546 to sync profile pictures from facebook).

Thank you for your help :angel:

2

Hey! Thanks for your help :slight_smile:

Our CSP are quite strict for safety reasons :slight_smile:
Do you have some code to show me?
We’re doing axios requests all over our apps, and no issues with the csp so far :thinking:

3

Thank you for your reply!

I have forked the project here:

In ContactDetailsAvatar.vue line 338 / 344 of commit b61540e you can see my attempt. The function is triggered when clicking on a profile picture and selecting “load image from web”.

I also have quite a bunch of CSP errors, even when loading the unmodified parts (see below). But for some reason the cookbook application succeeds in downloading external content. This made me believe its an application setting, not a server policy.

csp
csp1135Ă—782 687 KB

4

Any ideas, what I am doing wrong?

5

I found out that most of the CSP errors are from my browser add-ons (for example the vue-devtools, which are blocked). Unfortunately the error coming from my access to an external image (caused by webpack?) remains - I am still looking for the right parameter to set (or modification of the command) to make the axios.get possible.

6

@ChristophWurst - I read your blog-post on this topic, but have difficulties to understand it. Could you help me here?

7

Well, I just could not figure out how to allow the domain for external images, so I have moved the code into the PageController. Seems a little complex, but works.
i have checked-in my changes in the git mentioned above, so take a look if you are interested. Comments are more than welcome!

social-profile
social-profile1375Ă—675 1.53 MB

8

Oh wow, sorry I missed those messages :slight_smile:
The forum is not the best to get quick feedback for app dev, I’m not there all the time :frowning:
Awesome work here!

This is a known issue for firefox. Chrom/ium doesn’t have this problem, nothing wrogn with your setup :rocket:

9

Regarding fetching external images, this is indeed on purpose, we only allow same site requests as far as I remember. It will require a dedicated php service for it I guess :thinking:
But seeing your last message you made it work! :tada:

10

I think you wanted to show external images, right? Sounds like something like https://github.com/ChristophWurst/nextcloud_sentry/blob/1caa25df76f6102ac9a65ecaddc18995c1fefd69/lib/AppInfo/Application.php#L95 is necessary to allow the external domain or some proxy code so the server downloads and returns the image.

11

Thank you for your replies and the encouragement!
@ChristophWurst - this was exactly what I was looking for! It works perfectly for the test-image from github, but unfortunately it doesn’t work for facebook - firefox thinks it’s a tracker and blocks the request (which is good, normally). So I think I will keep the complex construct with the server-side request, unless you have another hint…

12

In that case the proxy-through-server might be your best bet.

13

Perfect - that is good to know!
For this use case, I think I’ll keep it in the Controller as the image shall end up in the contact - on the server - anyways.
Thank you for your helpful hints

14

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.