Security Table of Contents

• Basic
• Partials

The HTTP Content-Security-Policy (CSP) response header and meta tag allow website administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks. Therefore, we recommend specifying a Content Security Policy for every website and web app. Further information can be found in the Content Security Policy Reference. Basic# By specifying https://cdn.ui.porsche.com and https://cdn.ui.porsche.cn for default-src, style-src and script-src, all basic use cases should be covered. For example, this website currently uses the following one. Partials# However, the Porsche Design System requires and recommends the usage of partials for injecting styles/scripts and preloading assets. While partials for preloading are covered by whitelisting our CDN domains from above, partials that produce dynamic innerHTML are not. The ones affected are: getInitialStyles() required since v3.7.0 getLoaderScript() getDSRPonyfill() getBrowserSupportFallbackScript() getCookiesFallbackScript() To allow their result being executed by the browser there are two options: Apply a unique nonce attribute on the script and style tag that the partial produces and whitelist this nonce in the CSP header/meta tag Whitelist the script's and style's hashed content in the CSP header/meta tag While the 1st option might be easier to apply by post processing the partial's output it is important that the nonce is not reused which means a new nonce has to be generated each time the website is requested by a user. Our recommendation is to go with the 2nd option. To make integration easy, the affected partials accept the option { format: 'sha256' } in order to receive the hash that needs to be applied with single quotes in the CSP header/meta tag. The returned string from calling a partial, e.g. getInitialStyles({ format: 'sha256' }) is already wrapped in single quotes so it can be used directly in your policy. So an example integration could look like this.