The Dynamic Interface of the Website

With the advancement of website technology, we can put various content inside our websites such as images, animations and videos by adding a widget to make our website at the best appearance. One of the famous widgets on a website is the slider or image carousel. This widget allows the website owner to put several images. The images will be changed automatically like an animation. Besides the original content of the website, a similar case is when the website owner wants to put several advertisements that might regularly change.

In the defacement monitoring service, the above kind of contents might become a problem since the system needs to compare the changes in the period of times. It will trigger so many false alerts if the system doesn’t have a mechanism to handle it.

For Example, when the system captures the website for the first time, the website is showing ”Picture A”. In a few moments later, the website is showing “Picture B”, then when the system re-capture the website, it will detect a discrepancy and send an alert.

However, with the SentryPage, we believe that those kinds of problems can be handled with our certain algorithm. This article will explain new features that are implemented on the SentryPage application, which are Ad-blocker, Animation Disabler, Additional Action and DOM Exclusion. Those features will take effect on the browser before the application captures the webpage for further checks.

The first feature is Ad-blocker. In some webpages, ads from Google or another resource may be visible differently at different times, and it will change the captured image. So, we decided to add the Ad-blocker plugins on our headless browser when we are attempting to capture the webpage.

Secondly, we are adding an Animation Disabler feature. Some web page designs use animation to make their site look more interesting. The animations such as carousel slider, image banner, etc. To make these elements do not impact the visual changes on the capture result, we decided to set the animation playback rate to zero. So, the animation will always be in its initial state, and we will not get consistent visual changes when capturing dynamic webpages.

Thirdly, we add a feature that enables users to give additional actions before the capture service takes effect. To make it more friendly, we use simple keyboard actions like “tab”, “enter”, “text input” and “wait” (to wait until web contents are loaded). They control our headless browser to do the desired actions. The users can try it first on their own web browser to make sure and decide the actions they are going to input. For instance, let’s get to https://www.facebook.com/.

To be able to log in to Facebook by only using keyboard actions, we can type our email address “example@gmail.com” because at default, the selector already in the email address section when we first access the URL. After typing the email address, then press “tab” once and type our password “pass123”. Again, press “tab” once then “enter”, and we will “wait” until our dashboard contents are loaded. This enables the users to capture a webpage content that is visually hidden unless several actions are done.

Lastly, we add a DOM Exclusion feature that helps users to exclude some elements. The excluded elements may get changed consistently and make an alert sent from SentryPage as visual checks or attack signature. For example, when the webpage has a clock element. With DOM exclusion feature, the capture service will highlight the specific element given by the user using black colour.