Package causing CSP issues

[caranad]

Hi there,

It appears that when I'm implementing this module with CSP (script-src) you're relying on the regenerator-runtime package to bundle this module, which will end up triggering the following CSP error when I try it:

Thanks for all your assistance.

[SupremeTechnopriest]

Hello, let me see what I can do about that. I will be publishing a release candidate later today.

[SupremeTechnopriest]

Published 4.6.3-rc.1 to npm next tag. Install with npm i react-idle-timer@next and let me know if that build fixes your issue :)

[caranad]

Yikes, that was fast. Thanks for the quick response! I'll test it and get back to you.

[caranad]

Sir, you are a God amongst men. I salute you and your work, for your solution has SOLVED MY ISSUE! THANK YOU AND BLESS YOU! :D :D :D :D :D :D

[SupremeTechnopriest]

Glad to be of service! I will roll this out to the latest tag as soon as I resolve a few more issues. Until then feel free to use the next tag. I will update you here when you can switch back over!

[SupremeTechnopriest]

Hello @caranad,

I had to make a few changes to try and support older browsers that need the runtime. I checked the built code and theres no eval being called. Can you just confirm your CSP example still works with 4.6.3-rc.2?

Thanks!

[caranad]

Hi @SupremeTechnopriest,

Thanks for checking. Unfortunately the error comes back when I use 4.6.3-rc.2. The problem is with regenerator-runtime itself, and in particular runtime.js in the aforementioned package is causing the issue here:

[SupremeTechnopriest]

Yeah, thought it might. From what I've read about this issue, it involves use-strict; or something. Is your project a CRA by any chance? I think this is definitely a problem with regeneratorRuntime.... Here are a few threads that I found:

facebook/regenerator#378
facebook/regenerator#450

From what I gather here, if you were to remove strict mode, it should start working.

I need to ensure that this package supports old browsers. I tried to drop support for dead browsers (IE) and people were opening issues about it. Can you see if you can get it working using some of the methods in those threads? If not we can revisit. Maybe I can export an additional build without support for older browsers that you can import. Something like:

import IdleTimer from 'react-idle-timer/dist/modern

Let me know how you make out.

[caranad]

Correct - my app uses create-react-app. I have looked at those two threads previously, but unfortunately I could not make do with them. To the best of my knowledge, I don't have strict mode (by that I assume React.StrictMode) enabled on my application so that's definitely not what's causing it; and I definitely don't want to dabble with disabling strict mode on the browser since my app will be used by users who will liekly not be aware of such.

If you could export a build for modern browsers I'd appreciate that; right now I don't see IE support being enabled on my end.

[SupremeTechnopriest]

Sure can do. Im going to do a bit more research and see if I can fix this. Otherwise I will add a modern importable. In the mean time you can just work with 4.6.3-rc.1 and I will let you know when I have a solution.

[caranad]

Will do. Once more thank you so much for your work on this; I appreciate it. Best of luck on your efforts and if there's any way I can help let me know 🙂

[SupremeTechnopriest]

Can you send me your csp header so I can test some things locally?

[SupremeTechnopriest]

I can export a modern.js along side the current builds, but its not ideal because it breaks typescript definitions. Id rather figure out a way to resolve the issue with the current build system.

[caranad]

This is the CSP I'm using right now. Note that I censored the name of the site I'm working on for privacy reasons.

require-trusted-types-for 'script';
frame-ancestors 'self';
form-action 'self';
img-src 'self';
style-src-elem 'self' 'unsafe-inline';
default-src 'self';
script-src 'self' https://www..com https://cdnjs.cloudflare.com https://ajax.cloudflare.com https://js.stripe.com/v3 'nonce-${ nonce }';
style-src 'self' 'unsafe-inline';
object-src 'none';
base-uri 'self';
font-src 'self';
frame-src 'self' https://js.stripe.com/;
manifest-src 'self';
media-src 'self';
worker-src 'self' blob: https://cdnjs.cloudflare.com/;
connect-src 'self' https://firebasestorage.googleapis.com https://securetoken.googleapis.com https://www.googleapis.com;

[SupremeTechnopriest]

Thanks for that. I will hopefully find a good solution today.

[caranad]

Sounds good - let me know if anything arises

[SupremeTechnopriest]

Hey @caranad,

I just published 4.6.3-rc.4. What I did is created a modern browser export. If you are using Webpack 5 you can do:

import IdleTimer, { useIdleTimer } from 'react-idle-timer/modern'

If you are on Webpack 4 (which I believe CRA still uses), you have to do:

import IdleTimer, { useIdleTimer } from 'react-idle-timer/dist/modern'

In both cases typedefs should still work and there are no babel transpilations of any sort. For version 5 I plan to make this the default and if you want to support dead browsers you will have to:

// Webpack 5
import IdleTimer, { useIdleTimer } from 'react-idle-timer/legacy' 

// Webpack 4
import IdleTimer, { useIdleTimer } from 'react-idle-timer/dist/legacy' 

Can you take that for a spin and let me know if it resolves your issue?

[caranad]

Hi Randy,

I tried npm install --save [email protected] and it didn't work; says the package is missing.

[SupremeTechnopriest]

@caranad,

Looks like I forgot to publish it 😬. It's up now. Give that a go.

[SupremeTechnopriest]

@caranad

Did you have a chance to confirm this? I plan to roll it out today.

[caranad]

Not yet, I will do so now.

[caranad]

Yes, it works. Thanks!

[SupremeTechnopriest]

Perfect, going to roll this out shortly.

[SupremeTechnopriest]

@caranad 4.6.3 published to latest tag!