Sinon causing 'unsafe-eval' error in Chrome extension unit tests

Recently, I've been conducting unit tests on my Chrome extension using Mocha, Chai, and Sinon. However, I encountered an issue when attempting to stub an object from a method:

EvalError: 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' blob: filesystem: chrome-extension-resource:".

at createProxy (js/lib/sinon.js:2488:86)
at Function.create (js/lib/sinon.js:2549:29)
at Function.create (js/lib/sinon.js:3337:42)
at Object.stub (js/lib/sinon.js:3289:32)
at Context.<anonymous> (js/spec/sf-companion.spec.js:44:19)
at Test.Runnable.run (js/lib/mocha.js:4529:15)
at Runner.runTest (js/lib/mocha.js:4974:10)
at js/lib/mocha.js:5057:12
at next (js/lib/mocha.js:4899:14)
at js/lib/mocha.js:4909:7

test-runner.html:

http://pastebin.com/ij5kD2rY

If anyone has any insights or guidance on how to resolve this issue, I would greatly appreciate it. Thank you in advance.

javascriptunit-testinggoogle-chrome-extensionsinonsinon-chai

Answer №1

To avoid cross site scripting, the eval function has been disabled by Google.

To address this issue, you can include the following code in your manifest.json

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Contributed by: abhilash

Check it out here

Answer №2

When discussing the safe usage of eval in Chrome extensions, a policy restriction was emphasized: scripts must be moved out-of-line into separate JavaScript files, inline event handlers should use addEventListener instead, and eval() is disabled.

The documentation warns against using eval inside an extension because it grants access to everything in the extension's high-permission environment, making it dangerous.

However, due to the prevalence of libraries utilizing eval() for performance enhancements and ease of expression, the concept of sandboxing was introduced as a secure way to incorporate these libraries without compromising security.

To create and utilize a sandbox effectively, manifest files need to be listed. Each file intended to run within a sandbox must be included in the extension manifest by adding a sandbox property as shown below:

{
  ...,
  "sandbox": {
     "pages": ["sandbox.html"]
  },
  ...
}

For further guidance and sample code on creating sandboxes, refer to the provided documentation.

In addition, checking this GitHub thread - unsafe-eval security error in chrome extension may also offer insights, including information on a previously resolved issue related to this topic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How is it possible for JavaScript functions to be accessed prior to being defined?

Similar Question: Why can I access a function before it's declared in JavaScript? Unexpectedly, the following code results in an error due to the undefined Foo: window.Foo = Foo; This code snippet also triggers the same error: window.Foo = Foo ...

javascriptfunctionsyntax

Choosing an item in an AngularJS select directive from an external origin

I'm currently working on developing a form using Angular JS for editing venue details such as address and city. The backend system is powered by Django and offers a REST API (Django Rest Framework) which I am interfacing with through Restangular serv ...

javascriptdjangoangularjsrestdrop-down-menu

JavaScript: A guide to finding CSS properties within a string

Checking for CSS Properties in Over 1,000 Sentences Is there a way in Javascript to check sentences against a built-in CSS index? Currently… If I need to search for CSS properties in the sentences below, I have to create an array containing all the CS ...

javascriptjquery

Reveal the hidden div by sliding it up from the bottom

I have a container with brown branches resembling the image, and I'm looking to hide it. When a button is clicked, I want it to reveal from the bottom to the top, almost like it's being unmasked. I've ruled out a typical bottom-up slide anim ...

javascriptjquerycss

Tips for implementing a search function with DynamoDB using the "contains" operator

I'm currently working on implementing a search function in my React application. Here is the structure of my DynamoDB table: --------------------- movie_id | movie_name --------------------- 1 | name a --------------------- 2 | name b ...

javascriptreactjsamazon-web-servicesamazon-dynamodbserverless-framework

Issues with button hover causing background transition difficulties

I've been trying to achieve a smooth background image transition upon hovering over my buttons. Despite searching for solutions in various posts, I haven't been successful in applying any of them to my code. I realize that J Query is the way to ...

javascriptjqueryhtmlcss

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

I am attempting to change the value of an HTML input field from C# code behind. These inputs are created through a JavaScript loop, so I have not had much success using run at server or assigning values through <%= %>. Below is my script: var mytab ...

javascriptc#jqueryasp.nethtml

Error Message: A key is being provided to the classes property that is not implemented in the current context

Trying to customize Material-UI styles with makeStyles() as outlined in the documentation but encountering a warning when passing a classname in the parent component that is not specified in useStyles. The warning message reads: Warning: Material-UI: th ...

javascriptreactjsmaterial-ui

What is the best method for integrating opensea-js using a script tag in a vanilla HTML/JS environment?

Is there a way to incorporate opensea-js into an html/js project that does not rely on node.js? The source code for opensea-js is only available on github and npm at https://github.com/ProjectOpenSea/opensea-js I came across this link: However, when I tr ...

javascripthtmlblockchainethereumopensea

Shiny silver finish using three.js technology

I have recently started exploring three.js and am attempting to replicate a cube that looks like this: https://i.sstatic.net/CO9Eq.jpg One aspect I'm struggling with is creating the material for my cube. The material appears to be a silver polished fi ...

javascriptthree.js

jquery disable document manipulation function

I need to make some updates to a simple function that involves the current textarea. $(document).on("keydown", updated_textarea_var, function (e) { // do stuff }); To achieve this, I tried disabling the previous function and running a new one w ...

javascriptjquery

Include an extra hyperlink in the adaptive menu bar

I have successfully created a responsive Navigation bar. Now, I would like to add an "Account" link on the right side of the navigation. My initial thought was to insert a div into a ul element, but I realize that this may not be W3C compliant. <div c ...

javascriptjquerycssresponsive-designnavigation

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5

React - Although the array in the state is being updated, only the first object in the array is visible on the screen

I'm currently working on developing a web application using the PokeAPI. My primary objective is to retrieve and display a variety of Pokemon based on their type. At the moment, I've set my API URL to specifically fetch fire type Pokemon. Howeve ...

javascriptjqueryajaxreactjsrest

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Currently I am working on an Ionic/Angular application and I have encountered a situation where I am attempting to utilize ngModel. Essentially, I am trying to implement the following functionality within my app: <ion-list> <ion-item> <ion ...

javascriptangulartypescriptionic-framework

ReactJS requires HTTP server to transpile babel code before running

I am a beginner when it comes to working with reactjs and I am currently in the process of setting up babel to execute babel code without having to serve HTTP files. Following the instructions on the Package Manager, I have successfully installed it along ...

javascriptreactjsnpmbrowserifybabeljs

Using React Native to Store Items in Flatlist via AsyncStorage

My challenge involves displaying/storing a list of items in a flatlist. The issue arises when I save an item and then load it on another screen; there seems to be a repetitive pattern (refer to the screenshot). Additionally, adding a new item results in re ...

javascriptandroidreactjsreact-nativeasynchronous

Troubleshooting Issue: Failure of Ajax Script to Display Saved Data in Edit Function

Whenever I clicked on the Edit icon in the action column of my data tables, the saved data did not display as expected. I noticed that this issue was only occurring for file input types, while it worked properly for text input types. In the Blade file Ad ...

javascriptajaxlaravel-8

Unable to retrieve local property when inside a Callback function in Ionic2

I am encountering an issue with my Ionic 2 app that utilizes Angular2. It is a basic problem, but it has been quite frustrating for me. Below is the component in question... import {Component} from "@angular/core"; @Component({ '<ion-content> ...

javascriptangularecmascript-6ionic2

What is the best way to target the specific DIV using a jQuery selector?

My dynamic div is filled with other divs... <div id="wrapper"> </div> //javascript for(//lots of times){ var d = document.cloneNode('divModel'); d.foo = {//a lot of stuff }; document.getChildById('wrapper').append ...

javascriptjqueryhtml