Forbidden (Origin checking failed - chrome-extension:// does not match any trusted origins.)

Question

I'm trying to make a Django API app that allows me to save some actions that I will perform on my browser (web searches, calls, message sending, etc.) and see all this later on my own web site, I made a simple chrome extension to do that.

I deployed the web app already to Heroku and it works fine when CSRF protection is off, but when I add this protection I get the 403 error because: Origin checking failed - chrome-extension://theIDofMyExtension does not match any trusted origins.)

I already installed django-cors-headers library and make all the necesary setup (it worked on my own computer): https://pypi.org/project/django-cors-headers/

I added to the CSRF_TRUSTED_ORIGINS list the chrome-extension origin like this:

CSRF_TRUSTED_ORIGINS = ['chrome-extension://nfbjppodghgcapmokljafeckhkmbcogd']

I guess is not working because this reference: https://docs.djangoproject.com/en/4.0/ref/settings/#csrf-trusted-origins says that origins need to be https or http, the reference also says that request must have a referer header that matchs with origin host so I added a referer header to the chrome extension request as follows:

    let request = new Request(url, {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'text/plain',
      'X-CSRFToken': value.csrftoken,
      'X-Referer': 'tracking-leads.herokuapp.com',
    },
    body: JSON.stringify({
      info: value,
    }),
  });

I don't know what else to try so even if you are not sure about the response I will be happy to try your solution, I really didn't want to use csrf_excempt on any post request.

Answer 1

Well, I'm happy because I've resolved my own problem and I will put what I did: In this question add to ALLOWED_HOST on settings.py the local domain so I tried to do the same but adding the origin of my chrome extension and it worked!

ALLOWED_HOSTS = ["your-domain.herokuapp.com","chrome-extension://theIDofYourExtension"]