Visible Watermark For Secure Credential Website Page

The art of watermark way to secure the website page

A. Background

Today’s technology is developing very rapidly, especially in the field of websites and the use of the website itself is moving towards large-scale applications by a company. This usage is inseparable from the rapid application of website applications and the number of frameworks with many variations with their respective advantages and disadvantages. The basis of website technology in making applications is high mobility and can be accessed from anywhere.

Along with this development, many internal company applications were built using website technology. The advantage derived from the development of the system is the basis for consideration in building tools to manage the company’s internal data that is owned. Because this concerns internal consumption, it is necessary to consider the choice of securing confidential and consumed internal corporate website pages.

The choice of watermark on the website page can be used. Watermark here has an important role in securing a website page in a visual form to identify application users to prevent violations of ownership of the website page. Violations that can be done is to save or print the website pages without the knowledge and permission of the company.

B. Watermark and Digital Watermark

What is the watermark?

According to Kamus Besar Bahasa Indonesia (KBBI), the watermark is…

Tanda dalam kertas (misalnya pada manuskrip, uang kertas) yang hanya tampak samar-samar jika kena sinar[1].

According to Biermann, the watermark is…

A watermark is an identifying image or pattern in paper that appears as various shades of lightness/darkness when viewed by transmitted light (or when viewed by reflected light, atop a dark background), caused by thickness or density variations in the paper[2].

Basically, a watermark is the addition of a message to certain media in the form of text, images, or video. This technique allows an individual to add a hidden copyright note or another verification message into documents or audio, video, or image signals[3]. From this explanation, it can be said “an individual” is a company while “documents” are a number of website pages that are owned on the company’s internal website application.

The digital watermark is the act of hiding information in digital multimedia data for the purpose of content protection or authentication. Digital watermarking has become popular due to the emergence of the Internet as a common medium for the distribution of digital media. However, the risk attached is multimedia content in digital format that can be easily modified, tampered with, or reused. Hence with the increasing use of the Internet copyright protection is a major concern. The digital watermarking mechanism is at the forefront of intellectual property (IP) protection due to its ability to provide security for published digital data[4].

In the digital watermarking system, the watermark is embedded into a multimedia object to producing the watermarked data. On the digital document, the digital watermark will embed the information of copyright e.g author, time document access, and access credential. In this case, the user authentication data will embed on the website page to identify it and the role of the user.

Figure 1. Digital Watermarking System

D. Visible Watermark

What is the visible watermark?

According to Yazeed Alrashed, visible watermarking is…

A mark put inside the carrying object and it is made clear to the user[5].

Digital watermark technology is classified using different criteria such as visibility, robustness, and domain. Visible watermark if classified according to the technology domain used includes the frequency technology domain. This technique is done by inserting a watermark mark on the transformation coefficient of an image document.

The technique of inserting a watermark mark using this technique produces a more robust watermark data but is more fragile because it can attack the watermark data. The visible watermark technique is mostly done on image media. For media in the form of digital documents, it is still minimal, especially with the current conditions.

E. Implementation on Website Page

How to watermark web pages?

The simplest way to implement it is to use a combination of HTML, CSS, and Javascript code. For the CSS section id will be added to the HTML component as follows.

HTML Code

The idea is to put the overlay text behind the existing HTML component. We can put it on the beginning or put it in the last component. Be careful to put it as the beginning component, we need to take care of semantic HTML.

<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p id="watermark"></p>

CSS Code

The CSS property mostly sets the position and the watermark text orientation. The text orientation is set to 30 degrees which is a consideration of the experience of the user who will read the watermark text. From the results of research conducted by H. Babkoff, M. Faust, M. Lavidor about lexical decision tasks that the response times to correctly identify words were relatively constant for angels between 0 degrees and 60 degrees, however, there was a sharp increase in response times between 60 degrees and 90 degrees [6].

The consideration also for text opacity. The requirement to do watermark text is to try to keep the watermark text small but readable and not distract the user from the main content. The best opacity text for watermark is between 30% and 50%. Below on that, it is easier to remove the watermark text. Don’t forget to not allow the watermark section cannot be selected.

#watermark {
 color: rgba(128, 128, 128, 0.3);
 height: 100%;
 left: 0;
 line-height: 2;
 margin: 0;
 position: fixed;
 top: 0;
 transform: rotate(-30deg);
 transform-origin: 0 100%;
 width: 100%;
 word-spacing: 10px;
 z-index: 1;
 -webkit-touch-callout: none; /* iOS Safari */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Old versions of Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
 user-select: none; /* Non-prefixed version, currently
 supported by Chrome, Edge, Opera and Firefox */
}

Javascript Code

Watermark text will be set with 1 word and then duplicate as much as possible to fill one page of the website. Once combined, the watermark text is filled in.

var textWatermark = 'watermark';
var fullTextWatermark = '';
var n = 10000;
for (var i = 0; i < n; i++) {
 fullTextWatermark+= ' ' + textWatermark;
}
document.getElementById('watermark').innerHTML = fullTextWatermark

The result will be like this.

Figure 2. Watermark CSS Approach

The full code of example watermark implementation on the website page can be accessed on this Codepen.

Another approach that can be used is to use a background image in SVG format. This approach won’t use CSS because the whole process will proceed with the Javascript code.

HTML Code

The idea is to set the body with a background image. The image will create from Javascript code and set it as an inline style property.

<body style="width:100%;height:100%">
 <h1>Hello World</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</body>

Javascript Code

At the Javascript code, the SVG file will create with standard SVG header file and the attribute such as height, width, text, etc. Similar to the first approach, it uses the same text rotation and the text opacity.

var textWatermark = 'watermark';
var body = document.getElementsByTagName('body')[0];
var background = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
 "<text transform='translate(20, 100) rotate(-30)' fill='rgba(128,128,128, 0.3)' font-size='20' >" + textWatermark + "</text></svg>\")";
body.style.backgroundImage = background

The result will be like this

Figure 3. Watermark SVG Approach

The full code of another approach on the watermark website page can be accessed on this Codepen.

F. Challenge

Based on the implementation, there are several challenges encountered by applying a watermark on a web page. The challenges that arise are.

1. Possible to delete the watermark that appears.
2. Possible to replace the watermark that appears.

These challenges arise because the watermark process is carried out on the client-side so that from the challenges that can be raised the possibility of development.

1. Server-side implementation in helping the watermark process in relation to rendering HTML website pages.
2. Implementation of encoding and decoding HTML pages before or after rendering so that it requires a middle server to translate the process.

G. Reference

[1] https://kbbi.web.id/watermark

[2]Biermann, Christopher J. (1996). “7”. Handbook of Pulping and Papermaking (2 ed.). San Diego, California, USA: Academic Press. p. 171. ISBN 0–12–097362–6.

[3]Wijaya, Himawan & Usup, & Irfansyah, Puput & Lukman,. (2012). Penggunaan Teknik Watermarking Menggunakan Metode Discrete Cosine Transform (DCT) dalam Perlindungan Hak Cipta Dokumen Citra Digital.

[4]H. O. Nasereddin, Hebah. (2011). DIGITAL WATERMARKING A TECHNOLOGY OVERVIEW. IJRRAS. 6.

[5]Digital Water Marking For Compressed Images YAZEED ALRASHED Proquest LLC. UMI 1459036.

[6]Reading sideways: Effects of egocentric and environmental orientation in a lexical decision task. Davidenko, Nicolas & Ambard Alexander (2018). Vision Research. Elsevier.