Rerouting traffic of 3rd party js libraries within a webapp - javascript

I want to intercept and reroute calls that 3rd party js libraries I'm using make in my webapp.
I'm trying to create a work around to ad-blockers blocking some analytics traffic that I need.
Do you know of a way to do this?
I tired googling for something that does this and could not find anything

Related

Abstracting/restricting calls to back end API that is exposed in Javascript

Working on a simple HTML application that makes calls to an API using jQuery. Would like to avoid someone getting the API address (via looking at the source and/or network traffic) and making calls directly to the API without the HTML pages getting loaded first. Thinking about adding a header or cookie that the API can validate to ensure this request is coming from the Javascript embedded in that page, and not someone calling the API direct. However, even this could be replicated by someone looking to talk to the API directly. Would like to keep this a simple HTML project as much as possible (realize creating a Node.js version of the application, or using Thymeleaf in Spring Boot would give more options to obscure the API). It feels like this is a limitation of doing an HTML/Javscript solution. But, maybe we are missing something obvious. Any tips?

Can I use Google sheets as a small database for my apps?

I have a personal finances spreadsheet on my Google Drive.
For some practice and ease of use, I wanted to make a desktop and mobile app to manipulate it:
add an expense
list my expenses
filter the expenses
etc...
Is there a way to do this?
Since it is something so small, I'm trying to avoid anything that needs a dedicated server that I would need to set up or needing to rent any services because it's just a ease of use project and not a "must-have".
I've been searching a lot but most of the time I get confused with responses from 2-3 years ago.
EDIT:
So I found a way, using this video:
https://youtu.be/3OakodfKjrU
Basically using Google App Script you can make some post and get requests, which for me is a step in the right direction. Just needed to think outside of the box a little and I got a simple way to send post requests to create or update, and get requests to read, for now I also use get to delete but this just seems wrong, might change later.
Also I've searched and started doing a PWA (progressive web app) to be the interface, just so I can make it with a single code base and work with almost any device, using pure js, html and css, the only "non-pure" thing is Onsen Ui for the GUI.
You can use an NPMJS package such as google-spreadsheet to work with the Google APIs and manipulate your spreadsheet; the issue for you with trying to build the app without your own server is the need to securely store your Google Account credentials (you don't want this being publicly accessible).
If you could compromise and use a read-only solution, a package such as tabletop might suffice as you don't need to bother with any back-end work; I doubt this would be ideal for you though. You will need to host the application regardless if you want to be able to access it through the world wide web.
Alternatively, you could run the application locally if you would be happy with only being able to use the app that way. Hope it helps and sorry for the rambling!

Wordpress to other source rest calls with username / password

I have been asked to create some custom content on a wordpress site, basically just some web app stuff (html/css/js), but leveraging data from another source via restcalls. There is a service account un/pwd required, and I am wondering what is best practice/approach in terms of the cross site calls with this un? The wire is encrypted but I certainly don't want to store the creds on the client (wordpress admin stuff). I am assuming there is a mechanism to store such on the 'back-end', filesystem, but I am not even sure such access exists? How you get to this....I have gone through the wordpress admin board and haven't found anything that provides access to the filesystem/php files, etc. Perhaps I am not looking in the right place or after the wrong bits?
I have googled but am such a noob with wordpress I am not even sure I have the right approach in mind; any help/advice is greatly appreciated.
EDIT: so if curl is the standard approach for this type of thing, where/how am I able to access the filesystem/php? Is there a specific place this type if thing lives or a convention of where it is placed? Just help with some 101 direction please.
First things first, you will need to develop a plugin for WordPress to properly hook into everything and play nice with everyone else. There are many tutorials for getting started. Here's one that integrates with an API
If you have to store things to make your plugin integrate with this third party, you should use the Options API that WP provides to you, with the information set from a settings page. Please don't hardcode that into a file somewhere in the code. (I'll also mention if you need something more powerful than the plugin options, you can add custom tables)
Now we have code running on WordPress with the information it needs, now it needs to do something. To pull the information from this third party, we can use PHP cURL.
Last, depending on how we want this information to end up being consumed by the user. We can do something simply such as just fetching/injecting the data during a regular WP page load on our custom page. Or we could be fancier and set up a WP REST API endpoint that re-serves the information we got from the 3rd party. Shortcodes? Widgets? Custom Templates? Filter Hooks? There is a lot of ways to present our final interface to the user.

Speed up slow loading website on mobile due to 3rd party analytics scripts

Speed tests report that my site loads in about 8 seconds on mobile and 2 on desktop.
When looking at the "waterfall" of the asset/script loading it seems to be mostly due to 3rd party analytic scripts like zendesk, hubspot, and google analytics.
Is there anyway to optimize a site for mobile when using these type of scripts?
As far as the files go on my site I've optimized them nearly as much as I could. I've even used a cron (probably not a great idea) to cache the google analytics script locally and fetch a newer version every few days.
I've looked into using Tag Manager or something like Segment to optimize the script loading of these files, but I'm not sure if that will actually improve performance or if those services are mostly just for convenience.
I've also looked at service workers for mobile app caching, but I'm not sure if that will help either and don't want to dive into learning how to use them if it won't actually make a difference.
To sum up, is there a way to speed up mobile with multiple 3rd party analytic scripts or am I just going to have to forgo using some of them or possibly add a mobile version or AMP version without using them or some of them.
Since you've tagged AMP in your question, I'll answer from the AMP perspective:
AMP solves this problem by using a mediator that connects directly to the endpoints of various analytics providers, replacing their clunky and power hungry JS scripts.
Of course, AMP comes with its own set of constrains and is really only targeted at powering static content, but if you're willing to go that route, learn more about AMP Analytics here.

manage ads to multiple sites in javascript

Is there a way to manage ads in a way that if i choose to show a certain ad, it will show to multiple sites that publish my ads in their sites. I'm looking into adding google analytics to add tracking.
I've looked into iframes but there are security issues.
Is there a way to accomplish this with javascript, just like how google adsense works? I was thinking of having some javascript and giving my publishers remote scripts to access the data.
Or is there a better way?
I'm don't want to use php because it is likely that the publishers are not using php and having a php script that pulls the data means it will not execute for sites that are in html.
SUMMARY:
I'm looking for a solution thats in html and js. Any help is appreciated, and sudo code is always helpful if you can provide some.
Thanks in advance
I worked at a spot that used javascript in order to render ads. This is how I accomplished it.
First, server type. I was running an NGINX web server with a PHP-FPM backend, with Varnish (cache) in front of it. The server was basically serving up static files, so this kept server load tremendously low. This is a decent tutorial for setting that up on CentOS
I used an Amazon Elastic Beanstalk, small instance type, to run this. It never needed to spin up more than one Small instance to serve somewhere in the neighborhood of 2.5MM javascripts per hour. Keep in mind, it's just serving small text snippets.
The tags looked like this:
<script type="text/javascript" src="http:/ads.someserver.com/1234"></script>
Where the [1234] was the tag ID number. Each publisher could have multiple tags, the ID keeps track of what publisher, ad size it is, etc.
Second, javascript. So now, you use an nginx rewrite in order to direct that request to a javascript file, which then in turn loads up the ad. The javascript file has to dynamically (and without libraries of any kind, load time is at a premium) create an HTML element, and then fill it with your ad.
You need to have another service of some kind choose what ad gets shown. This was not my department, but loading something up once you have the ID should not be difficult.
Figuring out where you should serve the assets (the ads) from is a tough call to make. Wherever you serve it from, better be super fast, because ad servers nowadays that you'll be competing against are super fast, and publishers will be very annoyed if your ad delays their website loading.
Good luck - you have a lot of challenges if you want to pull this off, least of which will be paying for servers to accomplish it.

Categories