Getting "Refused to evaluate a string as JavaScript..." when trying to save a .less file.

[RomansBermans]

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

[Metric]

What version of the Atom editor are you using?

[RomansBermans]

I am using Version 0.85.0 (0.85.0)

[Metric]

I can't replicate it with any of my .less files on 0.85.0. Could you provide a sample .less file that is causing the issue constantly?

[RomansBermans]

Here you go https://gist.github.com/rerome/10474618

[Metric]

So, I removed all the .animation, .transition, .size and etc since I didn't have access to those .less files and it compiles just fine. The issue must be in one of the other .less files that is being imported.

Have you tried uninstalling LessCompile package and reinstalling it?

[RomansBermans]

I have disabled your package, restarted Atom and now I can save .less files without getting en error, but after reenabling your plugin the same thing starts to happen.

While trying to save the following .less file:

@import "define/lesshat.less";

* {
    margin: 0;
    .box-sizing('border-box');
}

I am getting this error:

Uncaught Error: JavaScript evaluation error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
 from `(function(value){return value=value||"content-box"})((function(){var args="'border-box'";return args=args.replace(/^\[|\]$/g,"")})())` 

It seems that your package fails because of the "Content Security Policy directive" error when trying to run the JavaScript function that handles .box-sizing('border-box'); from the lesshat.less (http://lesshat.madebysource.com/) mixin library.

[Metric]

There is nothing I can do about this then. The content security policy directive is controlled by Atom itself, and they didn't specify unsafe-eval in their policy for security reasons.

[RomansBermans]

Great, thanks. I will try getting in touch with them to see if there is a workaround.

[nathansobo]

You can use the loophole npm to replace eval with a version that actually works. We removed the ability to eval in arbitrary scripts to avoid users accidentally running code within arbitrary content.

[Metric]

Thanks Nathan! Loophole worked like a charm, but I couldn't use the default allowUnsafeNewFunction in loophole due to asynchronous callbacks of less.parse(). By the time it got to calling the .toCSS() the loophole.allowUnsafeNewFunction had already restored the global.Function to its original form. So I just used the Function from loophole and replaced the global.Function myself with it and then restored it after I called .toCSS().

I think you should provided a finishing callback for the executing function in allowUnsafeNewFunction and allowUnsafeEval to restore the global.eval and global.Function to their original form. That way you can do a simple callback when you are done using the allowUnsafe function for asynchronous callbacks.

0.4.0 of LessCompile was just released with the fix for this issue.

[RomansBermans]

Thanks Metric. Just checked it and I can confirm that it works.

[morcegon]

How can I install loophole to avoid this error? Thanks.

[Metric]

What version of Atom? I haven't updated the plugin for the latest version of it yet. I am still using 0.177.0, because the guys creating Atom can't seem to make up their minds for their underlying plugin apis. Almost every other update they change something in the apis it seems like.

I implemented the loophole into the actual implementation of the plugin, but if it isn't working in the latest build. Then that means they changed something to prevent the previous loophole method.

On Mon, Jul 20, 2015 at 11:35 AM, Renan Andrade notifications@github.com wrote:

How can I install loophole to avoid this error? Thanks.

— Reply to this email directly or view it on GitHub https://github.com/Metric/Less-Compile/issues/2#issuecomment-122942319.

[morcegon]

I'm use the latest version. The error was showed when I tried to compile a lesshat function.

[Metric]

Could you link me to an example less file of what you are trying to do? I would like to test it with the version of Atom I have, to see if the older version throws the same error.

On Mon, Jul 20, 2015 at 3:20 PM, Renan Andrade notifications@github.com wrote:

I'm use the latest version. The error was showed when I tried to compile a lesshat function.

— Reply to this email directly or view it on GitHub https://github.com/Metric/Less-Compile/issues/2#issuecomment-123019433.

[Metric]

Ahem, let me rephrase that. It seems to work in the latest version of Atom as well with lesshat.less.

Which lesshat thing are you trying to call that is causing this issue? I am now testing with Atom 1.0.2. I have tested several of the lesshat functions that use javascript for processing and they all work so far without throwing an error.

[zenyr]

I monkey-patched var Function = require('loophole').Function; at \.atom\packages\less-autocompile\node_modules\less\lib\less\tree\js-eval-node.js to fix this issue temporarily. yeah that's right, I modified less module which is stupid to begin with, but hey it works and won't break anything else. Maybe some async method escaped the original loophole implementation? Dunno.

A proper fix would be appreciated.

[Metric]

I still would like to know what lesshat function is causing this. Everything works fine on the latest version of atom on Mac for me. I have tried multiple lesshat functions that use JavaScript and they all work with no error.

Are you running the latest version of Windows Atom, Mac Atom or Linux Atom?

On Friday, August 7, 2015, Jinhyeok Lee notifications@github.com wrote:

I monkey-patched var Function = require('loophole').Function; at .atom\packages\less-autocompile\node_modules\less\lib\less\tree\js-eval-node.js to fix this issue temporarily. yeah that's right, I modified less module which is stupid to begin with, but hey it works and won't break anything else.

A proper fix would be appreciated.

— Reply to this email directly or view it on GitHub https://github.com/Metric/Less-Compile/issues/2#issuecomment-128624230.

[zenyr]

In my case I was on atom 1.0.5 @ Windows. And I was not using lesshat, but that is not the problem I think. The code was this mixin javascript eval line for splitting an image URL to insert @2x string between them:

@filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
@extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;

:)

[Metric]

Okay, so it appears to be an issue with Atom 1.0.5. I just updated to it on Mac, and boom lesshat now throws the same error when using .box-sizing again. Atom 1.0.4 and lower seems to work just fine.

[Metric]

I have opened an issue with Atom to see what is up with this. As it appears to be 1.0.5 causing this issue, while anything lower still worked as expected.

[morcegon]

Any update about this issue? Thanks.

[Metric]

Oops, sorry. The atom team and I came to the conclusion that it must be another plugin installed conflicting with the loop hole method on save for you guys that are experiencing this.

Everything is working fine here on Windows and Mac with the latest versions of atom. I have not made any changes to the code. I am only testing with this plugin and uglify plugin I created installed. The only other plugins installed are the default that come with atom. This is why the atom team and I believe it is another plugin causing the loophole fix I use to be overwritten before the less processor can fully complete.