Category: javascript

I am working on pop!OS using Mozilla Firefox.

When I open developer options console and try to make changes to the webpage(specifically changing the seasonal photo on google.com to that of a cat from pixabay.com) it doesn’t work. But then there is this error I keep seeing anytime I open developer options on a webpage.

Content-Security-Policy: (Report-Only policy) The page’s settings would block an event handler (script-src-attr) from being executed because it violates the following directive: “script-src ‘nonce-MhEN2Yr7TKzGZSuX-cGEHw’ ‘strict-dynamic’ ‘report-sample’ ‘unsafe-eval’ ‘unsafe-inline’ https: http:”
Source: _rtf(this)

and…

Content-Security-Policy: (Report-Only policy) The page’s settings would block a script (script-src-elem) at https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.IdentityRotateCookiesHttp.en_US.whKIJEZ_mPQ.es5.O/am=DAY/d=1/rs=AOaEmlGK7LdK0XwTFbJAAAPAYXm_ieQaeg/m=hfcr from being executed because it violates the following directive: “script-src ‘unsafe-inline’ ‘unsafe-eval’ blob: data:”

Error showing when console is opened

DOM remain the-same after JavaScript code was instructed to change the holidays picture

But, when I go manually into the HTML I am able to make changes (used the inspector tool to select the image and changed the ‘src’ to that of the cat image.)

image showing the google.com seasonal picture changed to a cat picture

I tried this on chromium and everything was working as should. That is, I was able to edit the DOM manually and with JavaScript from the console. Until I logged into my gMail, the another similar error was shown at the top.

Error from chromium developer tools console

But the primary problem is why Firefox gives me that error.

I did some search myself and got things about csp, I played with that a bit from about:config but didn’t help either.

I went through the developer tools and played around to see if it was about anything that was checked or unchecked but no positive results
(p.s. I am new to using developer tools and only following a tutorial).

I uninstalled Firefox and installed it again, still the error messages at the top of the console were still there. I installed flatpak version of Firefox the-same problem was still there. I restarted my PC and still.

NOTE: I am running my javascript code in the live console(developer options, click the console tab and typed it in there)

I am working on pop! OS, Mozilla Firefox. When I open developer options console and try to make changes to the webpage(specifically changing the seasonal photo on google.com to that of a cat from pixabay.com) it doesn’t work. But then there is this error i keep seeing anytime i open developer options on a webpage.

Content-Security-Policy: (Report-Only policy) The page’s settings would block an event handler (script-src-attr) from being executed because it violates the following directive: “script-src ‘nonce-MhEN2Yr7TKzGZSuX-cGEHw’ ‘strict-dynamic’ ‘report-sample’ ‘unsafe-eval’ ‘unsafe-inline’ https: http:”
Source: _rtf(this)

and…

Content-Security-Policy: (Report-Only policy) The page’s settings would block a script (script-src-elem) at https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.IdentityRotateCookiesHttp.en_US.whKIJEZ_mPQ.es5.O/am=DAY/d=1/rs=AOaEmlGK7LdK0XwTFbJAAAPAYXm_ieQaeg/m=hfcr from being executed because it violates the following directive: “script-src ‘unsafe-inline’ ‘unsafe-eval’ blob: data:”

Error showing when console is opened

DOM remain the-same after JavaScript code was instructed to change the holidays picture

But, when I go manually into the HTML I am able to make changes (used the inspector tool to select the image and changed the ‘src’ to that of the cat image.)

image showing the google.com seasonal picture changed to a cat picture

I tried this on chromium and everything was working as should. That is i was able to edit the DOM manually and with JavaScript from the console. Until i logged into my g mail, the another similar error was shown at the top.

Error from chromium developer tools console

But the primary problem is why Firefox gives me that error, i did some search myself and got things about csp, i played with that a bit from about:config but didn’t help as well.
I went through the developer tools and played around to see if it was about anything that was checked or unchecked but no positive results(p.s. i am new to using developer tools and only following a tutorial).
I uninstalled Firefox and installed it again, still the error messages at the top of the console were still there. I installed flatpak version of Firefox the-same problem was still there. I restarted my PC and still.

NOTE: I am running my javascript code in the live console(developer options, click the console tab and typed it in there)

we are using NG-SELECT trying a create multiple forms with drop-down , we are trying to update the value of all dropdowns when one of the dropdown is updated but unable to find the correct node or configuration option to set it.

//reusable-form.component.ts
.. some inputs here
<ng-select 
      [searchable]="false"
      [clearable]="false"
      [(ngModel)]="selectedOption"
      placeholder="search"
      (change)="onSelect($event)"
    >
      <ng-option *ngFor="let data of datas; trackBy:userByName" [value]="data.name">{{
        data.name
      }}</ng-option>
    </ng-select>
 

we tried setting the option on change event as below, but the values are updated on rest of the drop-downs

onSelect(event){
this.selectedOption = event ; // even though model already has the value in it
this.cdref.detectchanges();
}

I am a beginner and practising writing some API routes to a MySQL database. My database is being updated successfully using both the form on my application and in Postman. When I use the MySQL interface, ‘select * from moods;’ works and returns the tables, but my GET request is just returning an empty array (in POSTMAN and frontend) and giving the 200 OK code.

router.get("/", async function(req, res) {
  // Fetch all emotrack entries from the database
  try {
    let results = await db(`SELECT * FROM moods;`);
    if (results.data.length === 0) {
      console.log("no data found in moods")
    }
    res.status(200).send(results.data);
    console.log(results)
  } catch(err) {
    console.error('Database query failed:', err); // Log the error for debugging
    res.status(500).send({ error: 'Internal Server Error', details: err.message });
  }
});
  
// getting 'no data found in moods' logged on the console


router.post("/", async (req, res) => {
  try {
    const text = req.body;
    const sql = `INSERT INTO moods (mood, intensity, triggers) VALUES('${text.mood}', '${text.intensity}', '${text.triggers};');`;
    await db(sql);
    const result = await db("SELECT * FROM moods;");
    res.status(201).send(result.data);
    console.log(result.data)
  } catch (e) {
    res.status(500).send(e);
  }
});

// this works fine

My course that I did wrote us a db() function to use MySQL and I think that this is working as it works fine with my POST request so I don’t think it would be that.

require("dotenv").config();
const mysql = require("mysql2");

module.exports = async function db(query, values) {
  const results = {
    data: [],
    error: null
  };

  let promise = await new Promise((resolve, reject) => {
    const DB_HOST = process.env.DB_HOST;
    const DB_USER = process.env.DB_USER;
    const DB_PASS = process.env.DB_PASS;
    const DB_NAME = process.env.DB_NAME;

    const con = mysql.createConnection({
      host: DB_HOST || "127.0.0.1",
      user: DB_USER || "root",
      password: DB_PASS,
      database: DB_NAME || "mood_tracker",
      multipleStatements: true
    });

    con.connect(function(err) {
      if (err) {
        console.log(err); // Consistent error logging
        reject(err);
        return;
      }
      console.log("Connected!");

      con.query(query, values, function(err, result) {
        if (err) {
          results.error = err;
          console.log(err); // Consistent error logging
          reject(err);
          return;
        }

        if (!result.length) {
          if (result.affectedRows === 0) {
            results.error = "Action not complete";
            console.log(results.error); // Consistent error logging
            reject(results.error);
            return;
          }
          // Commented out as it is not necessary
          // results.data.push(result);
        } else if (result[0].constructor.name == "RowDataPacket") {
          result.forEach(row => results.data.push(row));
        } else if (result[0].constructor.name == "OkPacket") {
          results.data.push(result[0]);
        }

        resolve(results);
      });
    })
  });

  return promise;
};

I do know that I just updated from MySQL -> MySQL2 so I’m not sure if that changes anything here?

Let me know if you need any more info for debugging.

cloned the create-react-app repository and made some modifications to it. Now, I want to use my updated version to create React projects locally. Essentially, I’d like to use a command like npx create-custom-react-app to generate new React projects using my custom version.

How can I set this up so that I can use my modified create-react-app version to initialize React projects locally?

I attempted to use yarn link to link my local version of create-react-app to my global npx setup, but I wasn’t able to get it working as expected.
What I was expecting:

I hoped that after linking my custom version with yarn link, I would be able to run npx create-custom-react-app and create new React projects based on my modified version.

I’m facing a cors issue only with web browser when I want to implement a react native app.
Alhough I’ve configured

Access-Control-Allow-Origin: *

I’m still getting a CORS error from the browser.
Is there anything that I’m missing?

client:

return fetch(newURL, {
    method: "GET",
    credentials: 'include',
    headers: {
        'Authorization': 'Bearer ' + accessToken,
        'Content-Type': 'application/json'
    },
})

server nginx:

       location / {
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Server $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #add_header 'Cache-Control' 'public';
            add_header 'allow' 'GET';
            add_header 'access-control-allow-origin' '*';
            add_header 'access-control-allow-credentials' 'true';
            add_header 'access-control-expose-headers' 'filename';
            proxy_hide_header X-Frame-Options";
            #expires +1y;
            if ($request_method = OPTIONS) {
              add_header Content-Type text/plain;
              add_header Content-Length 0;
              return 204;
            }

            proxy_pass http://127.0.0.1:9000/;
    }

}

interaction

As you see I have query failing because of CORS and can’t tried many different options but can’t sort it out.

Any clue?

Thanks!

I have a problem using Tinder’s map with an automated Playwright browser, i can’t display it correctly. I receive this.enter image description here
instead of that

On https://www.google.com/maps, it works fine.
Location is enabled on the automated browser, and I also tried using geographical coordinates.
WebGl is enabled
i use javascript

I don’t know where to look
I’m open to any ideas.

I’ve tried using Playwright-extra and Puppeteer-stealth-plugin, also switching browsers between Chromium and WebKit, and changing the user agent (“Mozilla/5.0 (Macintosh; Intel Mac OS X 15_0) AppleWebKit/537.36 (KHTML, like Gecko) Firefox/132.0”)
const browser = await firefox.launchPersistentContext("./data", { headless: false, permissions: ["geolocation"], userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 15_0) AppleWebKit/537.36 (KHTML, like Gecko) Firefox/132.0", args: ["--enable-webgl"], });

I am trying to create a list of Promises for collecting data from an API, and then once all of the Promises are fulfilled (either resolved or rejected, it doesn’t matter), run another call to the API. However, somewhere along the line, something is not correctly resolving and I am not sure where. Promise.all() with the same array will trigger, but not Promise.allSettled().

let attachmentUploadsList = [];

attachments.forEach((attachment, index) => {
  if (bannedList.includes(attachment.displayName) {
    updateFileQueueState(index, "banned");
  }
  else {
    attachmentUploadsList.push(
      uploadAttachment({
        fileData: attachment.content,
        fileName: attachment.displayName,
      }).then((response) => {
        if (response.errorCode === 0) {
          updateFileQueueState(index, "success"); // WORKS
          return Promise.resolve(true);
        } else {
          updateFileQueueState(index, "error"); // WORKS
          return Promise.reject(false);
        }
      })
    );
  }
});

Promise.all(attachmentUploadsList).then(() => {
  console.log("Run this if all succeed"); // WORKS
});

Promise.allSettled(attachmentUploadsList).then(() => {
  console.log("Run this if all complete even with a reject"); // DOESN'T WORK
});

const uploadAttachment = async ({ fileData, fileName }) => {
  const apiUrl = "https://url/api/";
  let payload = {
    action: "upload-attachment",
    attachmentDetails: {
      attachment_name: fileName,
      attachment_content: fileData,
    },
  };
  return await fetch(apiUrl, {
    method: "POST",
    body: JSON.stringify(payload),
  })
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
    })
    .then((result) => {
      return result;
    });
};

The above code is the closest I have come to getting it to work, but I am not sure where to go from there.

Things I’ve checked:

• FullCalendar Version: I am using FullCalendar v5.

• Correct Initialization: The calendar is initializing correctly, but the current date isn’t showing up as expected.

• JavaScript Console: There are no JavaScript errors in the console.

• CSS Issues: I haven’t modified the default styles that would hide the current date.

  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay",
    },
  
    selectable: true,
    selectMirror: true,
    editable: true,
    initialDate:new Date(),
    weekNumbers: true,
    navLinks: true,
    nowIndicator: true,
    events: data,
  

I am creating a React component to display a list of recent files using OwlCarousel, with file icons based on extensions mapped via Font Awesome classes. However, I am encountering an error with react-owl-carousel and need help resolving it.

Here’s my current code:

import React from "react";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

export default function RecentFiles() {
  const owlOptions = {
    loop: true,
    margin: 10,
    dots: true,
    items: 4,
    autoplay: true,
    autoplayTimeout: 3000,
    autoplayHoverPause: true,
    responsive: {
      0: { items: 1 },
      600: { items: 2 },
      1000: { items: 3 },
      1200: { items: 4 },
    },
  };

  const urls = [
    "file1.pdf", "file2.mp4", "file3.jpg", "file4.png", "file5.mp3",
    "file6.html", "file7.css", "file8.js", "file9.java", "file10.txt",
    "file11.docx", "file12.xlsx", "file13.pptx", "file14.csv", "file15.xml",
    "file16.json", "file17.php", "file18.ts", "file19.py", "file20.gif"
  ];

  const getFileIcon = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    const iconMap = {
      pdf: "fa-file-pdf",
      xlsx: "fa-file-excel",
      xls: "fa-file-excel",
      png: "fa-file-image",
      jpg: "fa-file-image",
      jpeg: "fa-file-image",
      gif: "fa-file-image",
      mp4: "fa-file-video",
      docx: "fa-file-word",
      doc: "fa-file-word",
      pptx: "fa-file-powerpoint",
      ppt: "fa-file-powerpoint",
      csv: "fa-file-csv",
      mp3: "fa-file-audio",
      html: "fa-file-code",
      css: "fa-file-code",
      js: "fa-file-code"
    };
    return iconMap[extension] || "fa-file-alt";
  };

  return (
    <>
      <section className="container mt-5 bg-white">
        <div className="row">
          <h2 className="text-center mb-4 mainHeading text-uppercase fw-bold" style={{ "--text": "'Recent Files'" }}>Recent Files</h2>
          <p className="px-5 text-center">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea eveniet tempora, eius cumque necessitatibus nihil.</p>
          <div className="col">
            <OwlCarousel className="owl-theme" {...owlOptions}>
              {urls.map((item, index) => (
                <div className="item" key={index}>
                  <div className="cardCustom rounded-3 overflow-hidden bg-white">
                    <div className="cardCustomHead h-50 d-flex justify-content-center align-items-center">
                      <i className={`fa text-light fa-beat-fade shadow ${getFileIcon(item)}`}></i>
                    </div>
                    <div className="cardCustomBody h-50 d-flex justify-content-center align-items-center text-center p-4 flex-column">
                      <h2 className="fs-5 fw-bold text-break text-capitalize">{item}</h2>
                      <button className="btn custom-btn btn-custom border-0 mt-3 overflow-hidden">View</button>
                    </div>
                  </div>
                </div>
              ))}
            </OwlCarousel>
          </div>
        </div>
      </section>
    </>
  );
}

i want help to resovle the error, please help me

I’m experimenting on a custom React Native package that includes both native (Kotlin for Android and Swift for iOS) and JavaScript code. This package encapsulates several APIs and functionalities and is designed to be used across multiple React Native apps.
The issue I’m facing is related to third-party package integration. Specifically, when I include a third-party dependency like @react-native-async-storage/async-storage in my custom package and then install my package into a React Native app, the native linking for the third-party package fails on the app side.

Steps to Reproduce:

1. Create a custom React Native package with native and JS code.
2. Add @react-native-async-storage/async-storage as a dependency in custom package and expose any method like setItem or getItem.
3. Install custom package into a React Native app using npm or yarn.
4. Attempt to use the third-party dependency (AsyncStorage) functionality in the React Native app.

Expected Behavior:
The third-party package should work seamlessly in the React Native app after installing custom package, with all native dependencies linked properly.

I have the following code using a MongoClient getting called twice:

async function readWhileRunning(dbName, collectionName, query, projection) {

    const collection = await getCollection(dbName, collectionName);

    console.log("Here3")

    return await collection.find(query, projection).toArray();
}

async function getCollection(dbName, collectionName) {

    console.log("Here1")

    const db = client.db(dbName);

    console.log("Here2")

    return db.collection(collectionName);
}

For some reason it produces the following output (alongside an empty array of database records):

Here1
Here2
Here1
Here2
Here3
Here3

Looks like db.collection(collectionName) refuses to run before everything else is done. I specified every function as async and every call with await. What am I doing wrong?

I created a DataGrid component just like in the example from https://mui.com/x/react-data-grid/editing. After creating columns not using let but using useState instead like this:

function browser({params}) {
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        let cols = prepareColumns(selectedColumns, primaryKey);
        setColumns(cols);
    }, []);
    ...

    return (
     <DataGrid
        rows={rows}
        columns={columns}
        ...
     />
    );

I get quite weird errors, editing via buttons on action column does not work and deleting makes whole rows disapper. I cannot figure out what is going on. I need columns to have react state because I want to insert some more dynamically in the runtime.

const functions = require("firebase-functions");
const axios = require("axios");
const admin = require("firebase-admin");

admin.initializeApp();
const storage = admin.storage();

// Specify the region for your functions
exports.generateImage = functions.region('asia-east1').https.onRequest(async (req, res) => {
    try {
        const { prompt } = req.body;

        if (!prompt) {
            return res.status(400).send({ error: "Prompt is required" });
        }

        // Hugging Face API Configuration
        const apiUrl = "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2-1";
        const apiToken = "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"; // Replace with your Hugging Face API token

        // Call Hugging Face API
        const response = await axios.post(
            apiUrl,
            { inputs: prompt },
            {
                headers: {
                    Authorization: `Bearer ${apiToken}`,
                },
                responseType: "arraybuffer", // To get binary image data
            }
        );

        // Upload Image to Firebase Storage
        const bucket = storage.bucket();
        const fileName = `images/${Date.now()}.png`;
        const file = bucket.file(fileName);

        await file.save(response.data, {
            metadata: {
                contentType: "image/png",
            },
        });

        const fileUrl = `https://storage.googleapis.com/${bucket.name}/${fileName}`;

        // Return the Image URL
        return res.status(200).send({ imageUrl: fileUrl });
    } catch (error) {
        console.error(error);
        return res.status(500).send({ error: "Failed to generate image" });
    }
});

My project ID is correct. My package.json is also correct. All dependencies are installed. I am not sure why it is not showing up on firebase… I tried deploying so many times. And it always deploys successfully. I tried re-initilaizing firebase. My region is also correct.

I have a static web site including a HTML page, a few style and script files and images. They are stored in an Azure Storage Container. There is a Shared Access Signature (SAS) set up on the entire Container.

BLOB_TOKEN = '?sp=rl&st=2024-12-05T13:00:00Z&se=2025-12-06T13:00:00Z&sv=2022-11-02&sr=c&sig=SOME_SPECIAL_CHARACTERS'

In the HTML page, I had to explicitly appended the BLOB_TOKEN to every single URL for individual script, style files, images and all the other links (a href) to be able to properly load the resources.

For example,

<script>
    const TK = '?sp=rl&st=2024-12-05T13:00:00Z&se=2025-12-06T13:00:00Z&sv=2022-11-02&sr=c&sig=SOME_SPECIAL_CHARACTERS'

    document.write("<link rel='stylesheet' href='css/my_style_1.css"+ TK + "' />");
    document.write("<script type='text/javascript' src='scripts/my_script_1.js"+ TK + "'></script>");
</script>

<img src="img/UserUploadedImages/logo.png?sp=rl&st=2024-12-05T13:00:00Z&se=2025-12-06T13:00:00Z&sv=2022-11-02&sr=c&sig=SOME_SPECIAL_CHARACTERS" width="60px" height="60px"/>

I would like to know if there is a better way to use SAS for all resources. Is it possible to configure the Azure Container to allow the html page to use any other resources in the same Container without having to attaching the SAS string to the URL of the resource?