typed.js cursor animation issue using strict Content Security Policy for style-src

[mik-kul]

Description

Greetings!

Unless my web server is configured with a CSP using style-src 'unsafe-inline', the cursor does not blink.
Apologies if this is not an actual issue pertaining to typed.js, but i'm looking for a workaround. Any suggestions?
I think this has to do with the style attribute that is changed/appended by type.js
Is there a way to add a nonce in typed.js file or elsewhere somehow or any other obvious workaround I am missing?

Many thanks and regards!

Steps to Reproduce

1. Update web server header configuration and set CSP style-src 'self'; (remove 'unsafe-inline')
2. Restart web server.

Expected behavior:
Typed cursor should blink.

Actual behavior:

1. Typed cursor does not blink (static).
2. CSP errors when running test on Google Lighthouse or Domsignal
3. Mozilla Observatory reports CSP as severe security issue.

Reproduces how often:
100%

[mattboldt]

Interesting. To get the blinking animation, you could copy the CSS from here and insert it into your project manually. I'll have to figure out how to provide the CSS some other way without injecting a style tag.

typed.js/src/initializer.js

Lines 171 to 188 in f0759c1

	css.innerHTML = `
	.typed-cursor{
	opacity: 1;
	}
	.typed-cursor.typed-cursor--blink{
	animation: typedjsBlink 0.7s infinite;
	-webkit-animation: typedjsBlink 0.7s infinite;
	animation: typedjsBlink 0.7s infinite;
	}
	@keyframes typedjsBlink{
	50% { opacity: 0.0; }
	}
	@-webkit-keyframes typedjsBlink{
	0% { opacity: 1; }
	50% { opacity: 0.0; }
	100% { opacity: 1; }
	}
	`;

[mik-kul]

thanks for your reply, @mattboldt

the suggested workaround of placing the typed cursor CSS code in an external style sheet works fine.

i also tried adding a nonce attribute to the style tag and the CSP. the style tag that is appended to the HTML by typed.js needs a nonce attribute and value that corresponds to that of the nonce in the CSP. this way the style tag will be rendered and the cursor will blink even with unsafe-inline removed for style src inside the policy. this can be done manually in HTML or inside the js itself.

generating and using a hash for the code:

.typed-cursor{ opacity: 1; } .typed-cursor.typed-cursor--blink{ animation: typedjsBlink 0.7s infinite; -webkit-animation: typedjsBlink 0.7s infinite; animation: typedjsBlink 0.7s infinite; } @keyframes typedjsBlink{ 50% { opacity: 0.0; } } @-webkit-keyframes typedjsBlink{ 0% { opacity: 1; } 50% { opacity: 0.0; } 100% { opacity: 1; } }

should be fine also

[titanism]

Would love this to be resolved or have a documented solution (without custom hacks and using npm package) 🙏

[mattboldt]

Honestly I think the best solution for now is to pass the autoInsertCss: false option to Typed, and copy the CSS above into your app however you're managing stylesheets. TypedJS probably shouldn't be injecting styles automatically anyway, hence why there's a security policy that prevents it.

In a new version, I'm gonna consider removing the auto generated css entirely, and include a CDN link to the css in the docs, but I'll also include the raw css you can copy and paste and customize if you like. This way the JS code doesn't make any assumptions about your setup or inject unexpected tags into your html.

[titanism]

Thank you @mattboldt we missed the autoInsertCss option 🔥

[mik-kul]

fantastic!

autoInsertCss: false and providing CSS elsewhere (that is not blocked by the CSP) is the most elegant solution!

thank you @mattboldt