network request showing api call data Security

I have a WEB Api call (GetCustomers) which get a list of customers and that works fine.
Problem is in the Network Request after I have logged in I can see GetCustomers and on clicking this I can see the complete list of customers.

Is there a way to hide these calls from being displayed?
See attached – don’t want the GetRulesValidation call and resulting data to be displayed in the Network Request Tab within Chrome.

I am using Angular4 on the Front End and a C# WEB API.

Thanks
Maiur

NetworkRequest in Chrome

extension programming: where should the logic and dynamic behavior exist? background js, content_script, popup js

I want to create an extension that does the following:

  1. have a pageaction or browseraction (not sure which one is more appropriate).
  2. if the url of the page is found in my database/service then allow the Action to have/show a popup where some information from my service is displayed.
  3. Otherwise make the Action button look disabled and show no popups

I have been trying a background script with a popup. Have not been able to show contents in the popup set to the results from my service. For the communication between the background and the popup I used the advice here: How to communicate between popup.js and background.js in chrome extension? but did not manage to get it worked. and debugging the popup has been almost impossible.

I tried creating an iFrame using content_script in the main page. That did not go well at all. Lots of cross frame exceptions.

Cache auth_tokens / auth_token_renew with chrome.identity.launchWebAuthFlow

I’m using chrome.identity.launchWebAuthFlow method to initiate a OAuth2 token generation from our OAuth2 server.

In the Identity API documentation, it is specified that to authenticate a user, there are two available methods: getAuthToken and launchWebAuthFlow. We use the latter because as specified in the documentation: If your app uses its own server to authenticate users, you will need to use launchWebAuthFlow.

We’re struggling to cache the results. When reading the documentation of getAuthToken, it seems that there is some smart-caching involved. Chrome catches the response and store the access_token and renew_token in the browser (visible here: chrome://identity-internals/). Chrome requests for an access_token to the OAuth server only when the access_token is expired.

However, using launchWebAuthFlow, we’re struggling to use the Chrome Cache, and it calls our OAuth server each time.

Does anyone know how to cache the result using this method of the API?

Thanks.

How to programmatically detect new Gmail UI?

Google released new UI for Gmail which can be activated from ‘Settings’ -> ‘Try the new Gmail’.

The question: is there a way to programmatically check that new Gmail UI is activated in a web browser from Chrome extension?

Javascript browser file download [on hold]

This might be off topic a bit, but I have a unique issue. I have a 3rd party application creates a file and delivers it to the default download location defined in the browser. In Chrome, the browser will prompt the user to open or save the file. In i.e. the file is saved to the default location.

I need a way to capture that file and move it to a predefined defined file share (a local network share) from which the file will be further processed. A user prompt is ok, but preferably, I would just want the file saved.

Any example of a script that could do this?

How do I password protect a chrome tab?

I’m using whatsapp web on my laptop and i want to password protect only that specific tab or that url. It’s ok for the title to be seen but not the content. I want to keep that tab to be pinned and be available always. Just need to password protect it.
I tried many chrome protection extensions but they lock all the opened tabs and hide them.
P.S.- I am new here and dont have much of coding background.

How to prevent the browser from loading a web app in vanilla JavaScript?

I wrote the following script which I run with Greasemonkey/Tampermonkey. It’s purpose is to prevent me from accessing a few web apps (web sites), usually sites I feel a bit addicted to. This is the closest I got to prevent my Browsers to display these sites sites:

// ==UserScript==
// @name        blocko
// @include     *
// ==/UserScript==

window.addEventListener('load', function() {
    let sites = ['example-1.com', 'example-2.com', 'example-3.com'];
    let regex = /..+/;
    let href = window.location.href;
    for (let i = 0; i < sites.length; i++) {
        if (href.includes(sites[i])) {
            let domain = sites[i].replace(regex, '');
            document.body.innerHTML =`
                

Enough with this ${domain} bullshit!

`; } } }, true);

I must say I’m not very satisfied from my achievement here because this script gets me into the site and I need to wait 1/2/3/4 or even 5 or more seconds in rare cases, until the site will vanish and the message I print to the screen with red background will appear instead. Thus I’m unwillingly exposed to the site’s content, from which I want to avoid.

I know that it is indeed possible to prevent the browser from even moving into a website through JavaScript: There is a Chrome addon named “BlockSite” that helps with this and I tried to have a look in it’s (huge) source code but I failed to understand how it prevents the user to even move into the website, unlike my script above that moves the user to the website but vanishes the website with a message after a few seconds (after the load event was triggered).

Please share a way or at least name a way in the comments to totally prevent yourself of moving into a website, as with “BlockSite”.

Can we mock other browsers with Chrome dev tools?

I am curious to to know if there is any way to mock other browsers like firefox, ie with chrome dev tools. I know that we can mock other devices like iphone, android etc but dont know about the browsers.

How to execute Javascript after new page gets open using a google chrome extension?

I’m currently working on a simple Google Chrome extension that should allow users to enter a search query and get redirected to the Google search page. After the search page is loaded additional information like a banner should get added on top of the search page via javascript.

I’ve already tested some older solutions out there (Execute script after click in popup.html (chrome extension)) but nothing worked out for me. It seems like there is some trouble executing Javascript in the freshly opened tab.

In my case, I’m not using "content_scripts" because I’d like to add changes to the Google search page only when the user clicked on the search button in the popup rather than every time he visits Google. Maybe there is a problem with permissions? Any idea?

popup.html



    
        
        Demo Title
        
        
    
    
        

popup.js

document.addEventListener('DOMContentLoaded', function() {
    let button = document.getElementById('search-button');

    button.addEventListener('click', function() {
        let engine = 'https://www.google.com/search?q=';
        let search = document.getElementById('search-box');

        function getUserInput(input) {
            let userInput = input.value;
            userInput = encodeURIComponent(userInput);
            return userInput;
        };

    let searchpage = window.open(engine + getUserInput(search));

    searchpage.addEventListener("DOMContentLoaded", function(event) { 
        chrome.tabs.executeScript({code: 'document.body.style.backgroundColor = "red"'}); 
        }); 

    });

});

manifest.json

{
    "manifest_version": 2,

    "name": "Demo Name",
    "description": "Demo Description",
    "version": "1.0",

    "browser_action": {
        "default_title": "Demo Name",
        "default_icon": {
            "24": "icon-24x24.png"
        },
        "default_popup": "popup.html"
    },
    "permissions": [
    "tabs",
    "https://www.google.com/*"
    ]
}

How repainting a single render layer with many elements works in browsers

I am trying to understand, in practice, how the layout-> paint -> composite pipeline of modern browsers work.

My rough understanding is as follows:

  • During the layout phase, the browser combines CSS with HTML information in order to figure out positions and dimensions of visual elements on screen. I also believe this is the time where it also determines how many render layers are there (due to will-change for example)
  • During the paint phase, the browser makes a framebuffer for each layer, containing information about what color each pixel should display, based on the layout data.
  • During the compositing phase, the GPU composites all the layers together, based on the data generated during the paint phase, and sends the final result to the screen.

Based on the above understanding, there was something during my testing that confused me.

I have two squares, a red one and a blue one, inside a wrapper element. In Chrome’s dev tools this whole thing shows as one layer.

  • If both squares are static positioned, when I transition the width and height of the red one, I can see that the whole layer gets repainted, which, to me, makes sense, since, if all 3 elements are in the same layer, changing the dimensions of one, changes the whole layer’s end result, so the whole layer has to be repainted.

  • If I set the red square to absolute positioning, when I transition its width and height, even though the dev tools still show one layer, only the red square is shown as repainted.

Codepen (turn “Highlight repaints” on, in the dev tools, and click the button to toggle the size of the red square. Try doing it after changing the position of the red square too.)

The second scenario does not make sense to me. If the two squares and the wrapper element are all in the same layer, as shown in the Chrome’s dev tools, shouldn’t, again, changing one element affect the whole layer and cause the layer as a whole to repaint? (I mean when the square shrinks, there is more of the wrapper and the other square revealed, that has to be filled with color, thus “repainted”)

Does Chrome, during the layout phase (or whatever phase it is that determines the layers) separate some elements into their own layers (due to position properties for example), thus being able to repaint them separately, but after the compositing phase dumps them, so the developer only sees “one” layer in the dev tools?