[ASP.NET MVC] Cách xử lý inline script sau khi bật CSP

Sau khi bật CSP, tất cả các inline script trong trang web đều không hợp lệ. Bạn có 2 cách để xử lý

1. Di chuyển tất cả các script vào bên file javascript.
2. Thêm nonce-<dynamic string> vào mỗi đoạn script

Trong bài viết này, mình sẽ hướng dẫn các bạn cách thêm nonce vào mỗi đoạn inline-script trong project ASP.NET MVC.

Trường hợp bạn muốn thêm vào ASP.NET core, mình nghĩ sẽ rất dễ dàng vì có rất nhiều bài hướng dẫn.

Cài đặt NWebsec

NWebsec consists of several security libraries for ASP.NET applications. These libraries work together to remove version headers, control cache headers, stop potentially dangerous redirects, and set important security headers.

Trong Nuget package, gõ:

Install-Package NWebsec

 Mở Web.config,

<nwebsec>
    <httpHeaderSecurityModule xmlns="http://nwebsec.com/HttpHeaderSecurityModuleConfig.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="NWebsecConfig/HttpHeaderSecurityModuleConfig.xsd">
		<securityHttpHeaders>
			<content-Security-Policy enabled="true">
				<!--<script-src self="true">
					<add source="cdnjs.cloudflare.com" />
				</script-src>-->

				<script-src self="true">
					<add source="cdnjs.cloudflare.com" />					
					<add source="https://ajax.googleapis.com" />
					<add source="https://developers.google.com/speed/libraries" />
				</script-src>

				<style-src self="true" unsafeInline="true">					
					<add source="https://ajax.googleapis.com" />
					<add source="http://ajax.googleapis.com" />
				</style-src>
			</content-Security-Policy>
			<!--<x-XSS-Protection blockMode="true" policy="FilterEnabled"></x-XSS-Protection>
			<x-Content-Type-Options enabled="true"></x-Content-Type-Options>
			<x-Frame-Options policy="Deny"></x-Frame-Options>-->
		</securityHttpHeaders>		
    </httpHeaderSecurityModule>
  </nwebsec></configuration>

content-Security-Policy enabled="true": bật CSP cho trang web
script-src self="true": cho phép chèn file script từ host bên ngoài 

Thêm nonce vào trang cshtml

Ở đầu mở trang cshtml, bạn thêm namespace:

@using NWebsec.Mvc.HttpHeaders.Csp

Với mỗi đoạn script, bạn thêm @Html.CspScriptNonce()

<script @Html.CspScriptNonce() type="text/javascript">
	var helloFunctionName = 'logInfo';
	console.log('Test 2**********');
</script>

Kiểm tra trên trình duyệt Chrome: Ở response trả về: Header html: Content-Security-Policy script-src 'self' 'nonce-F43XKRu6L5FyoUga5kiH8fMm' cdnjs.clo... Và ở mỗi đoạn inline script sẽ có đoạn nonce tương ứng:

<script nonce="F43XKRu6L5FyoUga5kiH8fMm" type="text/javascript">
        var helloFunctionName = 'logInfo';
        console.log('Test 2**********');
        window[helloFunctionName]('window function');
</script>

Đối với các trang aspx

Mặc định, CSP sẽ được áp dụng cho tất các các trang aspx. Do cơ chế ASP.NET khác với ASP.NET MVC nên bạn cần xóa nonce-<dynamic string> ra khỏi header các file asp.net được tải về phía client