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

11 Answer(s)

• 

  0

  AI-Bot created 21 days 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 21 days 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 21 days ago

  Support Team Fullstack Developer

  hi

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

  Thanks,

  Save Cancel
• 

  0

  can.ercan created 21 days ago

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

  Save Cancel
• 

  0

  maliming created 21 days ago

  Support Team Fullstack Developer

  Thanks. I will check it.

  Save Cancel
• 

  0

  maliming created 20 days ago

  Support Team Fullstack Developer

  hi

  Do you also have this error message in your Chrome console?

  Refused to connect to 'http://localhost:4200/.well-known/appspecific/com.chrome.devtools.json' 
  because it violates the following Content Security Policy directive: "default-src 'none'". 
  Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
  

  Save Cancel

  1
• 

  0

  can.ercan created 20 days ago

  No, not on my computer. But a coworker got that error. When I tried it in my computer I get the Content-Security-Policy error.

  Save Cancel
• 

  0

  maliming created 20 days ago

  Support Team Fullstack Developer

  Thanks, our Angular team will provide a solution soon.

  Save Cancel

  1
• 

  0

  Sandy created 20 days ago

  [maliming] said: hi

  in my personal case I DO get that error and I don't know what to do :(

  Regards

  Do you also have this error message in your Chrome console?

  Refused to connect to 'http://localhost:4200/.well-known/appspecific/com.chrome.devtools.json'  
  because it violates the following Content Security Policy directive: "default-src 'none'".  
  Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. 
  

  Save Cancel
• 

  0

  maliming created 20 days ago

  Support Team Fullstack Developer

  hi Sandy

  Our Angular team will provide a solution here soon.

  Thanks.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 20 days ago

  Support Team Angular Expert

  Hello,

  We have identified the same problem on our side. I can recommend you to migrate to the new application builder using this command:

  yarn ng update @angular/cli --name use-application-builder
  

  Here is the official reference: https://angular.dev/tools/cli/build-system-migration#automated-migration-recommended

  After that, you need to remove the paths inside the tsconfig.json file

  {
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "downlevelIteration": true,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "importHelpers": true,
      "target": "ES2022",
      "module": "es2020",
      "lib": ["es2018", "dom"],
      "paths": {
      },
      "useDefineForClassFields": false
    },
    "angularCompilerOptions": {
      "enableI18nLegacyMessageIdFormat": false
    }
  }
  
  

  You can also use the es build for the localization registration inside app.config.ts

  import { registerLocaleForEsBuild } from '@abp/ng.core/locale';
  export const appConfig: ApplicationConfig = {
    providers: [
    //...
      provideAbpCore(
        withOptions({
          environment,
          registerLocaleFn: registerLocaleForEsBuild(),
        })
      ),
     //...
    ],
  };
  
  

  I will also be processing a refund for your ticket. Thank you for your cooperation.

  Save Cancel

  1