Preview thumbnail of attached image file is not shown in UI

[leplatrem]

The URL is correct but it is blocked by Content-Security-Policy: The page’s settings blocked the loading of a resource

See

kinto/kinto/plugins/admin/views.py

Lines 30 to 40 in e8e55d1

	# Add Content-Security-Policy HTTP response header to protect against XSS:
	# only allow from local domain:
	allow_local_only = "; ".join(
	(
	"default-src 'self'",
	"img-src data: 'self'",
	"script-src 'self' 'unsafe-inline' 'unsafe-eval'",
	"style-src 'self' 'unsafe-inline'",
	)
	)
	request.response.headers["Content-Security-Policy"] = allow_local_only

(could have opened this issue but used remote-settiungs

[Angie-newbie]

Hello!
I would pick up this issue and work on it :)

[leplatrem]

Awesome!

[Angie-newbie]

Hi @leplatrem ,

I am new to this system, can you please provide the list of steps to replicate the issue? :)

[leplatrem]

Of course, I'm sorry, I'll try to give as much info as possible.

First make sure you can run the project locally (check out the docs) but in brief it would be:

git clone [email protected]:fork/kinto.git
cd kinto/
make pull-kinto-admin
make config/kinto.ini

You can pick the memory backend to skip postgresql stuff. But you'll have to repeat the account creation on each restart.

Now, we'll need the attachment plugin, it's installed by default in the docker container, but not when developping from sources:

.venv/bin/pip install kinto-attachment

Enable it in the config/kinto.ini:

 # https://kinto.readthedocs.io/en/latest/configuration/settings.html
@@ -35,6 +35,7 @@
 kinto.includes = kinto.plugins.default_bucket
                  kinto.plugins.admin
                  kinto.plugins.accounts
+                 kinto_attachment
 #                kinto.plugins.history
 #                kinto.plugins.quotas
+
+kinto.attachment.base_url = http://localhost:9999/
+kinto.attachment.base_path = /tmp

In one terminal, you run a server to deliver the attachment files:

cd /tmp
python -m http.server 9999

In another terminal, you serve the Kinto application:

make serve

Create the admin account:

curl -X POST http://127.0.0.1:8888/v1/accounts \
     -H "Content-Type: application/json" \
     -d '{"data": {"id": "admin", "password": "s3cr3t"}}'

Create a default collection to reproduce the bug:

curl -X PUT 'http://127.0.0.1:8888/v1/buckets/default/collections/bug-3386' \
     --user admin:s3cr3t \
     -H 'Content-Type: application/json' \
     --data-raw '{
       "data": {
         "schema": {
           "type": "object",
           "properties": {
             "title": { "type": "string" }
           }
         },
         "displayFields": ["title"],
         "attachment": {
           "enabled": true,
           "required": true
         },
         "id": "bug-3386"
       }
     }'

(I give the commands to make it easier to replay)

Now:

• Navigate to http://127.0.0.1:8888/v1/admin/
• Login with your credentials
• Create a record on the collection, add an image attachment
• Edit the record again
• Observe the message in the console: Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at http://localhost:9999/84736286-3dfc-4dfc-95d8-ba1db1e0579d.jpg because it violates the following directive: “img-src data: 'self'”

self here is too restrictive, the admin UI should be allowed to serve images from the kinto.attachment.base_url URL too.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Hope you make it through all of this! Have fun investigating and hacking!

[Angie-newbie]

Hi @leplatrem , Thank you for the setup steps!

After I attached a image on the record, and click "edit the record", the screenshot above is what I saw.
Which is really different to yours, and seems like the image file is gone.

Just wondering why the view is so different with the one you attached for this issue?

[leplatrem]

Can you check whether the attachments are enabled on the server?
Navigate to Home and check whether attachments is shown in the server information

(I just opened this issue to limit confusion Kinto/kinto-admin#3426)