Steam:// link not "unsafe"

Question

I'm trying to get Steam's add friends' link to work but for some reason my sanitation isn't working. I'm very new to angular (first app) and so I may be missing something huge/obvious. This is the code I added to my config and my html. I'm using angular 1.1.5. The link to steam below displays as "unsafe" and does not function. The sanitation doesn't seem to be working as intended.

Thanks in advance!

@app.config(['$routeProvider', ($routeProvider) ->
   $routeProvider.
  when('/casters', {
    templateUrl: '../templates/casters/index.html',
        controller: 'CasterIndexCtrl'
      }).
    otherwise({
      templateUrl: '../templates/home.html',
      controller: 'HomeCtrl'
    }) 
], 
['$compileProvider', ($compileProvider) ->
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|steam|mailto|file):/);
])

<tr ng-repeat="caster in casters">
    <td><a ng-href="steam://friends/add/{{caster.steam_id}}"><button type="button" class="butn btn-link">Add</button></a></td>
    <td>{{caster.name}}</td>
    <td><a href="http://twitch.tv/{{caster.twitch}}" target="_blank">{{caster.twitch}}</a></td>
    <td>Column content</td>
  </tr>

Answer 1

You need an href sanitization:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|steam):/);

This is basically appending steam to the regex in santizeUri.js

I believe urlSanitizationWhitelist was changed in version 1.2? I remember having a similar issue getting this to work based on blogs and just dug around in the source until I found the answer. At the time I had the same problem, angular's docs were down, but it looks like they have been updated with this information.

Also, be sure that you're including ngSanitize both as a dependency and referencing the angular-sanitize.js file.

edit: oh I missed you're on 1.1.5. I'll see if I can track it down in that revision.

edit 2: So I created a plunk with just the compile override to allow steam, and this works to launch steam.

Then, I noticed you're passing two config functions to .config (I think, I don't read coffeescript).

Try this:

@app.config(['$routeProvider','$compileProvider', ($routeProvider, $compileProvider) ->
   $routeProvider.
  when('/casters', {
    templateUrl: '../templates/casters/index.html',
        controller: 'CasterIndexCtrl'
      }).
    otherwise({
      templateUrl: '../templates/home.html',
      controller: 'HomeCtrl'
    }) 

    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|steam|mailto|file):/);
])

http://code.angularjs.org/1.1.5/docs/api/angular.Module

The docs for angular 1.1.5 are pretty terrible. They don't really clearly explain the whole array injector thing. This configFn is either a single function or an array of dependencies that are to be injected into the function (last array element).