Here is the example how it appear in Chrome dev tools:
setTimeout(console.log(`String`), 100);
String Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source ofscript in the following Content Security Policy directive: “script-src’self’ ‘unsafe-inline’ https:”.
What does this alert means and what is the security concern of using setTimeout with strings?
Advertisement
Answer
You’re using setTimeout wrong.
When you append parens after a function in JS, it immediately calls the function, and “replaces” the expression with the return value of that function.
But, with setTimeout, you don’t want to call that function, you want setTimeout to call it! To do that, you give the function to setTimeout without calling it, and setTimeout will call it internally for you when the timer goes off.
But your code does call the function, console.log, and only gives its return value (undefined) to setTimeout. setTimeout doesn’t throw an error though – it has an old “feature” that if you pass a string to it, it evaluates it as if you used eval.
undefined is not a string, but neither is it a function, so when the timer expires, setTimeout will cast it to a string ("undefined") and try to eval it. That’s why you get the warning.
You can fix this by passing your function to setTimeout “the good way”: wrap your call into another function. This way, your outer function will call console.log when it is called, so you can pass that to setTimeout:
setTimeout(() => console.log(`String`), 100);