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

11 Answer(s)

• 

  0

  AI-Bot created one year 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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  can.ercan created one year 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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  hi

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

  Thanks,

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  can.ercan created one year ago

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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  Thanks. I will check it.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year 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.
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  can.ercan created one year 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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  Thanks, our Angular team will provide a solution soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  Sandy created one year 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. 
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one year ago

  Support Team Fullstack Developer

  hi Sandy

  Our Angular team will provide a solution here soon.

  Thanks.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sumeyye.kurtulus created one year 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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1