Tag Archives: programming

Introduction of Cross-Site Scripting (XSS) Vulnerability & How to Prevent It?

What is the Cross-site Scripting (XSS) Vulnerability & How to Prevent it

As a web developer, you may know XSS as Cross-site Scripting. It is a way of bypassing the SOP concept. An attacker could easily insert his own HTML code whenever HTML code is generated dynamically, and the user input is not sanitized and is reflected on the page. In this case, the web browser will still display the user’s code since it belongs to the website where it is injected.

The attacker could easily interject JavaScript code which would run under the site’s context. By this way, the attacker can access other pages on the same domain and read data like CSRF-Tokens or the set cookies.

The attacker can use the cookies which typically contain session identifier information, and use it in his own browser and login to the web application as the victim. Another way is by reading private information from the pages, such as read CSRF tokens and makes requests on behalf of the user.

Impacts of the Cross-site Scripting Vulnerability

There are many impacts of an exploited XSS vulnerability. It ranges from Session Hijacking to the disclosure of sensitive data, CSRF attacks and more. The attacker can impersonate the victim and take over the account by exploiting a cross-site scripting vulnerability. It might even lead to code execution on the server if the victim has administrative rights. But it will depend on the application and the privileges of the account. To get more information on how a XSS vulnerability was used in a successful attack can read about the apache.org jira incident .

Preventing XSS Vulnerabilities

The most important thing in preventing cross-site scripting vulnerabilities is to apply a context dependent output encoding. In some cases it might be enough to encode the HTML special characters, such as opening and closing tags. In other cases, URL encoding is necessary if it is correctly applied.

Moreover, your inbuilt XSS filter, even in your most modern web browsers should not be seen as an alternative to sanitization. However, they cannot catch all kinds of cross-site scripting attacks. As a result, this will prevent some pages from loading correctly. Since the idea is to minimize the impact of existing vulnerabilities, a web browser’s XSS filter should only be a “second line of defense”.

introduction of JDBC Connection Pooling

jdbc-connection-pooling

This article will tell you about how web developers can provide a strategy for applications that must handle connection pooling. This document will give an overview of JDBC connection pooling as specified by the JDBC 3.0 specification. This Connection Pool Manager is shipped with DataDirect Connect® for JDBC and DataDirect SequeLink® for JDBC. Finally, this document provides an example showing performance benchmarks that demonstrate the performance benefit by using connection pooling.

Connection Pooling

On the other side, establishing JDBC connections can be resource-expensive. Especially, when the JDBC API is used in a middle-tier server environment, or when DataDirect Connect for JDBC or DataDirect SequeLink for JDBC is running on a Java-enabled web server. In this condition, when connection pooling is used performance can be improved significantly. Rather than created connections each time a connection is requested, connection will be reused in Connection pooling. A connection pool works by a connection pooling module as a layer on top of any standard JDBC driver product.

Connection pooling will not affect how an application is coded as it will be performed in the background. However, the application must use a DataSource object (an object implementing the DataSource interface) in order to obtain a connection instead of using the DriverManager class. A class implementing the DataSource interface may or may not provide connection pooling. A DataSource object registers with a JNDI naming service. After a DataSource object is registered the application will retrieve it in the standard way from the JNDI naming service.

For example:

Context ctx = new InitialContext();
DataSource ds = (DataSource) ctx.lookup(“jdbc/SequeLink”);

The lookup returns a connection from the pool if one is available, if the DataSource object provides connection pooling. However, if there is no connection pooling or if there are no available connections in the pool, the lookup creates a new connection. The application will get advantages from connection reuse without the need to change any code. In fact, reused connections from the pool act the same way as newly created physical connections. Connection to the database and data access works in the usual way with the application. Furthermore, the application explicitly closes the connection, when the application has finished its work with the connection.

For example:

Connection con = ds.getConnection(“scott”, “tiger”);
// Do some database activities using the connection…
con.close();

For future reuse, the pooling module will get signal from the closing event on a pooled connection signals to place the connection back in the connection pool.

3 JavaScript Libraries to Look Up for in 2017

3-javascript-libraries-to-look-up-for-in-2017

For some web developers, JavaScript’s ecosystem can be fatigue. Especially this year where there is a lot of tooling and configuring is required. So, to make your work easier, we submit a list of 3 generic libraries/frameworks for front-end development.

Vue.js

If you haven’t put any attention on Vue.js before, now you have to keep your eyes on. It is a tiny JavaScript framework which seems to primarily focus on views and give you only a handful of tools to regulate data for those views. Moreover, Vue.js is also good for a change as it doesn’t get stuffed with programming design pattern and limitations.

There are two types of Vue.js. A stand-alone version that includes the template compiler and the runtime version that doesn’t. You can see its simplicity, through an example of a component that shows a message and brings interactivity to a button to reverse the message.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    reverseMessage: function () {
      const reversedMessage = this.message
        .split('')
        .reverse()
        .join('');

      this.message = reversedMessage;
    },
  },
});

Don’t you worry about the existence of other plugins, as you still can find them on Vue.js. In fact, several guides are available to use there. This framework will be suitable for you, especially if you wish to have productive fast. It also scales well as the project grows.

Svelte

Svelte must be the latest JavaScript Libraries as it has been released in mid-November 2016. At some point, it may looks similar to Vue.js, but leaves a smaller footprint. “Traditional” frameworks need runtime code to define and execute modules; keeps state, update the views and do whatever frameworks do. Moreover, with Svelte you can dissolve into clean JavaScript code as of you didn’t use a framework at all. The big advantages that you can get is that its file size.

Svelte has plugins so you can compile the source code using Webpack, Browserify, Rollup or Gulp.

You can use the below example of creating the Vue.js example with Svelte as a comparison:

<p>{{ message }}</p>
<button on:click="reverseMessage()">Reverse Message</button>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
    }
  },
  methods: {
    reverseMessage () {
      const reversedMessage = this.get('message')
          .split('')
          .reverse()
          .join('');

      this.set({
        message: reversedMessage,
      });
    }
  }
};
</script>

The very same module created with Vue.js produces a 7kb bundle. Svelte produces a 2kb file.

In terms of performance, Svelte competes with Inferno. This makes Svelte becomes a good choice if you care about your application’s footprint. At the time of writing, Svelte either doesn’t have its plugin system documented, or doesn’t have one at all. The TODO indicates that Svelte will support plugins and might have an API to hook into the framework.

The compatibility of the compiled code depends on your build workflow stack, so it’s hard to say what its default compatibility is. Technically you should be able to achieve pre-ES% support by including ES5 shims.

To conditionally load and invoke modules, Conditioner.js is one of the good choices. The difference from other module loaders is that conditioner.js allows you define conditions under which to load and/or show a module. This results in reducing loading time and saving bandwidth.

However, you better already have functional components in place that are enhanced with a given JavaScript module. How those modules are defined is entirely up to you. You could even make it load modules from your favorite framework.

To get started, you can install it via npm: npm install conditioner-js.

The demo is unlike previous ones to better illustrate Conditioner.js’ features. Imagine we wish to show the time remaining to an event. A module is shown like this:

import moment from 'moment';

export default class RelativeTime {
  /**
   * Enhance given element to show relative time.
   * @param {HTMLElement} element - The element to enhance.
   */
  constructor(element) {
    this.startTime = moment(element.datetime);

    // Update every second
    setInterval(() => this.update(), 1000);
    this.update();
  }

  /**
   * Update displayed relative time.
   */
  update() {
    element.innerHTML = this.startDate.toNow();
  }
}

It is so simple to initialize the module:

<time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>

Conditioner will then load the ui/RelativeTime module at this location in the DOM. Note the content is already present and in an acceptable format and the module only enhances that.

If you want a module to initialize only when it’s visible to a user, you can do so with conditions:

<!-- Show RelativeTime only if it is visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}">2017</time>
<!-- Keep showing RelativeTime after it was visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}">2017</time>

Conditioner.js has quite an extensive list of monitors, which you use to define conditions. Don’t fret! You only have to include those you need, preventing the inclusion of unnecessary code.

You can also pass along options as a JSON string or a slightly more readable JSON variant.

<!-- JSON variant -->
<div data-module="ui/RelativeTime" data-options='unit:"seconds"'>...</div>
<!-- Or good old JSON -->
<div data-module="ui/RelativeTime" data-options='{"unit":"seconds"}'>...</div>