Transmitting HTML from servlet to JS application causes data distortion in Firefox

When I send HTML code to an iframe using a java servlet and the js side, I am parsing json from the HTML by encapsulating it in a <div> tag with jQuery. However, sometimes additional text is added to the string that is being sent back.

If the added text contains a word enclosed in angle brackets, Firefox automatically closes the brackets, which is not desired.

For instance, when I send this:

<div>{"location":[],"columns":["<case expression>","headers"]}</div>

Firefox (specifically Firefox so far, not IE or Chrome) interprets it as:

<div>{"location":[],"columns":["<case expression>","headers"]}</case></div>

This alteration messes up my parsing process. I have tried changing the Content-Type header to application/json, but the iframe will not display the content unless the type is set to text/html.

If anyone has a solution to this issue, I would greatly appreciate it. I am open to trying different methods of sending the data if necessary.

Answer №1

To prevent the browser from mistaking HTML meta-characters for code, it is important to "escape" them into HTML entities. For example, "<" can be represented as &lt; and ">" as &gt;. Some individuals also encode the ampersand ("&") as &amp;, but modern browsers are usually able to handle this automatically.

Update by original poster regarding solution:

I utilized StringEscapeUtils.escapeHTML(), which resolved the issue successfully. Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Provide me with the list of names from the array of objects

I'm struggling to find a way to print the array of values in a specific order after looping through an object. **Here is the challenge:** Given a set of game outcome records, the task is to identify all the players and create an array of their names ...

Guide on displaying a dropdown in AngularJS when the select option is already applied but not showing

I am currently working on creating a select option using JSON data, but for some reason it is not displaying. I have used the select tag and placed the option tags inside it. <div ng-switch-when="SWITCH"> <select name="selectedFacilit ...

Adjusting an image size using JQuery after resizing a canvas will only resize the image itself, not

How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...

Unable to view Bootstrap Icons in Gulp 4

I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...

Utilizing JSON namespace in ASP.NET MVC

I have been attempting to utilize JSON in my repository.cs file, but I keep encountering the error "does not exist in current context". It seems like I may be missing a namespace, however, I am unsure which one to include. I attempted using the namespace ...

Utilizing JSX interpolation for translation in React JS with i18next

I am trying to utilize a JSX object within the interpolation object of the i18next translate method. Here is an example code snippet along with its result: import React from "react"; import {useTranslation} from "react-i18next&qu ...

Issue encountered when attempting to load web view using an http URL

I am currently working on a webview app using React. During development, both http and https URLs were functioning perfectly. However, after generating the APK, only the https links are working. How can I fix this issue? import React, { Component } from ...

Obtaining an address using latitudes and longitudes with React Google Maps

I created a map using the react-google-map plugin where users can drag the marker to get the latitude and longitude of a location. However, I am only able to retrieve the lat and lng values and not the address. How can I obtain the address as well? Take a ...

Change the dropdown menu text to show the selected option text once the page has been redirected

Hey there, I am looking to dynamically update the dropdown text with the selected option after a page redirect and reload of the dropdown. Check out my code below: <div class="sorting-option"> <select id="selectdropdown" class="dropdown-selec ...

Generate comprehensive reports, dynamic graphs, and interactive charts with the ability to export to PDF, Excel directly from

Currently seeking a utility class or API that can assist in generating reports, graphs, and charts from JSON objects. Additionally, requiring the ability to export data to Excel and PDF while preserving formatting. Any recommendations would be appreciated ...

Increment by 1 until a specific number is reached instead of displaying all numbers within an array

I have an array of numbers and for each number in the array, a request is sent to an external website using the number as a URL variable. The webpage content is then displayed. Instead of manually listing the numbers (1, 2, 3, 4, 5, 6, 7, 8, 9) in the arr ...

Vue and Vuetify tutorial: Implementing validation for individual chip items within a select input instead of the entire input field

Is there a way to implement validation (using vee-validate) on each individual chips item? Below is the current code snippet: <v-select class="elevation-0 mt-border-bottom" v-model="PhoneNumber" label="Add phone number" chips tags solo p ...

Utilizing Firebase in place of .json files for the AngularJS Phonecat application

I am currently exploring firebase and attempting to retrieve data using this service from firebase instead of json files. However, I have encountered some challenges in getting it to function properly. This is inspired by the angularjs phonecat example .f ...

Converting a TypeScript object into a JSON string

When working with TypeScript, I am facing a challenge while trying to initialize an object that requires a JSON string for the "options" parameter. Specifically, it pertains to the object mentioned here. It is crucial that the options parameter be in JSON ...

Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process. Below is my code with ...

Why isn't the pipe working when trying to extract the last 2 characters using

I am currently working on creating a regex pattern to extract the variables passed to a JavaScript constructor. The format of the input data will always be similar to this: app.use(express.static('public')); The regex I have devised to remove ...

Automatically dismiss a Modal Popup without the need for a button or click event

I am currently facing an issue where I have a page constantly refreshing, and I am looking to implement a modal popup with a message saying "Please wait..." while the page reloads using $state.reload(). GenericModalService.confirmationSplit($rootScope, m ...

Incorporate a Fadein effect into the current CSS for mouseover link interaction

Is there a way to enhance my current css code for a mouseover link with a background image by adding a fade in and out effect? What's the most effective method to achieve this using jquery? .sendB { width: 100%; height: 125px; background: ...

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

I am encountering issues with the FixedColumn plugin on IE8, IE7, and Firefox. All of them are causing my table to malfunction, displaying the following error: Error: Invalid argument. Line: 566 Char: 3 Code: 0 URI: ./resources/javascript/dataTable/Fixed ...

Encountering a 'Not Found' error message when sending an Ajax post request

Having trouble with an AJAX call in my JS file in Durundal. var dataJSON ={ID : "jo"}; self.js = $.ajax({ type: "POST", dataType: text, url: "http://localhost:53081/api/File", data: JSON.stringify(dataJSON), error: function (xhr, stat ...