Content Security Policy Support for Embedded Pages

Pages that include embedded Symphony content can include content security policies with some restrictions. Some guidelines for creating these policies include:

script-src Allow the domain used to serve Symphony. unsafe-inline or a nonce is required. unsafe-eval is not required.
style-src Allow the domain used to serve Symphony. unsafe-inline is required; nonce is not yet supported. unsafe-eval is not required.
font-src Allow the domain used to serve Symphony. Allow data: for embedded fonts.

Using Nonce

If you want to omit unsafe-inline for script-src, you must use a nonce in the page. The nonce should be a unique string that changes on each new page load.

To instruct the page that the nonce is allowed, include it in the script-src portion of your content security policy definition as nonce-<random string>. Next, add the same string as the value of the nonce attribute on the script tag you use to import the Symphony embed, as well as any scripts that call those embed functions.

When this is included, the embed system will include the nonce on any inline script tags it creates.

Example: index.html

html
<head>
	<meta
		http-equiv="Content-Security-Policy"
		content="
			font-src 'self' data:;
			style-src 'self' https://localhost:8080 'unsafe-inline';
			script-src 'self' https://localhost:8080 'nonce-abc123';
		"
	/>
</head>
<body>
	<script
		data-name="composer-embed-manager"
		src="https://localhost:8080/composer/embed/embed.js"
		nonce="abc123"
	></script>
	<script
		data-name="main-application-script"
		src="https://localhost/myApp/main.js"
		nonce="abc123"
	></script>
</body>

SYM-ZenDesk-v24.4.log-244413489.zip
50 KB Download

(v24) Content Security Policy Support for Embedded Pages

Content Security Policy Support for Embedded Pages

Using Nonce

Comments

Content Security Policy Support for Embedded Pages

Using Nonce

Related articles