CSP error for bootstrap image in navbar hamburger

user_11014221 0
Viewed 112

I just added content security policy to my Django site. I have everything working correctly except these two errors for images that I had no idea what they were enter image description here

I spent a bunch of time trying to figure it out until I noticed that the icon on the bootstrap hamburger menu was gone

enter image description here

In the CSS I found this telling me that this must be the image in the navbar causing this error.

enter image description here

I found a few workarounds online but they presented security vulnerabilities and i would like to do it properly How can I go about solving this issue.

CSP

CSP_STYLE_SRC = ("'self'", 
    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
    ...
    
    )
  
CSP_SCRIPT_SRC = ("'self'",
    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/",
    ...

    )
bootstrap-5 twitter-bootstrap django
1 Answers

From the code snippets, it looks like you are using https://django-csp.readthedocs.io/en/latest/configuration.html package to handle the setting of the CSP directives and that is a great choice for the Django projects.

The most secure scenario would be if you allow loading of the content from the same domain and strictly forbid any other resources, it isn't practical though. A good enough strategy would be if you allow 'self' and only explicit paths like https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css. Values like https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/, cdn.jsdelivr.net or https: could raise concerns as they will be allowing a wide range of resources.

In your case data: might be required for the img-src directive or default-src which will act as a fallback in case you don't have an explicit img-src directive value.

https://csp-evaluator.withgoogle.com/ could give you more security recommendations for your current CSP configuration and specific domains that you are using.

user_4734710
Related