Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) #9919

4 Answer(s)

• 

  0

  AI-Bot created 3 hours ago

  Support Team ABP Agent

  To resolve the Content-Security-Policy (CSP) error blocking image loading (such as favicon.ico) in your ABP Angular project, you need to adjust the CSP headers to allow images from the required sources.

  By default, ABP's Security Header Middleware may set a restrictive CSP like default-src 'none', which blocks all resources unless explicitly allowed. This causes the browser to block images, including the favicon.

  Solution:

  1. Locate the CSP configuration in your server-side (API or host) project. This is typically set in the ConfigureServices or OnApplicationInitialization method, or in the appsettings.json under SecurityHeaders.

  2. Update the CSP to allow images from your domain. For example, in C#:

  app.UseAbpSecurityHeaders(options =>
     {
         options.ContentSecurityPolicy = "default-src 'self'; img-src 'self' data:;";
     });
  

  • 'self' allows images from the same origin.
  • data: allows inline images (such as base64-encoded favicons).

  3. If you are using appsettings.json for configuration, update the relevant section:

  "SecurityHeaders": {
       "ContentSecurityPolicy": "default-src 'self'; img-src 'self' data:;"
     }
  

  4. Restart your application after making these changes.

  This will resolve the error and allow the favicon and other images to load.

  Sources:

  • https://abp.io/docs/latest/framework/ui/mvc-razor-pages/security-headers
  • https://abp.io/docs/latest/others/penetration-test-report

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  can.ercan created 2 hours ago

  I tried removing app.UseAbpSecurityHeaders();

  I also tried adding the following in ConfigureServices :

  Configure<AbpSecurityHeadersOptions>(options => { options.UseContentSecurityPolicyHeader = true; options.ContentSecurityPolicyValue = "default-src 'self'; img-src 'self' data:;";
  });

  Neither worked.

  Save Cancel
• 

  0

  maliming created 2 hours ago

  Support Team Fullstack Developer

  hi

  Have you removed app.UseAbpSecurityHeaders(); from all backend websites?

  Thanks,

  Save Cancel
• 

  0

  can.ercan created 46 minutes ago

  There is only one backend. I didn't split AuthServer. I removed it from Http.Host module.

  Save Cancel