Mitigating Cross-Site Scripting (XSS) Attacks With A Strict Content Security Policy (CSP) In ColdFusion 2021

component
	accessors = true
	output = false
	hint = "I provide methods for generating Content Security Policy (CSP) headers and logging violations."
	{

	// Define properties for dependency-injection.
	property config;
	property logger;
	property secureRandom;

	// ---
	// PUBLIC METHODS.
	// ---

	/**
	* I return the Content Security Policy (CSP) configuration, including the inline
	* nonce and the relevant HTTP Headers.
	*/
	public struct function getCspConfig() {

		// When CSP violations are blocked by the browser, the browser will (eventually)
		// report those violations to this end-point.
		var reportToUrl = "#config.url#index.cfm?event=api.csp.report";
		// The nonce (N-once) is a unique value that is generated fresh on for page
		// request. It is then included in the CSP header and must match "nonce"
		// attributes in scripts tags as a means denote the script tags as trusted. You
		// can think if it kind of like a reverse CSRF-Token.
		var nonce = secureRandom.getEncodedBytes( 16, "base64" );

		var directives = [
			// Configure how script tags are allow-listed. "nonce-{token}" requires
			// script tags to include the "nonce" attribute with the given value.
			// "strict-dynamic" allows already-trusted scripts to programmatically load
			// additional scripts without supplying a nonce attribute. "https:" is a
			// fallback for Safari, which doesn't support "strict-dynamic".
			// "unsafe-inline" is a fallback for really old browsers.
			// --
			// NOTE: The browsers are smart enough to ignore the older, looser script
			// tag directives if they also support "strict-dynamic". As such, the
			// presence of these does not reduce the strength of the policy.
			"script-src 'nonce-#nonce#' 'strict-dynamic' https: 'unsafe-inline'",
			// Deny all object media loads (such as Flash/SWF plugins).
			"object-src 'none'",
			// Block injection of <base> tags, which a malicious actor could use to
			// change the loading of relative-path script tags.
			"base-uri 'none'",
			// Report CSP violations to the the following end-point. Older browsers use
			// the report-uri directive while newer browsers use the Report-To header.
			"report-uri #reportToUrl#",
			"report-to csp-endpoint"
		];

		// NOTE: While the Report-To HTTP header is technically broader in scope than the
		// Content-Security-Policy HTTP header, I have no other use for it at this time.
		// As such, I'm defining it as part of the CSP configuration (especially since
		// the two headers have to agree on the reporting group). This may change in the
		// future if I ever need an additional reporting end-point.
		return({
			nonce: nonce,
			header: {
				name: "Content-Security-Policy",
				value: directives.toList( "; " )
			},
			reportToHeader: {
				name: "Report-To",
				value: serializeJson({
					group: "csp-endpoint",
					max_age: 10886400,
					endpoints: [
						{
							"url": reportToUrl
						}
					]
				})
			}
		});

	}


	/**
	* I log Content Security Policy violations (as reported by the browser).
	*/
	public void function logReport( required string content ) {

		// Ignore noisy end-points (I know these are getting blocked).
		if ( content.reFindNoCase( "/resources/jing/[^.]+\.swf" ) ) {

			return;

		}

		logger.info(
			"CSP violation.",
			{
				content: content
			}
		);

	}

}

component
	output = false
	hint = "I define methods for securely generating random values."
	{

	/**
	* I return a cryptographically secure random byte.
	*/
	public numeric function getByte() {

		// NOTE: In Java, bytes are signed. Which means that the left-most bit (of the
		// byte) indicates the sign of the byte. In order to not jump through hoops to
		// convert a random INT into a SIGNED BYTE, we'll just produce an INT in the
		// range that we know will fit nicely into a byte. We're still exercising all
		// 8-bits.
		return( javaCast( "byte", getInt( -128, 127 ) ) );

	}


	/**
	* I return a cryptographically secure random binary value with the given length (ie,
	* a byte array).
	*/
	public binary function getBytes( required numeric byteCount ) {

		var bytes =  arrayNew( 1 )
			.resize( byteCount )
		;

		for ( var i = 1 ; i <= byteCount ; i++ ) {

			bytes[ i ] = getByte();

		}

		return( javaCast( "byte[]", bytes ) );

	}


	/**
	* I return a cryptographically secure random binary value with the given length
	* encoded using the given encoding.
	*/
	public string function getEncodedBytes(
		required numeric byteCount,
		string encoding = "hex"
		) {

		return( binaryEncode( getBytes( byteCount ), encoding ) );

	}


	/**
	* I return a cryptographically secure random integer between the two values,
	* inclusive. This method lays the groundwork for the rest of the component methods.
	*/
	public numeric function getInt(
		required numeric minValue,
		required numeric maxValue
		) {

		return( randRange( minValue, maxValue, "SHA1PRNG" ) );

	}


	/**
	* I return a cryptographically secure random token of the given length. The token
	* is composed of URL-friendly characters.
	*/
	public string function getToken( required numeric tokenLength ) {

		// The set of character inputs that we can compose the random token.
		var charset = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var charsetCount = charset.len();

		var letters =  arrayNew( 1 )
			.resize( tokenLength )
		;

		for ( var i = 1 ; i <= tokenLength ; i++ ) {

			letters[ i ] = charset[ getInt( 1, charsetCount ) ];

		}

		return( letters.toList( "" ) );

	}

}

component {

	public void function onRequestStart() {

		// ... truncated for demo.

		request.template = {
			type: "standard",
			statusCode: 200,
			statusText: "OK",
			csp: contentSecurityPolicy.getCspConfig()
		};

		// ... truncated for demo.

	}

}

<cfscript>

	// Set the strict Content-Security-Policy.
	cfheader( attributeCollection = request.template.csp.header );
	cfheader( attributeCollection = request.template.csp.reportToHeader );

</cfscript>

<script
	type="text/javascript"
	src="/linked/dist/js/main.js"
	async
	nonce="#encodeForHtmlAttribute( request.template.csp.nonce )#">
</script>

<cfscript>

	httpRequestData = getHttpRequestData();
	// Once I added the logging for CSP violations, they were all showing up as
	// byte-arrays. I'm not sure why, but the browser(s) seem to be posting the
	// reports as binary encodings. As such, I'm encoding the binary into a
	// UTF-8 charset if it arrives as a byte-array.
	content = isBinary( httpRequestData.content )
		? charsetEncode( httpRequestData.content, "utf-8" )
		: httpRequestData.content
	;

	application.contentSecurityPolicy.logReport( content );

	request.template.content = {
		ok: true
	};

</cfscript>