Add support for script nonce attributes

Author: dustinsoftware

src/React.AspNet/HtmlHelperExtensions.cs

@@ -1,4 +1,4 @@
-/*
+/*
  *  Copyright (c) 2014-Present, Facebook, Inc.
  *  All rights reserved.
  *
@@ -8,8 +8,6 @@
  */
 
 using System;
-using React.Exceptions;
-using React.TinyIoC;
 
 #if LEGACYASPNET
 using System.Web;
@@ -129,16 +127,7 @@ public static IHtmlString ReactWithInit<T>(
 				}
 				var html = reactComponent.RenderHtml(clientOnly, exceptionHandler: exceptionHandler);
 
-#if LEGACYASPNET
-				var script = new TagBuilder("script")
-				{
-					InnerHtml = reactComponent.RenderJavaScript()
-				};
-#else
-			var script = new TagBuilder("script");
-			script.InnerHtml.AppendHtml(reactComponent.RenderJavaScript());
-#endif
-				return new HtmlString(html + System.Environment.NewLine + script.ToString());
+				return new HtmlString(html + System.Environment.NewLine + GetScriptTag(reactComponent.RenderJavaScript()).ToString());
 			}
 			finally
 			{
@@ -155,23 +144,40 @@ public static IHtmlString ReactInitJavaScript(this IHtmlHelper htmlHelper, bool
 		{
 			try
 			{
-				var script = Environment.GetInitJavaScript(clientOnly);
+				return GetScriptTag(Environment.GetInitJavaScript(clientOnly));
+			}
+			finally
+			{
+				Environment.ReturnEngineToPool();
+			}
+		}
+
+		private static IHtmlString GetScriptTag(string script)
+		{
 #if LEGACYASPNET
-				var tag = new TagBuilder("script")
-				{
-					InnerHtml = script
-				};
-				return new HtmlString(tag.ToString());
+			var tag = new TagBuilder("script")
+			{
+				InnerHtml = script,
+			};
+
+			if (Environment.Configuration.ScriptNonceProvider != null)
+			{
+				string nonce = Environment.Configuration.ScriptNonceProvider();
+				tag.Attributes.Add("nonce", nonce );
+			}
+
+			return new HtmlString(tag.ToString());
 #else
 			var tag = new TagBuilder("script");
 			tag.InnerHtml.AppendHtml(script);
-			return tag;
-#endif
-			}
-			finally
+
+			if (Environment.Configuration.ScriptNonceProvider != null)
 			{
-				Environment.ReturnEngineToPool();
+				tag.Attributes.Add("nonce", Environment.Configuration.ScriptNonceProvider());
 			}
+
+			return tag;
+#endif
 		}
 	}
 }

src/React.Core/IReactEnvironment.cs

@@ -1,4 +1,4 @@
-/*
+/*
  *  Copyright (c) 2014-Present, Facebook, Inc.
  *  All rights reserved.
  *
@@ -7,7 +7,6 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
-using System;
 
 namespace React
 {
@@ -109,5 +108,10 @@ public interface IReactEnvironment
 		/// Returns the currently held JS engine to the pool. (no-op if engine pooling is disabled)
 		/// </summary>
 		void ReturnEngineToPool();
+
+		/// <summary>
+		/// Gets the site-wide configuration.
+		/// </summary>
+		IReactSiteConfiguration Configuration { get; }
 	}
 }

src/React.Core/IReactSiteConfiguration.cs

@@ -8,8 +8,8 @@
  */
 
 using System;
-using Newtonsoft.Json;
 using System.Collections.Generic;
+using Newtonsoft.Json;
 
 namespace React
 {
@@ -193,5 +193,19 @@ public interface IReactSiteConfiguration
 		/// <param name="handler"></param>
 		/// <returns></returns>
 		IReactSiteConfiguration SetExceptionHandler(Action<Exception, string, string> handler);
+
+		/// <summary>
+		/// A provider that returns a nonce to be used on any script tags on the page. 
+		/// This value must match the nonce used in the Content Security Policy header on the response.
+		/// </summary>
+		Func<string> ScriptNonceProvider { get; set; }
+
+		/// <summary>
+		/// Sets a provider that returns a nonce to be used on any script tags on the page. 
+		/// This value must match the nonce used in the Content Security Policy header on the response.
+		/// </summary>
+		/// <param name="provider"></param>
+		/// <returns></returns>
+		IReactSiteConfiguration SetScriptNonceProvider(Func<string> provider);
 	}
 }

src/React.Core/ReactSiteConfiguration.cs

@@ -326,5 +326,23 @@ public IReactSiteConfiguration SetExceptionHandler(Action<Exception, string, str
 			ExceptionHandler = handler;
 			return this;
 		}
+
+		/// <summary>
+		/// A provider that returns a nonce to be used on any script tags on the page. 
+		/// This value must match the nonce used in the Content Security Policy header on the response.
+		/// </summary>
+		public Func<string> ScriptNonceProvider { get; set; }
+
+		/// <summary>
+		/// Sets a provider that returns a nonce to be used on any script tags on the page. 
+		/// This value must match the nonce used in the Content Security Policy header on the response.
+		/// </summary>
+		/// <param name="provider"></param>
+		/// <returns></returns>
+		public IReactSiteConfiguration SetScriptNonceProvider(Func<string> provider)
+		{
+			ScriptNonceProvider = provider;
+			return this;
+		}
 	}
 }

tests/React.Tests/Mvc/HtmlHelperExtensionsTests.cs

@@ -7,6 +7,8 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
+using System;
+using System.Security.Cryptography;
 using Moq;
 using React.Web.Mvc;
 using Xunit;
@@ -20,9 +22,10 @@ public class HtmlHelperExtensionsTests
 		/// This is only required because <see cref="HtmlHelperExtensions"/> can not be
 		/// injected :(
 		/// </summary>
-		private Mock<IReactEnvironment> ConfigureMockEnvironment()
+		private Mock<IReactEnvironment> ConfigureMockEnvironment(IReactSiteConfiguration configuration = null)
 		{
 			var environment = new Mock<IReactEnvironment>();
+			environment.Setup(x => x.Configuration).Returns(configuration ?? new ReactSiteConfiguration());
 			AssemblyRegistration.Container.Register(environment.Object);
 			return environment;
 		}
@@ -53,6 +56,60 @@ public void ReactWithInitShouldReturnHtmlAndScript()
 			);
 		}
 
+		[Fact]
+		public void ScriptNonceIsReturned()
+		{
+			string nonce;
+			using (var random = new RNGCryptoServiceProvider())
+			{
+				byte[] nonceBytes = new byte[16];
+				random.GetBytes(nonceBytes);
+				nonce = Convert.ToBase64String(nonceBytes);
+			}
+
+			var component = new Mock<IReactComponent>();
+			component.Setup(x => x.RenderHtml(false, false, null)).Returns("HTML");
+			component.Setup(x => x.RenderJavaScript()).Returns("JS");
+
+			var config = new Mock<IReactSiteConfiguration>();
+
+			var environment = ConfigureMockEnvironment(config.Object);
+
+			environment.Setup(x => x.Configuration).Returns(config.Object);
+			environment.Setup(x => x.CreateComponent(
+				"ComponentName",
+				new { },
+				null,
+				false
+			)).Returns(component.Object);
+
+			// without nonce
+			var result = HtmlHelperExtensions.ReactWithInit(
+				htmlHelper: null,
+				componentName: "ComponentName",
+				props: new { },
+				htmlTag: "span"
+			);
+			Assert.Equal(
+				"HTML" + System.Environment.NewLine + "<script>JS</script>",
+				result.ToString()
+			);
+
+			config.Setup(x => x.ScriptNonceProvider).Returns(() => nonce);
+
+			// with nonce
+			result = HtmlHelperExtensions.ReactWithInit(
+				htmlHelper: null,
+				componentName: "ComponentName",
+				props: new { },
+				htmlTag: "span"
+			);
+			Assert.Equal(
+				"HTML" + System.Environment.NewLine + "<script nonce=\"" + nonce + "\">JS</script>",
+				result.ToString()
+			);
+		}
+
 		[Fact]
 		public void EngineIsReturnedToPoolAfterRender()
 		{