Click events do not work due to Content Security Policy (CSP

[Jusaneym]

Hi,
I have implemented two inline events (click) into my topictoolbar: Here one of them as it is the most simple example (and the most important one):

Go to previouse window (and not the previous entry in TOC).
I use this one in context-sensitive help so that users can go back to the topic they come from (in case they clicked a link).

The click event is this one: window.history.back();


Locally, this works fine. But our company has a strict Content Security Policy, and I assume it is because of this why nothing happens when clicking the "Back" icon in our live environment.

This is the error message I get:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'


Has anyone experienced similar issues before? Does anyone know how to solve this?

Note that help is only available for users who are logged into our SaaS solution. We therefore cannot run analytics, too, because our security department hasn't whitelisted the madcapcentral api yet.

[NorthEast]

I'm no expert in CSP, but I think the CSP script-src 'self' will block any inline javascript - meaning it'll block any onclick="..." javascript in the HTML, which is how Flare implements the button click in the output.

However, the CSP will allow you to run javascript from a JS file though.
So instead of using click event for the toolbar button, you would add your own javascript that waits for the button to be clicked, and then runs the script for the button action.

If the toolbar button is called 'back' in the skin, it'll have a class of "back-button" in the output (inspect your output to check this).
The script below waits for ''button.back-button' to be clicked, then shows an alert and goes back in the history.

Code: Select all

$( document ).ready(function() {
   $('button.back-button').click(function(){
      alert('back clicked!');
      history.back();
   });
});

You add this as custom javascript on the toolbar skin Setup tab. In the output Flare puts this custom script in the toolbar.js file, so as it's run from a JS file and not inline, then it shouldn't be affected by the CSP.

[Jusaneym]

Thank you so much, Dave - This solved the problem!
I've tested your script and it works perfectly. I only removed the "back clicked!" message so that users won't notice any difference to the "standard" buttons.