Why are FQDN (ending with a dot) not working in CSP?

Question

I have a FQDN in my CSP:

The source list for the Content Security Policy directive 'img-src' contains an invalid source: 'xxx.de.'. It will be ignored.

This is my csp:

default-src 'self'; script-src 'self' 'unsafe-inline' 
'unsafe-eval' www.xxx.de; style-src 'self' 'unsafe-inline'; 
font-src 'self' data:; img-src 'self' xxx.de.; frame-src 'self' 
www.youtube-nocookie.com xxx.de;

Why are domains having a dot at the end not allowed in CSP?

I need to link to this URL, and I need to have a CSP, this is my current CSP, the spec does not appear to allow me to describe the URL I have, how can I work around this?

Answer 1

Because the specs say so.

The host-source:

host-source = [ scheme-part "://" ] host-part [ ":" port-part ] [ path-part ]

requires a host-part:

host-part = "*" / [ "*." ] 1*host-char *( "." 1*host-char )

which has to end with a host-char:

host-char = ALPHA / DIGIT / "-"

… which cannot be a ..

The path-part:

path-part = path-absolute (but not including ";" or ",") ; path-absolute is defined in section 3.3 of RFC 3986.

is defined elsewhere:

path-absolute ; begins with "/" but not "//"

… which has to start with / so cannot consist entirely of ..

Answer 2

Here is my problem:

https://upload.wikimedia.org./wikipedia/commons/thumb/8/8a/2006-02-13_Drop_before_impact.jpg/396px-2006-02-13_Drop_before_impact.jpg 
                           ^^^

I can neither reference it in the img-src-attribute nor change the URL nor remove the csp-directive. I can not display that image.

You have a unique situation where the URL you need to allow through your CSP contains a trailing dot in the domain name, and CSP does not support such syntax.
Since you cannot change the URL or remove the CSP, you are essentially locked into a scenario where the standard tools at your disposal are not sufficient.

Given these constraints, one approach would be to create a server-side proxy that fetches the image from the FQDN with the trailing dot and then serves it under your own domain. Your server-side code could make an HTTP request to the original URL, fetch the image, and then serve it as a response to a request to a URL on your own domain.
That way, you can add your own domain to the img-src directive in your CSP, and you are in compliance with the CSP specifications.

For example, in a Python Flask app, a simple proxy endpoint might look like this:

import requests
from flask import Flask, Response, request

app = Flask(__name__)

@app.route('/proxy_image/<path:subpath>')
def proxy_image(subpath):
    base_url = "https://upload.wikimedia.org./wikipedia/commons/"
    target_url = f"{base_url}{subpath}"
    
    response = requests.get(target_url)
    
    if response.status_code == 200:
        return Response(response.content, content_type=response.headers['Content-Type'])
    else:
        return Response(f"Unable to fetch image. Status code: {response.status_code}", status=response.status_code)

if __name__ == '__main__':
    app.run()

Then you could update your CSP to allow images from your own domain:

img-src 'self' your-domain.com;

That will allow you to display the image without modifying the original URL or removing the CSP directive.