Rad Map CSP Setting for Bing

[Matt]

Does anyone know what the CSP (Content-Security-Policy) be implemented for both HTTP and HTTPS when using Bing for the MapLayer control?

This is what I have, which breaks the map feature:

     <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://aspnet-scripts.telerikstatic.com ;
             style-src 'self' 'unsafe-inline' https://aspnet-skins.telerikstatic.com ;
             font-src 'self' https://aspnet-skins.telerikstatic.com ;
             img-src 'self' https://aspnet-skins.telerikstatic.com " />

The error is: 

Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken...yada yada yada.. Refused to load the script 'http://dev.virtualearth.net/REST/v1/Imagery/Metadata/road?output=json&jsonp=bingTileParams&include=ImageryProviders&key=my key&callback=bingTileParams&_=1649186230772' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://aspnet-scripts.telerikstatic.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I'm new to having to use CSP so I could really use your help.

[Matt]

Also, is there a way to use the skins, fonts, and images locally so I don't need to use "unsafe"?

[Rumen]

Hi Matt,

You can use this syntax to list the allowed sources for HTTP and HTTPS addresses:

Content-Security-Policy: script-src <source> <source>;
Content-Security-Policy: font-src <source> <source>;

Here is an example of how to implement it for both HTTP and HTTPS CDNS for the Telerik AJAX components:

  <system.webServer>
	  <httpProtocol>
		  <customHeaders>
			  <remove name="X-Frame-Options"/>
			  <add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net http://aspnet-scripts.telerikstatic.com ;
             style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com;
             font-src 'self' https://d35islomi5rx1v.cloudfront.net https://fonts.gstatic.com/ http://aspnet-skins.telerikstatic.com/;
             img-src 'self' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://aspnet-skins.telerikstatic.com/"/>
		  </customHeaders>
	  </httpProtocol>
  </system.webServer>

You will probably also have to allow CSP access to Bing resources -> dev.virtualearth.net for img-src and style-src and styles.

You can find details on how to configure the Telerik AJAX components under CSP environment in this article: Content Security Policy Mode -> Working with Telerik UI for ASP.NET AJAX.

Content Security Policy without setting "unsafe" is not supported mainly because it is not supported by the MS AJAX client-side library of the ASP.NET Web Forms framework itself. MS AJAX uses functions like setTimeout(), setInterval(), inline scripts and eval(). Our controls were built on top of ASP.NET Web Forms and its MS AJAX library over a decade ago and thus follow a lot of its approaches. Even if we invest a huge amount of time to rewrite the source code of our AJAX components, there is no way to avoid the ones inside the code of the MS AJAX framework.

The MS AJAX problem with CSP is explained in the following documentation article Working with Microsoft AJAX.

Having the MS AJAX framework operation is a prerequisite for the UI for ASP.NET AJAX controls and so they also have the same requirements that cannot be avoided if you want the controls to function.

Best Regards,
Rumen
Progress Telerik

[Matt]

Thank you. I added this (below) to the web.config:

<remove name="X-Frame-Options"/>
<add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net http://aspnet-scripts.telerikstatic.com;
 style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net;
 font-src 'self' https://d35islomi5rx1v.cloudfront.net https://fonts.gstatic.com http://aspnet-skins.telerikstatic.com/;
 img-src 'self' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net "/>

But got this error:

Refused to load the script 'http://dev.virtualearth.net/REST/v1/Imagery/Metadata/road?output=json&jsonp=bingTileParams&include=ImageryProviders&key=[key_removed]&callback=bingTileParams&_=1649254582385' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net http://aspnet-scripts.telerikstatic.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Am I missing something?

 

[Rumen]

The error shows that you need to add the address http://dev.virtualearth.net responsible for the Bing scripts to the script-src part of the CSP value:

 

<remove name="X-Frame-Options"/>
<add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net http://aspnet-scripts.telerikstatic.com http://dev.virtualearth.net;
 style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net;
 font-src 'self' https://d35islomi5rx1v.cloudfront.net https://fonts.gstatic.com http://aspnet-skins.telerikstatic.com/;
 img-src 'self' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net "/>

 

This should solve the error.

You can also find attached a video demonstrating how to debug any similar errors and fix them one by one - it uses as a base the Overview RadMap demo. As you see there are a lot of third-party libraries used in the demos whose resources (images, scripts, and fonts) need to be included as trusted sources in order to load and work properly. The video is also available at https://www.youtube.com/watch?v=FWHUzMZKXE4. 

[Matt]

Thank you. You've been very helpful.

For everyone else who comes across this, this is what I ended up doing (that worked). I set the frame-ancestors as self to ensure I addressed a XSS vulernability.

<add name="Content-Security-Policy" value="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://d2i2wahzwrm1n5.cloudfront.net http://aspnet-scripts.telerikstatic.com http://dev.virtualearth.net;
                style-src 'self' 'unsafe-inline' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net;
                 font-src 'self' https://d35islomi5rx1v.cloudfront.net https://fonts.gstatic.com http://aspnet-skins.telerikstatic.com/;
                img-src 'self' https://d35islomi5rx1v.cloudfront.net http://aspnet-skins.telerikstatic.com http://aspnet-skins.telerikstatic.com http://dev.virtualearth.net http://ecn.t0.tiles.virtualearth.net/ http://ecn.t1.tiles.virtualearth.net http://ecn.t2.tiles.virtualearth.net/ 
				http://ecn.t3.tiles.virtualearth.net/;
				frame-ancestors 'self';"/>

[Rumen]

You are very welcome, Matt! 

I also updated the Working with Telerik UI for ASP.NET AJAX article with a link to this useful discussion and the video!

Keep up the great work!

Rumen