Can third party resources affect your website? This is how you can check it
Understanding types of web resources
In all real-life web apps there’s a need to include some resources. These resources can be internal, like the texts and styles embedded in HTML tags, or external, like images, audios, scripts, and stylesheets.
These external resources can further be classified as first-party or third-party resources. First-party resources are hosted on the website that you have actually visited, e.g. if you load Amazon, all resources that are hosted on the same domain, Amazon.com, are first-party. Any resource that is hosted on any other domain, like bootstrapcdn.com, is considered third-party.
Why do we need third party resources?
You`ll find third party resources on almost every website you visit. Primary reasons to use them include:
- Having another domain of your own. For ex- the Facbook uses static.xx.fbcdn.net to serve their static content
- Using external hosting services like GoFile.io, Imgur.com
- A/B Testing
- Embedding content like Youtube videos
- Using public CDNs like unpkg.com, BootstrapCDN.com
- Integrations like Customerly, Google Analytics
- Advertisements and sponsored content
Is including third party resources a bad idea? -No
It is generally safe to include third party resources from a known and trusted source to maintain your ease of use on the web. There are many more understandable reasons to critically evaluate and consciously manage them. However spam and suspicious sources like those claiming to provide files hosting free forever should be avoided.
If you want to include third party cookies, you might want to block them unless the user specifically agreed to use them to comply with the latest website regulations.
How can untrusted third party resources affect the website?
- They might perform poor — The third party resource you`re requesting might take long to load due to busy or inefficient server, increasing overall loadtime, or your favourite image host might be reducing image quality without even letting you know.
- They might delete or move the file — Most of the free file hosts delete your files if you don`t access them actively. The next time, you are left with a 404.
- They might modify the file — The cute kitten picture you embedded in your beautiful webpage might get replaced with an obscene image, or your javascript library might have been injected with miscellaneous code, you`ll never know.
In case you`re wondering how third party CSS can be unsafe, this article by Jake Archibald will make it more clear.
How to disable third party resources?
To disable third party cookies, you may follow this quick guide.
To disable other third party resources, we have got two ways:
- Using browser DevTools to temporarily block requests
- Using Requestly extension to persistently block requests
Using DevTools to block third party resources:
- Open the browser DevTools, by pressing Ctrl+Shift+I, or choosing Inspect Element from the context menu
- Navigate to the Network tab and choose type of resource you want to disable. We`ve chosen CSS in this example.
3. Load the webpage on which you want to disable resources
4. Under Network tab in DevTools, look for the resource URL and Host (domain), you want to disable
5. Right click the resource Name and choose Block Request Domain
6. Similarly block other request domains
7. Reload the webpage
That was easy! But this works only when the DevTools are open. Once you restart the browser or open a new tab, you`ll have to disable them using DevTools again.
Using Requestly to block third party resources
- Open new tab with DevTools, navigate to the Network tab and load the webpage
2. From the list of resources, get the domain or URL of the resources you want to disable.
3. Install Requestly from web store. It is an extension for Chrome and Firefox used to modify network requests.
4. Navigate to app.requestly.io and click on New Rule on top right
5. Choose “Cancel Rule” under Select Rule Type
6. Give this rule a name and description
7. Enter the domain and URLs that we got in Step 2.
At current stage, Requestly will block every requested resource matching the criteria. Since we want it to block resources only on specific webpages, we need to add filters.
8. Click Add Filters. Set Page URL and Resource Type to block, and then save the rule.
9. Reload the webpage
10. Make the rule as favourite to quickly access it from Requestly icon on your address bar.
And that`s it!
We’ve successfully understood what are third party resources and how can they affect your website. We also learnt how to disable them on specific pages. Give yourself a pat on the back for following along. Throw some claps too. 👏
Feel free to ask anything or suggest your ideas.
References
- Third party CSS is not safe — By Jake Archibald
- Blocking certain requests on web page — By Umar Hansa
- Requestly — Perfect solution to debug & modify network requests
- Understanding different Rule Types in Requestly
