How to implement Content Security Policy in angular application

Image

Learn to implement Content Security Policy in angular application

Angular

In this article we will discuss what is Content Security Policy and how to implement it for your angular application.

Content Security Policy (CSP) is extra layer of security which helps to detect and prevent different types of attacks like Cross-Site Scripting , data injection. These attacks are responsible for data theft, malware distribution.

How to add CSP to angular application

Add web.config file in your application 

Add below code to configuration > system.webServer > httpProtocol > customHeaders secton.

 <add name="Content-Security-Policy" value="
                frame-ancestors 'self';
                block-all-mixed-content;
                default-src 'self';
                script-src 'self' 'report-sample' 'unsafe-eval'
                style-src 'self' 'report-sample' 'unsafe-inline' fonts.googleapis.com;
                object-src 'none';
                frame-src 'self';
                child-src 'self';
                img-src 'self';
                font-src 'self' fonts.googleapis.com fonts.gstatic.com;
                connect-src 'self';
                manifest-src 'self';
                base-uri 'self';
                form-action 'self';
                media-src 'self';
                prefetch-src 'self';
                worker-src 'self';"/>

Update urls as per your requirement.

 

Complete web.config will look like below

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>    
        <httpProtocol>
            <customHeaders>             
                <add name="Content-Security-Policy" value="
                frame-ancestors 'self';
                block-all-mixed-content;
                default-src 'self';
                script-src 'self' 'report-sample' 'unsafe-eval'
                style-src 'self' 'report-sample' 'unsafe-inline' fonts.googleapis.com;
                object-src 'none';
                frame-src 'self';
                child-src 'self';
                img-src 'self';
                font-src 'self' fonts.googleapis.com fonts.gstatic.com;
                connect-src 'self';
                manifest-src 'self';
                base-uri 'self';
                form-action 'self';
                media-src 'self';
                prefetch-src 'self';
                worker-src 'self';"/>            
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>
Widget is loading comments...

Top Articles