CSP

[markusv]

Hi,

it seems that this library uses inline styles to add its styling. This is a problem for the recommended CSP style rule:

style-src 'self'

I would be happy to include the css in my project, and this problem would be fixed..

Regards,
Markus

[aronhelser]

what is CSP?

[markusv]

CSP stands for Content Security Policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

[aronhelser]

Does this commit: 82e3f88 address your concern? It looks like you can set 'insecure=false' as a property and avoid style injection. Or am I misunderstanding the issue?

…

On Mon, Apr 9, 2018 at 2:11 AM, Markus Voss ***@***.***> wrote: CSP stands for Content Security Policy https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#340 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnbZJye3LfppAxg0rUM1CyGX2C5zmks5tmvuAgaJpZM4Ph19i> .

[myfoxtail]

@aronhelser the thing is that your styles are being embedded on the page by one of your js files and it does not work with strict content security policy unless you put the hash.

So the question is can you move all your styles to a separate css file?

[aronhelser]

@myfoxtail could you try out the insecure=false option and tell me if that fixes the issue? I'm not sure if the styles are still included, but just not injected?

[myfoxtail]

Hi @aronhelser

Thank you for the response. insecure=false option removes styles from the header tag which is cool, but I cannot find any css file I can add to my bundle.

I'm afraid that the package you deliver with npm does not contain any css files (please refer to image below):

Though I can see that it's in the source code.

[plondon]

I also can't find the default styles in the package (and what if we want to customize the styles?)

I think a better way to do this would be to use webpack_nonce. Other libraries face the same issue for strict CSPs, see styled-components/styled-components#1022 for example. Working on a PR for this.

[plondon]

#412

[AdrienLemaire]

@aronhelser is the insecure prop still needed now that ce365fe was merged ?

[jorrit]

Personally, I would prefer to include the CSS file myself. It would be great if the CSS file would be added to the NPM package. On my site, the dynamic CSS file is sometimes inserted a little too late, displaying the popup text.

[roggervalf]

Already change the style imported.

[fabiolmorato]

If anyone has issues with this and cannot enable the style-src 'unsafe-inline' CSP rule, do this:

import { Tooltip } from "react-tooltip";

import "react-tooltip/dist/react-tooltip.css";

export function Test () {
  return (
    <Tooltip
      // ...
      disableStyleInjection="core"
    />
  );
}

[z-akashGupta]

@fabiolmorato How to do it they have react-tooltip@3.11.1 and cannot update this? As old version does not have css file in it

[danielbarion]

@z-akashGupta this solution is for >= v5, I strongly recommend you to update it as we did a lot of improvements on v5.