Tippyjs: tippy bugs whem applying CSP guidelines to prevent XSS attacks

[dalescher]

I do not manage to benefit from certain functions when applying CSP guidelines (setting is display-src 'self').

I guess that the issue comes from the fact that this setting forbids the use of inline styling. I manage to get around the issue by using ID and class in the html code and style in the CSS sheet only.

However, I cannot find a way to use tippy arrows with this setting on. If i choose round arrow, the arrow stay within the tooltip, does not rotate, and its size gets bigger and bigger (1st tooltip: small, last tooltip on page: huge). when selecting sharp arrow, it does not even appear.

Is there a way to benefit from all tippy tooltip features while having this CSP setting on?

[atomiks]

I don't really know anything about that, sorry 😭

If you want to disallow HTML in tooltip content to prevent XSS you can set allowHTML: false.

Otherwise you might have to disable CSP and ensure you don't parse user input as HTML / escape it / validate it before sending it to the user.

[dalescher]

Thank you for your answer. I manage to get HTML within the tooltips without having issues with XSS (I just use IDs and class rather than inline html, works fine). The only issue I have is with the arrow that does not show up correctly. I guess it has to do with the fact that arrow code add some inline styling or script that is not allowed with my CSP settings

[atomiks]

Can you make a reproducible test case that I can check?

[dalescher]

Just launch a tooltip on an app with your server containing the following HTTP Header :
Content-Security-Policy: default-src 'self'
More informations on CSP here: [(https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)]

To be able to use tippy.all.js file with this CSP HTTP header setting, place it in your app JS folder rather than using the URL since CSP setting will avoid browser to navigate to it.

Then just use of your example with a round arrow. you should get error message in developper console when launching app on your local host

Here is how the tooltip is displayed:

I think that the problem might come from createArrowElement() function, especially from this part:
setInnerHTML(arrow, '<svg viewBox="0 0 24 8" xmlns="http://www.w3.org/2000/svg"><path d="M3 8s2.021-.015 5.253-4.218C9.584 2.051 10.797 1.007 12 1c1.203-.007 2.416 1.035 3.761 2.782C19.012 8.005 21 8 21 8H3z"/></svg>');

I have a message error in my console telling me this:
_jquery-3.3.1.min.js:2 Refused to load the image 'data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E' because it violates the following Content Security Policy directive: "img-src 'self'"._

I hope this give you a better understanding of the problem

[atomiks]

Have you seen: https://stackoverflow.com/questions/40360109/content-security-policy-img-src-self-data

[dalescher]

Thank you! It solved the message error I had. However, arrow still appear inside tippy and I still have this console error:

_Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://cdnjs.cloudflare.com https://fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-nc2qjOk5rtX9UVHwLt6riDajiUVm+k/VWY11CEzcjLQ='), or a nonce ('nonce-...') is required to enable inline execution.
(anonymous) @ utils.js:28_

which point to utils.js file at line 28. The block code is:

export const injectCSS = css => {
if (isBrowserSupported) {
const style = document.createElement('style')
style.type = 'text/css'
style.textContent = css
document.head.insertBefore(style, document.head.firstChild) // faulty line 28
}
}

it seems that this inject inline code and is then blocked by CSP. I prefer not use 'unsafe-inline' in my CSP policy for style-src. Do you have any idea how to get around this?

[atomiks]

Yes, avoid using all.min.js (which bundles the CSS), and use the tippy.min.js script and tippy.css stylesheet by linking them separately.

[dalescher]

It works! Thanks a lot atomiks, I would have not succeeded without you.