Share via

Update panel not working with Content-Security-Policy in webconfig

  • Article

Question

Thursday, June 28, 2018 2:33 PM

Hi,

I have problem with Content-Security-Policy when add this header to my web.config my ajax update panel not working I don' t know why 

I configured Content-Security-Policy  correctly, I added  everything to my project as it needed,

<add name="Content-Security-Policy" value="default-src 'self'; font-src 'self' fonts.gstatic.com; media-src 'self';script-src 'self' remote.captcha.com; form-action 'self' localhost:58844; base-uri 'self';connect-src 'self';img-src 'self';style-src 'self' fonts.googleapis.com maxcdn.bootstrapcdn.com fonts.googleapis.com;"/>

but when I load my project update panel progress start to working I don't know why

Please help me 

Thanks.

All replies (1)

Friday, June 29, 2018 9:58 AM âś…Answered

Hi O.Masnournia,

As far as I know, websites have the same restriction for security. General speaking, website code is not allowed to access resources in other domains, and CSP tells the client (browser) to allow loading and not allowing loaded resources. The AJAX object XMLHttpRequest has the same restrictions. So Updatepanel should meet CSP.

In fact, we need to ensure that the returned html response has a CSP Header. And then Browser (requires some version support) will execute CSP.

Here is one of the most common ways to use CSP.

<meta
    http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net ;
             style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net ;
             font-src 'self' https://d35islomi5rx1v.cloudfront.net 'data:';
             img-src 'self' https://d35islomi5rx1v.cloudfront.net 'data:'"
     />

I have made a demo, wish it is useful to you.

Html.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-inline' 'unsafe-eval';
    style-src 'self' 'unsafe-inline' ;
    " />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(function () {
            alert("Hello world");
        })
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

How it works.

Please refer to the following link.

https://rehansaeed.com/content-security-policy-for-asp-net-mvc/

https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/content-security-policy

Feel free to let me know if you have any question.

Best Regards,

Abraham