Content Security Policy
Content Security Policy lets you specify allowed locations and resources to be loaded when your storefront is accessed through a web browser. Follow the Content Security Policy best practices to protect against content injection vulnerabilities.
Content Security Policy is a tool that allows you to specify which locations and which types of resources are allowed to be loaded when your storefront is accessed through a web browser. You can use Content Security Policy to lock down your storefront app and mitigate the risk of content injection vulnerabilities, such as cross-site scripting (XSS), code injection, and clickjacking attacks, as well as reducing the privilege with which your storefront app executes.
It is highly recommended that you follow the Content Security Policy best practices described here, as well as in Security Headers in Backoffice Framework.
For more information about the W3C specification, see Content Security Policy
on the Open Web Application Security Project documentation site.
Target Policy
In the Content-Security-Policy security header, you can specify directives that define loading behaviors for target resource types. The following are recommended directives and corresponding targets:
default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self'
The following Content-Security-Policy headers are recommended to allow SmartEdit and other functionality to work with composable storefront, and to simultaneously help in preventing clickjacking:
default-src 'self' 'unsafe-inline' {commerce-occ-api-host} {smartedit-host}; img-src 'self' {commerce-occ-api-host} data:;frame-src 'none'; frame-ancestors 'self' {commerce-occ-api-host} {smartedit-host}; style-src 'self' 'unsafe-inline' fonts.googleapis.com use.fontawesome.com; font-src fonts.gstatic.com use.fontawesome.com
Working with Scripts
Scripts loaded from an allow-listed source using the <script> tag are still allowed. The following is an example:
<script src = "foo.js" type = "text/javascript" > </script >
Using the onClick Method
To handle events, you can set the event handler attributes of elements, or you can call element.addEventListener() from a script that has been loaded from an allow-listed site. The following is an example:
element.onclick = someFunction; element. addEventListener( "click" , someFunction, false ) ;
Using the setInterval Method
The following is an example of the recommended way to use the setInterval() method:
window.setInterval( myFunc, 10000 ) ;
Using the setTimeout Method
The following is an example of the recommended way to use the setTimeout() method:
self.timers.invite2xxTimer = window.setTimeout(function() {invite2xxRetransmission(retransmissions)}, timeout);