1
00:00:00,180 --> 00:00:05,550
All right, so in this lecture, we're going to talk about how we can do network interception.

2
00:00:05,580 --> 00:00:11,850
I mean, this is one of the another great feature that you can actually do as a part of your modern

3
00:00:11,850 --> 00:00:12,690
Web app testing.

4
00:00:12,930 --> 00:00:17,000
I mean, this network interception is a really, really cool concept.

5
00:00:17,010 --> 00:00:22,530
I'm in I'm going to cover a lot in our next section about network interception in even more detail,

6
00:00:22,530 --> 00:00:28,860
like not only network interception, but also how you can manage cookies and how you can hijack your

7
00:00:28,860 --> 00:00:33,350
network in terms of creating your own one ad blocker kind of things.

8
00:00:33,360 --> 00:00:37,950
I mean, that's going to be something that we'll be talking about in our next lecturer's as a lab section.

9
00:00:38,070 --> 00:00:43,350
But today we're going to talk about a bit of what network interception is all about, because in this

10
00:00:43,350 --> 00:00:46,800
section, we actually talking about the modern way of doing the testing on high level.

11
00:00:47,490 --> 00:00:52,950
But yes, you need to know about network interception so that we can actually talk a lot about it in

12
00:00:52,950 --> 00:00:54,120
our next section.

13
00:00:54,500 --> 00:01:00,630
So an interception is actually a very good concept in terms of how you intercept the network before

14
00:01:00,900 --> 00:01:06,390
the page is going to be rendered on the dome and how you are going to block some of the content or how

15
00:01:06,390 --> 00:01:12,420
you're going to change the content of the page, or how you can intercept in a way that you can also

16
00:01:12,420 --> 00:01:19,590
put your own resources off your machine or how you can set or proxies for the network and how you can

17
00:01:19,800 --> 00:01:21,450
block that you are on and stuff.

18
00:01:21,450 --> 00:01:22,590
I mean, you can do a lot.

19
00:01:22,590 --> 00:01:27,870
I mean, imagination is your only place where you can keep the limitation of the network interception.

20
00:01:27,870 --> 00:01:34,200
It is really, really cool because as you know, any time you actually go to your browser, let's say

21
00:01:34,200 --> 00:01:37,770
if I go to Amazon.com website.

22
00:01:38,160 --> 00:01:42,360
So this is the page which has been rendered on the Amazon.com website right now.

23
00:01:42,360 --> 00:01:46,500
And you can see that there are so many resources available on this particular page at the moment, not

24
00:01:46,500 --> 00:01:55,080
only just the DOM element that is so many images, the images can be of an image as we manage our image

25
00:01:55,080 --> 00:01:55,800
or whatever it is.

26
00:01:56,010 --> 00:02:02,580
And there will be a lot of resources loading behind the scene, not just the data of the image or something

27
00:02:02,580 --> 00:02:07,950
like that, but also you could see if I go to the application, you can see that there are so many items

28
00:02:07,950 --> 00:02:08,490
being loaded.

29
00:02:08,790 --> 00:02:12,540
And if you go to the network, let me try to refresh this.

30
00:02:12,540 --> 00:02:17,090
You can see that a lot of resources are being pulled behind the scene.

31
00:02:17,100 --> 00:02:18,210
These are just exegete.

32
00:02:18,210 --> 00:02:18,900
I'm just pulling.

33
00:02:19,080 --> 00:02:22,110
If I just put all you can see, there are so many data.

34
00:02:22,500 --> 00:02:29,270
And if I go to the security, you could see that there will be a lot of other data loading up as well

35
00:02:29,520 --> 00:02:32,310
from Secure Origin that are so many data's been loading up.

36
00:02:32,670 --> 00:02:37,890
So there are so many things that this particular website is loading behind the scene.

37
00:02:37,890 --> 00:02:45,840
And that's why Apple is trying to block many of these pages, like some ad resources every time in their

38
00:02:45,840 --> 00:02:46,720
safari browser.

39
00:02:46,740 --> 00:02:54,330
So if I just open Safari browser and if I just put Amazon.com over here, you can see that there is

40
00:02:54,330 --> 00:02:55,410
a shield coming in.

41
00:02:55,680 --> 00:03:02,160
And if I click this shield over here, you can see that it tells that Amazon.com, one tracker implemented

42
00:03:02,170 --> 00:03:08,070
from the profile from profiling you and this tracker is the Amazon ad system dot com.

43
00:03:08,310 --> 00:03:10,590
So similarly, I mean, this Amazon is more legit.

44
00:03:10,590 --> 00:03:15,000
I mean, they don't really need to do a lot of tracking on you because their ad system itself is more

45
00:03:15,000 --> 00:03:15,950
than enough for tracking.

46
00:03:16,290 --> 00:03:21,780
But if you go to some other website, let's say your Internet, and if you see the ad trackers that

47
00:03:21,780 --> 00:03:24,900
are for the 19 trackers have been prevented profiling you.

48
00:03:24,900 --> 00:03:29,700
And you can see that there are so many trackers running behind the scene just to trackers.

49
00:03:30,030 --> 00:03:37,470
So these kind of things we can actually block using mini software like safari sites are doing it for

50
00:03:37,470 --> 00:03:37,710
us.

51
00:03:38,130 --> 00:03:41,700
But similarly, Chrome, you can put some plugins like ad blockers and things.

52
00:03:41,700 --> 00:03:46,980
I mean, you can intercept these kind of network traffic and you can also do all sorts of things yourself

53
00:03:46,980 --> 00:03:47,580
if you want to.

54
00:03:47,880 --> 00:03:52,770
But in this lecture, we are actually going to see how we can actually interest a basic image.

55
00:03:52,770 --> 00:03:57,340
But the next section, we'll see how we can build our own ad blockers kind of stuff.

56
00:03:57,690 --> 00:04:03,300
So what I'm going to do is because as long as I can see here that there are going to be a lot of resources,

57
00:04:03,300 --> 00:04:07,410
which is like JPEG file like that.

58
00:04:07,620 --> 00:04:08,700
So these are image files.

59
00:04:08,710 --> 00:04:13,650
So if I want to block all these contents over here, I could be able to intercept the network.

60
00:04:13,920 --> 00:04:19,920
So I'm just going to call this network intercept and over here I'm actually going to copy paste the

61
00:04:19,920 --> 00:04:28,680
code that we have already written, probably from the trade start JS So this code probably I'm not going

62
00:04:28,680 --> 00:04:34,380
to use this whole quarter, by the way, but I just wanted this at the moment for the basic coding.

63
00:04:34,710 --> 00:04:39,680
And what I'm going to do is I'm just going to remove all these code.

64
00:04:39,690 --> 00:04:48,840
And over here I actually need just the Amazon.com website here and I'm actually going to do the interception

65
00:04:48,840 --> 00:04:49,550
of the network.

66
00:04:49,560 --> 00:04:56,070
So in order to intercept the network in Puppeteer, there is a method called on method, but in playwrite

67
00:04:56,070 --> 00:04:58,770
they have changed this to around.

68
00:04:58,770 --> 00:04:59,730
So you can just do.

69
00:04:59,800 --> 00:05:05,950
Something like a wait page dot, there is something called a shroud, so if you use the root method,

70
00:05:06,160 --> 00:05:08,650
you could actually intercept the nature of using that.

71
00:05:09,010 --> 00:05:14,140
So you could put something like a star star star, like a wild card.

72
00:05:14,410 --> 00:05:24,610
And then you can put all the images, which is sitting inside that like PMG or GBG or GBG or SWG, things

73
00:05:24,610 --> 00:05:25,300
of that nature.

74
00:05:25,330 --> 00:05:28,450
So you can intercept all these images that is coming up.

75
00:05:28,720 --> 00:05:32,340
And then you can also put a request here like this.

76
00:05:32,590 --> 00:05:38,950
So whatever cross which is coming under this particular extension, like the images, you can actually

77
00:05:40,510 --> 00:05:41,530
intercept that.

78
00:05:41,900 --> 00:05:43,450
So it'll be coming over here.

79
00:05:43,510 --> 00:05:49,500
And then I'm going to use a symbol and over here I'm just going to do and condition.

80
00:05:49,510 --> 00:05:56,740
So if the request request dot, there is something called a resource type.

81
00:05:57,310 --> 00:05:59,720
So you can see there are many different methods available.

82
00:05:59,770 --> 00:06:02,790
The one which I'm going to be using this time, it's going to be the resource type.

83
00:06:02,800 --> 00:06:08,040
But we'll talk about the other things later in this course, in our next section.

84
00:06:08,050 --> 00:06:10,480
But as of now, just let it be.

85
00:06:10,510 --> 00:06:16,740
This is what we'll be discussing and this is going to be the image and within this image.

86
00:06:16,750 --> 00:06:23,440
So if you see a resource type image, then what you can do is just do this request, dot a board.

87
00:06:23,710 --> 00:06:29,770
So if you see any of the resource type estimates, just about the particular request, if not, you

88
00:06:29,770 --> 00:06:36,690
can just do an LS off request dot continue something like this.

89
00:06:36,730 --> 00:06:41,140
So if you do that, then it is going to block all the images within the page.

90
00:06:41,380 --> 00:06:46,900
So I'm just going to put a problem and a common despicable piece of code that's going to save this.

91
00:06:47,170 --> 00:06:55,900
And then I'm going to do node of network intercept or just run the test run can see that is opening

92
00:06:55,900 --> 00:07:02,490
the browser and you can see that within this particular Amazon.com, there is no image being loaded.

93
00:07:02,800 --> 00:07:09,070
So if I try to inspect the element at the moment, they can see that all the images are not loaded.

94
00:07:09,070 --> 00:07:12,040
And so all it's telling that is a fail to load the resource.

95
00:07:12,880 --> 00:07:18,430
And there is an error failed because we have intercepted the network and we have blocked all the request,

96
00:07:18,430 --> 00:07:24,490
which is sent from the browser, and it is blocked because we have blocked it over here on our client

97
00:07:24,490 --> 00:07:24,850
site.

98
00:07:25,090 --> 00:07:26,770
So it's just blocked at the online site.

99
00:07:26,770 --> 00:07:31,110
I mean, the server side is still going to so the images for you, but we have blocked it in on browser.

100
00:07:31,390 --> 00:07:33,650
So this is how we can do the network interception.

101
00:07:33,700 --> 00:07:36,700
This is not just the image interception that we can do.

102
00:07:36,970 --> 00:07:39,550
We can also intercept the network request.

103
00:07:39,560 --> 00:07:43,960
We can also intercept the user that we want to intercept and stuff.

104
00:07:43,960 --> 00:07:46,330
I mean, we can talk about that in our next section.

105
00:07:46,330 --> 00:07:49,210
But yes, this is what the network interception in playwrite.