How to send images with image map to client and create widget with it

[tanteanni]

On server side i have a lib (can be modified) that produces png images and corresponding imagemap for mouse hover titles. But how to use them with gwt? I already have a little servlet that could png-images to client (on client side gwt Image objects are created and added to widgets).

Due to compatibility concerns and user friendliness i don't want to use embedded images (base64) . So how to send image and map to client and how to plug it together into a widget?

[Jens]

Create a DTO that describes the image map, something like:

ImageMap

- String: imageUrl (would point to your png-image servlet)

- List<ImageMap.Area>: areas (calculated on server using your lib)

ImageMap.Area:

- ShapeTypeEnum: shape (RECT, CIRCLE, POLY)

- List<Integer>: coords

- String: href

- String: title

Then create a custom widget that can render an image map using <img>, <map> and <area> and use the DTO information to configure the widget.

If your lib creates raw HTML for the image map then you probably only need the imageUrl and the raw HTML in your DTO and render the raw HTML directly using GWT's HTML widget. But you have to do some sanity checks on the raw HTML to prevent cross site scripting attacks. 

So if you can, build the HTML on the client side and only transfer the needed data from server to client.

-- J.

[tanteanni]

thx jens

So for each image to server requests are necessary: 

1 to get the dto and create html with image-url 

2 to get the image from servlet

my hope was/is there is a way with one request/response? And indeed i get the image map as html. so my dto would be very simple: 2 Strings (url + map).

[Jens]

So for each image to server requests are necessary: 

1 to get the dto and create html with image-url 

2 to get the image from servlet

Yes, although the second request is done by the browser and not by your GWT app. To remove the browser request, you would need to use data uris (base64) and use the data uri instead of the server url. But as you said, you don't want that.

Just be aware of XSS attacks. A possible man in the middle attack could probably modify the raw html while its send from server to client. The html would then contain some evil javascript that will be executed by the browser in your app's context as soon as you render the html.

-- J.

[tanteanni]

thx,

especially for the security hint.