Allow images to be uploaded using the browser-policy package in Meteor

Can anyone help me figure out how to use Sir Trevor JS in Meteor for uploading images without encountering this error message?

When attempting to load the image 'blob:http%3A//localhost%3A3000/a28ef7dc-ee51-4290-9941-6b8fc317e685', I am receiving an error due to Content Security Policy restrictions. The directive being violated includes sources such as 'self', various googleapis.com URLs, bootstrapcdn.com URLs, facebook.com and fbcdn-profile-a.akamaihd.net. It also mentions a restriction on blob://*.localhost.

I have installed the browser-policy package but have been unable to find a policy that allows this particular URL. I have tried multiple configurations, including:

BrowserPolicy.content.allowDataUrl("blob://*.localhost:3000");
BrowserPolicy.content.allowOriginForAll("blob:*.localhost:3000/");
BrowserPolicy.content.allowOriginForAll("blob:*.localhost:3000");
BrowserPolicy.content.allowImgUrlForAll();
BrowserPolicy.content.allowSameOriginForAll();

If you have any insights or suggestions, please let me know!

javascriptmeteor

Answer №1

Alright,

So, this solution actually did the trick:

BrowserConfig.policy.addOrigin('blob:');

Although it seems a bit risky in terms of security.

Stumbled upon it on this site

Answer №2

When facing a similar issue with the Meteor-Files package, I found a solution by incorporating a clone of the browser-policy-content package into my local project and including 'worker-src' in the resources objects within browser-policy-content.js:

var resources = [
    { methodResource: "Script", directive: "script-src" },
    { methodResource: "Object", directive: "object-src" },
    { methodResource: "Image", directive: "img-src" },
    { methodResource: "Media", directive: "media-src" },
    { methodResource: "Font", directive: "font-src" },
    { methodResource: "Connect", directive: "connect-src" },
    { methodResource: "Style", directive: "style-src" },
    { methodResource: "Frame", directive: "frame-src" },
    { methodResource: "FrameAncestors", directive: "frame-ancestors" }, 
    { methodResource: 'WorkerSource', directive: 'worker-src' }//added this!
];

Subsequently, I included the following in my startup.js file:

BrowserPolicy.content.allowWorkerSourceBlobUrl('localhost');

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

Tips for utilizing JavaScript to upload a file in Webform and make it accessible in the global PHP variable $_FILES

I'm feeling a little overwhelmed and frustrated. I've come across a bunch of solutions, but none of them seem to work fully or correctly!? My task is to create an HTML form that allows users to upload one or more files to the web server using AJ ...

javascriptphpajaxfileupload

Elevate state in React to modify classNames of child elements

I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to impl ...

javascriptreactjsstateevent-bubbling

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

javascriptjqueryhtmlcssnumbers

AngularJS: Issues with data retrieval in parallel in $http get requests within a $.each loop

Attempting to fetch data for multiple IDs is the goal: (Simplified version, aiming to clarify) Controller: var idList = [39,40,41]; $.each(idList, function(key, value){ var dataObject = { type: "test", id: value }; var getData = DataFactor ...

javascriptphpjqueryangularjsajax

Upgrade to the latest Gulp version and transition away from using the gulp.start function

Currently in the process of updating all my gulp v3 projects to v4, but running into an issue with the gulp start function. Upon executing gulp start in gulp v4, I encounter an error. This was the code snippet I used in v3: gulp.parallel within gulp.seri ...

javascriptnode.jsnpmgulp

Something is overriding the style created by makestyle material UI that I had implemented

How can I increase the importance of my makeStyles classes over default Material UI styles? Here is my code: import { createTheme, ThemeProvider } from '@mui/material/styles'; import { makeStyles, createStyles } from '@mui/styles'; co ...

javascriptreactjsmaterial-ui

loop through nested arrays

My goal is to use ng repeat in Angular to iterate through a child array of a multidimensional array. The json object I am working with is as follows: $scope.items = [{ "id":1, "BasisA":"1", "Basis":true, "personSex": ...

javascriptarraysangularjs

What is the best way to mock a Typescript interface or type definition?

In my current project, I am working with Typescript on an AngularJS 1.X application. I make use of various Javascript libraries for different functionalities. While unit testing my code, I am interested in stubbing some dependencies using the Typings (inte ...

javascriptangularjstypescriptsinonstubbing

Transforming JSON data in Node JS according to the city

I currently have a JSON object that contains information about various products and their details in different cities. const data = [ { "city name": "Chennai", "product name": "Apple", ...

javascriptnode.jsarraysjsonreactjs

eliminate several digits past the decimal place

I thought this would be a simple task, but I'm completely stuck with the code I currently have! https://i.sstatic.net/Y36Cg.png render: (num) => { return <span><b>{num.toFixed(2)}</b>%</span>; // rounding to two de ...

javascriptreactjsantd

Incorporate a PHP-generated array into JavaScript

I'm currently working on implementing a JavaScript slideshow on my index page. Rather than having a static array, I'd like to dynamically build the array using PHP and then include it in the script. However, I'm not sure how to go about this ...

javascriptphp

Utilize querySelectorAll to inspect class properties

When exporting a table to CSV, I have implemented the following logic: var cols = rows[i].querySelectorAll("td, th"); While this method works well, users are able to hide/display columns as they desire. Since AngularJS is used, the hidden columns are mar ...

javascriptangularjs

When attempting to pass react-intl as an argument in a method of a React component during Jest testing, an error is thrown stating, "TypeError: intl.formatMessage is not a function."

Currently, I am in the process of unit testing my React component using Jest. Within this component, there are several methods that are called upon. As an example: export function fetchText(text, intl) => ((text !== 'NA') ? (intl.formatM ...

javascriptreactjsunit-testingjestjs

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

javascriptnode.jspostgresql

Activate or deactivate a button depending on the input value of a TextField in React.js

I am currently designing a form similar to the one displayed in this image. I want the "Add" button to become active as soon as the user starts typing in the "Tags" input field. For this project, I am using material-ui and I have created an Input compone ...

javascriptreactjsmaterial-ui

What is the best way to eliminate a particular item from an array that is nested within the object? (using methods like pop() or any

I am struggling to remove the 'hello5' from the years in myObj. Although I tried using the 'pop' prototype, an error occurred in the browser console displaying: 'Uncaught TypeError: Cannot read property 'type' of undefi ...

javascriptarraysjsonobject

Navigating Tabs and jQuery for JSON Data Refresh: A Step-by-Step Guide

Struggling to implement a basic UI and seeking advice from the community. Here's my current setup: 1) Using getJSON to fetch a JSON string (multidimensional array) from a PHP page. 2) Utilizing 2 jQuery.each loops to iterate through the JSON data and ...

javascriptjqueryjsontabssetinterval

Angular // binding innerHTML data

I'm having trouble setting up a dynamic table where one of the cells needs to contain a progress bar. I attempted using innerHTML for this, but it's not working as expected. Any suggestions on how to approach this? Here is a snippet from my dash ...

javascriptangulartypescript

Traversing a JavaScript class within a for loop

I am attempting to access the locations listed in json.responseJSON.Sites, starting with LHR on the first iteration and then NJE on the next one, and so forth. The notifications for each location are "LHR" and "NJE", respectively. Is it possible to achieve ...

javascriptjsonfor-loopiteration

Concerning Java's Map and Array functionalities

When working with Javascript, we have the ability to create statements like the one below. var f_names = { 'a' : 'Apple', 'b' : 'Banana' 'c& ...

javajavascriptarrays