Angular 6: Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”)

Question

I'm working on an Angular 6 Project. My code works fine when I run the command

ng --serve

and also when I build it using

ng build

and deploying it on my local Tomcat Server. I face no errors, works perfectly fine.

But when I deploy the same onto my Apache HTTPD server on my Ubuntu Machine, I face with the below error on Firefox and Chrome respectively

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onfocusin attribute on DIV element.

Error: call to Function() blocked by CSP
compiler.js:22402

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: call to eval() or related function blocked by CSP.

I've referred many links and tried multiple options, still unsuccessful in resolving it. Any help would be highly appreciated.

Thanks in advance.

Answer 1

Faced this same problem when deploying an ongoing Angular 6 development to an IIS server (while the application works perfect in local dev environment).

After some research, it looks that Webpack output is not dealing well with an strict Content-Security-Policy, so you have to reduce it.

This can be achieved by adding some custom header with the relaxed CSP definition.

In my case (IIS/ASP.NET)...

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Content-Security-Policy" value="default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Find some examples of how to add a custom CSP in Apache here.

Update: Just as an additional info, refer to this angular-cli issue. There is mentioned by Clydin at Mar/19...

unsafe-eval is no longer required if using a production build (with the reflect polyfills removed as they are only needed for JIT).

unsafe-inline is still required for styles. If that's not acceptable for the project's requirements, the other option is to only use global styles in the application and to not use any Angular libraries which contain component styles. Note that the project will lose full benefits of the component-based architecture under this scenario.

So, probably you can modify the CSP definition if using AOT.