AngularJS - Generating dynamic image map

[nmusmani]

I am getting image map from the server and trying to display contents using ng-bind-html. while rendering AngularJS removes name attribute from map tag. Therefore user clicks are not affective in map.

Sample: http://plnkr.co/edit/j5ylalmEabQH7GonOB4C?p=preview

angular.module('imgMapExample', ['ngSanitize'])
.controller('ExController', ['$scope', function($scope) {

  var imgPath = "http://www.w3schools.com/tags/";
  var imgPlanet =  imgPath + "planets.gif";
  var imgSun =  imgPath + "sun.htm";
  var imgvenus =  imgPath + "venus.htm";
  var imgmercur =  imgPath + "mercur.htm";

  var ImgTag = '<img src="' + imgPlanet + '" width="145" height="126" alt="Planets" usemap="#planetmap" />';
  var imgMap = '<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="' + imgSun + '"> <area shape="circle" coords="90,58,3" alt="Mercury" href="' + imgmercur + '"> <area shape="circle" coords="124,58,8" alt="Venus" href="' + imgvenus  + '"> </map>';

  var imgMapTest = '<map name="planetmap"></map>';

  $scope.ImgData =  ImgTag + imgMap;

}]);

[pkozlowski-opensource]

@nmusmani if you want this HTML to inserted as-is by AngularJS binding you need to mark is as trusted:
http://plnkr.co/edit/R2oKsetegH8WrL1ukaf7?p=preview
https://docs.angularjs.org/api/ng/service/$sce

[caitp]

I totally closed the wrong issue. derp

[caitp]

@pkozlowski-opensource do you know if there's a good reason why we'd remove name attributes from URIs though? i can't really think of a good reason

[pkozlowski-opensource]

@caitp actually now that you ask the question I starting to wonder what harm leaving out names can do. Will dig into later today, unless someone else is faster :-)

[pkozlowski-opensource]

So, it looks like a deliberate choice to remove name, id and style attributes in 2bbced2, we've got still test that verify this:

angular.js/test/ngSanitize/sanitizeSpec.js

Line 293 in d713ad1

it('should not allow attributes', function() {

I guess we don't need to discuss possible attacks enabled by leaving out those attributes here....

[caitp]

The test case that was added says the changes were suggested by "evn", but there's no link to an issue and I can't find it, so it's hard to say what they're talking about.

I don't think this is really a security issue, it's probably just to prevent you from accidentally including duplicates, which seems a bit silly

[pkozlowski-opensource]

Yeh, 2bbced2 is almost 4 years old... Conventional changelog approach wasn't in place at the time (btw: every time I bump into a commit that doesn't follow conventional changelog I realise how great it is).

[caitp]

Humm, I think avoiding duplicates by default with ngSanitize is probably the right thing to do. Unless someone disagrees, I think this is a good place to use a custom module or just $sce.trustAs() --- if anyone has another opinion they should chime in and reopen.