Hands-on Lab Practice

Create a new Android Studio project and name it “OutputEncoding” and "ksu.com" for the Company Domain and click on Next.

Step one

The first step is to create a new project, click on File-->New Project

Step Two

Choose 'Empty Activity'

Step Three

Name the project as 'OutputEncoding'

Step Four

Right-click on the project and create a new assets folder as shown there

Step Five

Inside the assets folder that was just created, create an HTML file named “unsecure.html” and copy and paste the following code into it

Step Six

Copy the following code and paste the code into "unsecure.htm" and other files including "MainActivity.java", "AndroidManifest.xml"

//Copy and paste the following code into "unsecure.html"

//unsecure.html

<html>

<head>

<title>

Unsecure

</title>

</head>

<body>

<h1> Hello <script>alert("You have been attacked!")</script>!</h1>

</body>

</html>

//Copy and paste the following code into “MainActivity.java”

//MainActivity.java

package com.ksu.outputencoding;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

import android.widget.Button;

import android.widget.TextView;

import android.text.TextUtils;

public class MainActivity extends AppCompatActivity {

TextView textView;

TextView encoded;

Button unsecure;

Button secure;

Button encodedResult;

WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

textView = (TextView) findViewById(R.id.textView);

encoded = (TextView) findViewById(R.id.textView2);

unsecure = (Button) findViewById(R.id.button);

secure = (Button) findViewById(R.id.button2);

encodedResult = (Button) findViewById(R.id.button3);

webView = (WebView) findViewById(R.id.webView);

webView.getSettings().setJavaScriptEnabled(true);

String script = "Demostrating the consequences of the script:\n<script>alert(\"You have been attacked!\")</script>";

String html = "<html><body>" + script + "</body></html>";

textView.setText(script);

unsecure.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

webView.setWebChromeClient(new WebChromeClient());

webView.setVisibility(View.VISIBLE);

webView.loadUrl("file:///android_asset/unsecure.html");

encoded.setText("");

}

});

secure.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String secureHTML = "<html><head><title>Secure</title></head><body><h1> Hello "+TextUtils.htmlEncode("<script>alert(\"You have been attacked!\")</script>")+"!</h1></body></html>";

webView.setWebChromeClient(new WebChromeClient());

webView.setVisibility(View.VISIBLE);

webView.loadDataWithBaseURL(null, secureHTML, "text/html", "utf-8", null);

encoded.setText("");

}

});

encodedResult.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

encoded.setText(TextUtils.htmlEncode("<script>alert(\"You have been attacked!\")</script>"));

webView.setVisibility(View.GONE);

webView.loadData("","text/html", null);

}

});

}

//Copy and paste the following code into “AndroidManifest.xml”

//AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.ksu.outputencoding">

<uses-permission android:name="android.permission.INTERNET"/>

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/Theme.OutputEncoding">

<activity android:name=".MainActivity"

android:exported="true">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

//Copy and paste the following code into “activity_main.xml”

//activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.ksu.outputencoding.MainActivity">

<TextView

android:text="Demostrating the consequences of the script:"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:id="@+id/textView" />

<LinearLayout

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/textView"

android:id="@+id/linearLayout">

<Button

android:text="Unsecure"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/button"

android:layout_below="@+id/linearLayout"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<Button

android:text="Encode!"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/linearLayout"

android:layout_toRightOf="@+id/button"

android:layout_toEndOf="@+id/button"

android:id="@+id/button2" />

<Button

android:text="Encoded Result!"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/linearLayout"

android:layout_toRightOf="@+id/button2"

android:layout_toEndOf="@+id/button2"

android:id="@+id/button3" />

</LinearLayout>

<WebView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/linearLayout"

android:id="@+id/webView"

>

</WebView>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/webView"

android:id="@+id/textView2" />

</RelativeLayout>

Let's look on the output

Output Screen

The first interface after run the project consists of the buttons including "Unsecure", "Encode", Encoded Result"

Output "Unsecure"

The Unsecure button demonstrates the consequences of not having output encoding when the script:

Output "Encode"

The Encode! button demonstrates the results when output encoding has been implemented, with the script being encoded and displayed as data and not executed as code.

"Output Encoded Result"

The Encoded Result! The button shows the actually encoded result when the script is html encoded

Hands-on Lab Practice

Step one

Step Two

Step Three

Step Four

Step Five

Step Six

Let's look on the output

Output Screen

Output "Unsecure"

Output "Encode"

"Output Encoded Result"

Download Link for OutputEncoding.zip