Category: javascript

I am doing this hacking challenge, but I am not very familiar with JS. I would need to write some payload in 3 fields for login page to access cookies – first name, last name, and uid. – I can’t write the whole script in just one field because it won’t let me use so many characters. Here’s what I got.

Thank you beforehand for any response.

Here’s my input

My output:

First Name:
” />

Last Name:

UID:
” />

Here’s my output as picture

I managed to get … as a valid part, but I don’t know what to do further in the code to have “alert(document.cookie)” executed.

I have a website without using twitter bootstap or madterial design.

Can changing a dropdown to be one with multi checkbox selection be easy as adding
an input inside the select element? Why isn’t this enough?

            <select ...  id="gadsCustomerId">
                <option *ngFor="let cust_list of customer_list" [value]=cust_list.id>{{ cust_list.account_name }} [{{ cust_list.id }}]</option>
            </select>`

to:

  <select ...  id="gadsCustomerId">
    <option *ngFor="let cust_list of customer_list" [value]="cust_list.id">
    <input type="checkbox" [(ngModel)]="cust_list.isSelected"> {{ cust_list.account_name }} [{{ cust_list.id }}] </option>  
</select>

I am working with the NetSuite API and I am trying to retrieve employees using query parameters, specifically the ‘q’ parameter, following the documentation aqui. I am using the following endpoint:
GET https://demo123.suitetalk.api.netsuite.com/services/rest/record/v1/customer?q=email START_WITH barbara.
When I make the request in Postman pointing to the endpoint, everything works correctly, as shown in this screenshot shown in this screenshot postman. However, when I try to make the request with the ‘q’ parameter in my code, I get the following error:’o:errorCode’: ‘INVALID_LOGIN’.

Here is my code

   async conectNetSuiteTests(): Promise<any> {
     

     const baseUrl = `${NETSUITEURL}}/services/rest/record/v1/employee?q=custentity_bit_lt_entitydocument+CONTAIN+${documentEmployee}'`;

      const oauthNonce = crypto.randomBytes(5).toString('hex');
      const oauthTimestamp = Math.floor(Date.now() / 1000);
      const oauthSignatureMethod = 'HMAC-SHA256';
      const oauthVersion = '1.0';
      const realm = `5900181_SB1`;

      const oauthParameters = {
          oauth_consumer_key: process.env.CONSUMER_KEY,
          oauth_token: process.env.ACCESS_TOKEN,
          oauth_nonce: oauthNonce,
          oauth_timestamp: oauthTimestamp,
          oauth_signature_method: oauthSignatureMethod,
          oauth_version: oauthVersion,
      };


      //   // Ordenar los parámetros de OAuth alfabéticamente por clave
      const sortedParameters = Object.keys(oauthParameters)
          .sort()
          .map((key) => `${key}=${encodeURIComponent(oauthParameters[key])}`)
          .join('&');

      console.log('sor', sortedParameters)
      //   // Crear la cadena base para la firma
      const signatureBaseString = `GET&${encodeURIComponent(baseUrl)}&${encodeURIComponent(sortedParameters)}`;

      //   // Crear la clave de firma
      const signingKey = `${process.env.CONSUMER_SECRET}&${process.env.ACCESS_TOKEN_SECRET}`;

      //   // Calcular la firma HMAC-SHA256
      const hmac = crypto.createHmac('sha256', signingKey);
      hmac.update(signatureBaseString);
      const oauthSignature = hmac.digest('base64');

      //   // Construir la cabecera de autorización

      const authorizationHeader = `OAuth realm="${realm}", oauth_consumer_key="${process.env.CONSUMER_KEY}", oauth_token="${process.env.ACCESS_TOKEN}", oauth_nonce="${oauthNonce}", oauth_timestamp="${oauthTimestamp}", oauth_signature="${oauthSignature}", oauth_signature_method="${oauthSignatureMethod}", oauth_version="${oauthVersion}"`;

      //   // Configuración de la solicitud Axios
      console.log('authorizationHeader', authorizationHeader)
      const axiosConfig: AxiosRequestConfig = {
          method: 'get',
          url: baseUrl, 
          headers: {
              'Prefer': 'transient',
              'Content-Type': 'application/json',
              'Authorization': authorizationHeader,
          },
      };

      try {
          const response = await axios(axiosConfig);

          return {
              "PRO":response.data.custentity_ks_empleado_proveedor_employe.refName.split(' ')[0].split('-')[1],
              "CLI":response.data.custentitycustentity_ks_empleado_cliente.refName.split(' ')[0].split('-')[1],


              };
      } catch (error) {
          console.error('error', error);
          console.error('error', error['response']['data']['o:errorDetails']);

          throw error;
      }
    }

I think this issue may be related to OAuth 1.0 authentication or how I generate the signature. Any suggestions for resolving this problem? I can make a request to an endpoint without parameters and it works, but I need to filter the results.

I have created a pseudo element with a background color set to green, what i want is to change the color of the pseudo element according to the color of the icon.
So if the icon is green the pseudo element would be green and if the icon is red the pseudo element would be red

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/1fd98de875.js"
      crossorigin="anonymous"
    ></script>
    <title>Toast Notification</title>
  </head>
  <body>
    <div class="buttons">
      <button>Success</button>
      <button>Error</button>
      <button>Invalid</button>
    </div>
    <div id="toastBox"></div>
    <script src="script.js"></script>
  </body>
</html>

My CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background: #f7edff;
}

.buttons {
  margin: 50px;
}

.buttons button {
  background: #333;
  color: #fff;
  border: 0;
  outline: 0;
  width: 120px;
  height: 40px;
  margin: 5px;
  cursor: pointer;
}

#toastBox {
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}

.toast {
  width: 400px;
  height: 80px;
  background: #fff;
  font-weight: 500;
  margin: 15px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  position: relative;
}

.toast i {
  margin: 0 20px;
  font-size: 35px;
}

.toast::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: green;
  animation: anim 6s linear forwards;
}

@keyframes anim {
  100% {
    width: 0;
  }
}

My JavaScript

// ! Since we can't use forEach on HTMLCollection then we convert it to an array first
let btns = Array.from(document.getElementsByTagName("button"));
let toastBox = document.getElementById("toastBox");

let successMsg =
  "<i style='color: green;' class='fa-solid fa-circle-check'></i> Successfully submitted";
let errorMsg =
  "<i style='color: red;' class='fa-solid fa-circle-xmark'></i> Please fix the error!";
let invalidMsg =
  "<i style='color: orange;' class='fa-solid fa-circle-exclamation'></i> Invalid input, check again!";

btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    let toast = document.createElement("div");
    toast.classList.add("toast");
    btn.innerHTML === "Success"
      ? (toast.innerHTML = successMsg)
      : btn.innerHTML === "Error"
      ? (toast.innerHTML = errorMsg)
      : (toast.innerHTML = invalidMsg);
    toastBox.appendChild(toast);

    setTimeout(() => {
      toast.remove();
    }, 6000);
  });
});

I tried using template literal on toast.innerHTML = successMsg but it threw an error

Here is my “login” function that I am using to authenticate users when they provide their credentials in NextJs website fronend:

export const login = (username, email, password) => async dispatch => {

    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    const csrftoken = getCookie('csrftoken');

    console.log(csrftoken);

    const config = {
        headers: {
            'Content-Type': 'application/json',
        }
    };

    const config_two = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken,
        }
    };

    console.log(config_two)

    const body = JSON.stringify({ email, password });
    const body_two = JSON.stringify({ username, password });

    try {
        const res = await axios.post(`http://localhost:8000/auth/jwt/create/`, body, config);
        const res_two = await axios.post(`http://localhost:8000/api-token-auth/`, body_two, config_two);
        
        dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
        });

        dispatch(load_user());
        toast.success("You are logged in");
    } catch (err) {
        toast.error("Something went wrong");
        dispatch({
            type: LOGIN_FAIL
        })
    }
};

For one purpose I had to include another post request to get tokens from the database which are provided by rest_framework.authtoken.models when users are registered. However, when I try to run this function I receive the following error attached here (https://i.stack.imgur.com/Y9YNf.png)
(https://i.stack.imgur.com/QWSb2.png).

It says that the csrf cookie is not provided, but I add it in the header in config_two constant that is sent with the request.

Looking forward to hearing possible solutions indicating on my mistakes. In advance, thank you for your time.

I read the documentation several times, watched videos in YouTube, but it didn’t help. I am expecting it to accept my request and send me a token as a responce.

I’m trying to create add sticky sidebar using this JS script:

function checkOffset() {
  var sideBarHeight = $('header').height();
  
  if ($('.checkoutcolumn-wrapper').offset().top + $('.checkoutcolumn-wrapper').height() >= $('#shopify-section-related-products-sectioned').offset().top - 160){
    $('.checkoutcolumn-wrapper').css('position', 'absolute');
    $('.checkoutcolumn-wrapper').css('bottom', '0px');
  
    
  }
    
  if ($(document).scrollTop() + window.innerHeight < $('#shopify-section-related-products-sectioned').offset().top) {
    $('.checkoutcolumn-wrapper').css('position', 'fixed');
    $('.checkoutcolumn-wrapper').css('top', sideBarHeight);
    $('.product-single__meta-list').text($('.checkout-column').height());  
  } 
}

I followed this example: https://jsfiddle.net/Kkv7X

The problem I don’t understand is getting setting the distance of top fixed. I need it to be 0px until it reaches the top so it doesn’t cover the header… right? And then for position absolute it needs to be 0px. And I think this is css related – For absolute positioning bottom 0px seems to be outside of the parent but it is set to position relative.

Any help with just getting it to be sticky using JS would be much appreciated!

Im building a calculator and I don’t know where’s the problem:

  appendNumber(number){
      if (number === '.' && this.currentOperand.includes('.') && this.currentOperand == undefined) return
      this.currentOperand = this.currentOperand.toString() + number.toString()
    }

This throws TypeError, when I change this.currentOperand.toString() with: this.currentOperand – when I click for example button it shows undefined6
Where is the problem?

numberButtons.forEach(button => {
     button.addEventListener('click', () => {
      calculator.appendNumber(button.innerText) // it Throws error here too 
                                              //HTMLButtonElement<anonymous>
      calculator.updateDisplay()
     })
   })

When I ctrl C + v the source code from where I’m learning the error disappears… And it’s 1:1 anyway,

This recursive function looks for the passed argument (string) in an HTML format. In this case the string “book”. The function answers true.

<!doctype html>
<html>
  <head>
    <title>My home  page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book!  Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>
<script>
function talksAbout(node, string) {
   
  if (node.nodeType == Node.ELEMENT_NODE) {
    for (let child of node.childNodes) { 
      if (talksAbout(child, string)) {
        return true;
      }
    }
    return false;
  } else if (node.nodeType == Node.TEXT_NODE) {
    return node.nodeValue.indexOf(string) > -1;
  }
}

console.log(talksAbout(document.body, "book"));

// true

Now if I delete the “book” from the HTML, the function still returns true.

<!doctype html>
<html>
  <head>
    <title>My home  page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a !  Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>
<script>
function talksAbout(node, string) {
   
  if (node.nodeType == Node.ELEMENT_NODE) {
    for (let child of node.childNodes) { 
      if (talksAbout(child, string)) {
        return true;
      }
    }
    return false;
  } else if (node.nodeType == Node.TEXT_NODE) {
    return node.nodeValue.indexOf(string) > -1;
  }
}

console.log(talksAbout(document.body, "book"));

//true

I am building wysiwyg system. In it you can add images, video , text, edit it and i’m trying to implement saving to the local hard drive, and when i try to save html file on my computer it saves only text. All the blobs that i have (images, videos, music) gets lost. How to not loose information while saving html file?

Hi i’m trying to use SWR in my React app, but this generate an error because the data its ever undefined and when i check the network, i can se three calls to the api:

Table component:

import React, { , useEffect } from "react";
import {ProductService} from "../Services/product-service";
import { useDispatch, useSelector } from "react-redux";
import LinearProgress from "@mui/material/LinearProgress";
import useSWR from "swr";

function TableTransactions({ clientUserName, productNumber }) {
  const dispatch = useDispatch();
  const {data, isLoading, error} = useSWR(["transactions",clientUserName, productNumber,10], 
                                   ProductService.GetListTransactionsByParams(clientUserName, productNumber, 10));

  useEffect(()=>{
    (async()=>{
      //...;
  })();
 },[clientUserName, productNumber]);

 if(error) return <div>failed to load</div>
 if(isLoading) return <LinearProgress/>

return (
<>
  <Box>
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>
              <b>Tipo transacción</b>
            </TableCell>
            <TableCell >
              <b>Fecha</b>
            </TableCell>
            <TableCell >
              <b>Valor</b>
            </TableCell>
            <TableCell >
              <b>Producto origen</b>
            </TableCell>
            <TableCell >
              <b>Producto destino</b>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row) => (
            <TableRow
              key={uuidv4()}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.typeTransaction.name}
              </TableCell>
              <TableCell >{row.creationDate}</TableCell>
              <TableCell >{row.explicitValue}</TableCell>
              <TableCell >{row.originProductNumber}</TableCell>
              <TableCell >{row.destinyProductNumber}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </Box>    
 </>
);
}
export default TableTransactions;

My function caller fetcher:

async function GetListTransactionsByParams(userName, productNumber, maxCount=10){
 try{
    var objSearch = {clientUserName: userName, productNumber: productNumber, maxCount:maxCount};
    
    let route = ClientSettings.UrlBaseInfoBankApi+"ProductInfo/ListTransactionsClient";
    let bearer = null;

    var response = await fetch(route,{
        method: "POST",
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + bearer,
        },
        //credentials: "include",
        body: JSON.stringify(objSearch)
    });

    await HandleResponseService(response);

    let json = await response.clone().json();
    if (response.status == 200 && json.response === true && json.error === "") {
        return json.data;
    }

    return null;
 }catch(err){
    throw new Error("Error connecting or timeout service: "+err);
    return null;
 }
}

I try to check {data ? && data.mapa(…)} but this only fix the console error, and data continues ever being undefined.

I don’t want to display those files on the browser to prevent any vulnerability from being discovered and exploited to hack the site

I try add .htaccess file to folders with Denay from all command ,but it prevent explorer from linking to files.

I am working on making a chrome web extension that allows user to right click on highlighted text, choose the option in the context menu, and it opens a chrome side panel that shows fact checking information on the highlighted text.

I have the following in the content.js file:

function setupContextMenu() {
  chrome.contextMenus.create({
    id: 'define-word',
    title: 'RabbitHole',
    contexts: ['selection']
  });
}

chrome.runtime.onInstalled.addListener(() => {
  setupContextMenu();
});

chrome.contextMenus.onClicked.addListener((data, tab) => {
  if (data.menuItemId === 'define-word') {
    // Capture the selected text
    const selectedText = data.selectionText;

    // Send the selected text to your background script
    chrome.runtime.sendMessage({
      name: 'selected-text',
      data: selectedText
    });

    // Open the side panel using chrome.sidePanel.open()
    chrome.sidePanel.open({ tabId: tab.id });
  }
});

Currently the side panel is opening after the contextual menu option is clicked, however the user then has to right click the highlighted text again in order for it to display in the side panel.

Is there a way to have the side panel automatically display the highlighted text once the side panel is opened?

Thanks!

It is an advanced type and very lightweight remote administration software that is basically coded in C#. It is highly used from user support through administrative work to employee monitoring.
enter image description here

By using this effective software you will get the facility of Multi-Threaded, which can help you to detect any kind of malware which is not profitable for your PC. You will also get the TCP network stream, which allows you to stream your data in a few minutes.

It has a great feature named fast network serialization that is compatible with encrypting data. This useful software can carry all the features that can be expected from a RAT.

The best part of this program is that many peoples want the latest version of this program, you can find it on the release page. These versions of this tool come with advanced features, and there are find many improvements, and bug fixes that can be located on the CI server. You can use them with caution as they may contain critical bugs.

It provides a full user guide manual about how to setup quasar rat. This program provides you full authority to customize its settings in your own way.

Features
There are so many features in the quasar rat malware software and some of them are as follows below.
File manager
Fully featured
Startup manager
Remote desktop
Remote shell
Remote execution
System information
Registry key
System power commands
Restart
Standby
Configuration
Fast
Stable
Come with advanced features
Support all kinds of browsers
Keylogger
Reverse proxy
password recovery
Common browser
FTP clients
Unicode support
Multiple languages
Spreader
Customizable
Many more.

Download Quasar Rat Here:

This full software allows you to represent the name of the client instance. In this program, you can display the value in the connection table of the Quasar server. You are also able to set the file mutual exclusion object to prevent the same host from being infected multiple times.

It allows the users to set the server IP for the client connection in a few minutes. They can also set the domain for the client connection with just one click. through it, it is very easy to set the transmission controls protocols port in this program. Many peoples want to know is quasar rat safe, yes it is a fully secure program.

By using this impressive application, you can set the password for advanced encryption standard encryption. And with its help, you are also able to set how often the users can attempt to call back in the way of not being connected.

It gives the opportunity to users to directly set the default for clients and they can also install it on hosting sites. It provides you with the location where the target file can be installed on a hosting site. This process is almost very limited to the options listed. In this process, the starred items require administrator privileges for approval.

While the carousel is auto sliding I want i card to get slided at a time, but at the 1st slide 1 card gets slided but at the next 2 cards together gets slided.

var multipleCardCarousel = document.querySelector("#event-section-Carousel");

if (window.matchMedia("(min-width: 0px)").matches) {
    var carousel = new bootstrap.Carousel(multipleCardCarousel, {
        interval: 2000, // Set the desired interval time in milliseconds
    });

    var cardWidth = $("#event-section-Carousel .carousel-item").width();
    var scrollPosition = 0;
    var carouselWidth = $("#event-section-Carousel .carousel-inner")[0].scrollWidth;

    // Duplicate carousel items
    var carouselItems = $("#event-section-Carousel .carousel-item").clone();
    $("#event-section-Carousel .carousel-inner").append(carouselItems);

    var nextSlide = function () {
        scrollPosition += cardWidth;

        if (scrollPosition >= carouselWidth) {
            scrollPosition = 0; // Reset scroll position to start
            $("#event-section-Carousel .carousel-inner").scrollLeft(0); // Reset scroll position to start
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    };

    $("#event-section-Carousel .carousel-control-next").on("click", nextSlide);

    $("#event-section-Carousel .carousel-control-prev").on("click", function () {
        scrollPosition -= cardWidth;

        if (scrollPosition < 0) {
            scrollPosition = carouselWidth - cardWidth; // Set scroll position to end
            $("#event-section-Carousel .carousel-inner").scrollLeft(scrollPosition); // Set scroll position to end
        }

        $("#event-section-Carousel .carousel-inner").animate(
            { scrollLeft: scrollPosition },
            500
        );
    });

    // Set automatic slide every 5 seconds
    setInterval(nextSlide, 5000);
} else {
    $(multipleCardCarousel).addClass("slide");
}

I’m really frustrated from this issue. Please someone solve it

I’m building RichText editor using Tiptap and one of my menu button has the following action on Click:

  async function handleHtmlPaste() {
    // editor?.chain().focus().run();
    const text = await navigator.clipboard.readText();
    // let text = `<h1 style="margin-left: 0px!important;">Test</h1><h2 style="margin-left: 0px!important;">Basic text formatting</h2>`;
    editor
      ?.chain()
      .focus()
      .command((props) => {
        props.view.pasteHTML(text);
        return true;
      });

    return true;
  }

Unfortunately, I’m getting the following error: Uncaught (in promise) DOMException: Read permission denied. What is the reason?