The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

However, this is causing an error in the JavaScript console:

The stylesheet '' was not loaded because it violates the Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

My Django app is a djangae (Django + GoogleAppEngine) example app that I'm using as a starting point for my project. You can find it here: https://github.com/davide-ceretti/googleappengine-djangae-blog.

I am implementing this import in base.html. How can I resolve this issue? I suspect it's a setting problem, but I have been unable to pinpoint it.

p.s. I am encountering the same error with another import:

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
cssdjangogoogle-app-engine

Answer №1

Don't forget to update your settings.py with the following:

# Make sure our security policy is as strict as possible
CSP_DEFAULT_SRC = ("'none'",)
CSP_STYLE_SRC = ("'self'", 'fonts.googleapis.com')
CSP_SCRIPT_SRC = ("'self'",)
CSP_FONT_SRC = ("'self'", 'fonts.gstatic.com')
CSP_IMG_SRC = ("'self'",)

For more information, check out http://www.w3.org/TR/CSP/

Answer №2

Implementing a Content Security Policy for a django application is a simple process, and for your specific case, the header should resemble the following:

Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com; connect-src 'self'; img-src 'self' www.google-analytics.com; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com;
  1. Begin by installing django-csp using pip.
  2. Modify your project's settings module to include the "django-csp" middleware in your list of middleware classes (e.g. as 'csp.middleware.CSPMiddleware', refer to installation guide)
  3. Add the specified CSP header above to enhance security.

Additional helpful resources:

Answer №3

This issue arises from the HTML5 browser. To resolve it, check out this informative article on adjusting your headers:

Furthermore, there exists a useful Django application dedicated to managing this particular header:

Best of luck with resolving the issue!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with loading styles in Django

I'm having trouble getting custom styles to load on my Django site. I have a static file that won't load. Here's what I've tried so far: Inside my main folder, where manage.py resides, I have a static folder. Inside that, there is a CS ...

djangodjango-templatesdjango-staticfiles

Is it usual for the container to overflow with div content?

Is this common CSS behavior? How can we make the container wrap around the button? http://jsfiddle.net/afrontrow/yepw7oLw/ CSS: .button { background: grey; padding: 10px 20px; } .container { border: 1px solid black; } HTML: <div class= ...

css

Issue with iOS Mobile Safari Navigation Bar/Toolbar when changing orientation

Experiencing some unexpected behavior with iOS mobile safari on version 13.3. I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While ever ...

htmlcssmobile-safari

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

htmlcssbuttonhyperlinkdreamweaver

django-haystack is throwing an error message stating that it is unable to access the index located at search/xapian/xap

I'm currently working on implementing a search feature on my Django website using django-haystack with xapian backend. I followed the instructions provided at: However, when I try to perform a search, I encounter the error message: Unable to open ind ...

djangodjango-haystackxapian

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

javascriptcssreactjstwitter-bootstrap

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

htmlcssvue.js

What is causing the variations in line heights on this webpage?

I have recently created a test webpage, and I noticed that despite using the same CSS style, the line heights are different. This discrepancy is more prominent when viewing the page in Chrome and highlighting the usage of the .instruction class. It appears ...

htmlcssmargin

Options for Printing HTML - Explore Different Techniques for Creating HTML Printouts and Weigh the Advantages and Disadvantages

As I work on maintaining an application, I am faced with the task of printing out a report. However, my curiosity extends beyond this assignment as I wonder about the various ways to format an HTML page for optimal printing results and the advantages and d ...

htmlcssprinting

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS r ...

javascripthtmlcssflexbox

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

Django's Challenge with Form Hierarchies

I crafted a login form that looks like this: class LoginForm(AuthenticationForm): username = forms.CharField (label=_("User"), max_length=30, widget=forms.widgets.TextInput(attrs={'id':'username','maxlength&ap ...

djangoformsauthentication

What is the best way to create a box-shadow with an inset effect and a touch of

Looking to dive into the world of css3 design and wondering how to achieve a box-shadow inset with a touch of transparency. Check out the example in this fiddle link: http://jsfiddle.net/TeGkt/4/ Any ideas on how to replicate this effect without relying ...

htmlcss

Retrieve the information located within the error section of an Ajax request

When sending an ajax request to a Django view, I am including data in the response based on certain logic. return JsonResponse(content={ "Message": "user is not present.", },status=400) This response falls under the error section ...

jqueryajaxdjango

Retrieving the User ID from the window's LocalStorage

I am currently working on a DjangoRestFramework / Vue.js application where I have been using this.requestUser = window.localStorage.getItem("username"); to retrieve the logged user. The main purpose of this was to check if a user was logged in or not. Howe ...

djangovue.jsdjango-rest-frameworkdjango-authentication

Issue with multiple dropdown menus not closing when clicked on

The current implementation provides the functionality to convert select boxes into list items for styling purposes. However, a drawback of the current setup is that once a dropdown is opened, it can only be closed by clicking on the document or another dr ...

javascriptjqueryhtmlcss

Django Follow Table

Is there a way to modify my code so that the user who is currently logged in cannot follow themselves? I attempted using unique_together but it was unsuccessful. I plan to implement a button on other users' profile pages that will allow the logged in ...

pythondjangodjango-models

Switching the navbar image with HTML and JavaScript when clicked

Looking to change the image upon clicking on any of the navbar items. Emulating the navigation bar behavior from this website : This is my current progress : The HTML file : <html lang="en"> <head> <meta charset="utf-8" /> ...

javascripthtmlcss

Manipulating Width in CSS

I am facing a challenge with the HTML code below where an automated software inserts the initial CSS style g2f0 <div class="linelevel row"> <div class="g2f0 col-sm-6 form-group"> <label for="name">Name</label> < ...

jqueryhtmlcsstwitter-bootstrap