Question

我需要一些帮助来修复ngSanatize; ng-href链接显示error unsafe:javascript...

我没有得到任何解决这个问题的教程，代码如下：

ng-href="javascript:google.maps.event.trigger(gmarkers['{{city.cityname}}']

HTML：

var eventsApp = angular.module('eventsApp', []);
eventsApp.controller('locationController', function($scope) {
  $scope.event = {
    "continents": [{
      "continentName": "Asia",
      "countries": [{
        "countryName": "India",
        "cities": [{
          "cityname": "Mumbai",
          "latLng": [19.139683, 72.881755],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Gate #5, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>"
          ]
        }, {
          "cityname": "Bangalore",
          "latLng": [12.967715, 77.596607],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Plot No 25-31, EPIP 2nd Phase, Industrial Area, Whitefield, Bangalore-560066. India</div>"
          ]
        }, {
          "cityname": "Vadodara",
          "latLng": [22.297864, 73.168966],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>L&T Knowledge City, West Block, NH 8, Ajwa – Waghodia Crossing, Vadodara – 390 019, Gujarat, India</div>"
          ]
        }, {
          "cityname": "Mysore",
          "latLng": [12.306326, 76.629660],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Mysore Complex, KIADB Industrial Area, Hebbal - Hootagalli, Mysore - 570018, India</div>"
          ]
        }, {
          "cityname": "Chennai",
          "latLng": [13.078007, 80.211203],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Ganesh Office Building, New No. 50 (Old No. 130) Velachery Road, Saidapet, Chennai – 600015, India</div>"
          ]
        }]
      }, {
        "countryName": "Japan",
        "cities": [{
          "cityname": "YOKOHAMA",
          "latLng": [35.466913, 139.617877],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>Landmark Tower 37 F 2-2-1, Minatomirai, Nishi-ku, Yokohama,Kanagawa 220-8137</div>"
          ]
        }]
      }, {
        "countryName": "Singapore",
        "cities": [{
          "cityname": "",
          "latLng": [1.296961, 103.846253],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>80 Anson Road, #24-02 Fuji Xerox Towers, Singapore 079907</div>"
          ]
        }]
      }, {
        "countryName": "Korea",
        "cities": [{
          "cityname": "South Korea",
          "latLng": [36.354133, 128.184051],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>#102-604, 6th Floor, Daewoo World Mark Building, YeongTong Dong, YeongTong Gu, Suwon Si, Gyoenggi Do, South Korea</div>"
          ]
        }]
      }]
    }, {
      "continentName": "USA",
      "countries": [{
        "countryName": "",
        "cities": [{
          "cityname": "NEW JERSEY",
          "latLng": [39.575889, -74.906897],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>2035 Lincoln Highway Suite # 3000-3005, Edison Square West, Edison, NJ-08817</div>"
          ]
        }, {
          "cityname": "CONNECTICUT",
          "latLng": [41.646227, -72.870117],
          "pinColor": "#004b88",
          "addresses": [
            "<div class='address'>750 Main Street Suite # 704 Hartford, CT 06103</div>"
          ]
        }]
      }]
    }]
  }
});

<!DOCTYPE html>
<html ng-app="eventsApp">

<head>
  <meta charset="utf-8" />
  <title>Global Presence</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="locationController">
  <div class="container">
    <div class="row">
      <div style="width:100%;">
        <div class="global">Global Presence</div>

        <div id="map" style="width:100%; height:400px;"></div>
        <!--<div id="googleMap" style="width:100%;height:400px;"></div>-->
      </div>
    </div>
    <ul style="width:100%">
      <li><a class="active" href="#asia">Asia</a>
      </li>
      <li><a href="#usa">USA</a>
      </li>
    </ul>

    <div class="container-fluid">
      <div class="row" id="asia">
        <div class="col-sm-12 continents" ng-repeat="continent in event.continents">
          <h2>{{continent.continentName}}</h2>
          <div class="list-group whiteBG">
            <div class="col-md-12 country" ng-repeat="country in continent.countries">
              <h3>{{country.countryName | uppercase}}</h3>
              <!-- <pre>{{country.cities | json}}</pre> -->
              <div class="row">
                <div class="col-md-3 col-xs-6 city" ng-repeat="city in country.cities">
                  <h4>{{city.cityname | uppercase}}</h4>
                  <p ng-repeat="address in city.addresses" ng-bind-html-unsafe="address">{{address}}</p>
                  <a ng-href="javascript:google.maps.event.trigger(gmarkers['{{city.cityname}}'],'click');" style="text-align:left;"><span class="glyphicon glyphicon-map-marker"></span> View on Map</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="usa"></div>
  </div>
</body>

</html>

Answer 1

您可以使用

清理javascript网址

eventsApp.config(function($compileProvider) {   
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|javascript):/);
});

Answer 2

Yo可以使用$sce.trustAsResourceUrl(url);来解决问题

ng-href显示不安全：javascript错误

2 个答案: