locked
Update panel not working with Content-Security-Policy in webconfig RRS feed

  • Question

  • User-549756379 posted

    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.

    Thursday, June 28, 2018 2:33 PM

Answers

  • User-330142929 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 29, 2018 9:58 AM