Resolve Hot Reload BrowserLink error with enabled CSP
Environment
Product | Telerik® UI for ASP.NET Core |
Description
New versions of Microsoft Visual Studio provide the Hot Reload and Browser Link Refresh features in order to facilitiate working with ASP.NET Core projects.
This creates a communication channel between the development environment and one or more web browsers. And since this communication is done with a javascript file connection, when you implement the Content Security Policy meta tag for your application you can see these errors:
browserLink:4 Refused to connect to 'http://localhost:.../8d05de7…/browserLinkSignalR/…owserLink.initializationData.browserId&browserId=...' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
send @ browserLink:4
browserLink:4 Refused to connect to 'http://localhost:.../8d05de7…/browserLinkSignalR/…owserLink.initializationData.browserId&browserId=...' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
send @ browserLink:4
aspnetcore-browser-refresh.js:329 Refused to connect to 'wss://localhost:.../TelerikProjectName/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @ aspnetcore-browser-refresh.js:329
Solution
To resolve this issue you can add connect-src ws: http: 'self';
to your CSP meta tag in the _Layout.cshtml
file:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self' https://kendo.cdn.telerik.com https://code.jquery.com/ https://cdn.kendostatic.com https://unpkg.com 'nonce-Telerik-Examples'; style-src 'self' https://kendo.cdn.telerik.com https://unpkg.com; font-src 'self' https://unpkg.com; connect-src ws: http: 'self';" />