XULrunner adding unsafe: before links when using Angular

Question

I'm trying to use a simple Angular page (no xhr except for loading the templates) and so far it's not been easy.

Somehow there are differences in how Firefox would run script/renders html and how XUL would. These differences are undocumented as far as I know since I've been looking for the last hour or so to figure out why a link would have unsafe: before it. Can guess it's because the content is considered unsafe but can't find any documentation for it.

My main html page is inside a XUL browser element with it's type set to content-primary and it's source set to chrome://myapp/content/index.html

Direct links in the main page and in the first loaded template work:

<a href='#/students/JON'>link in the template</a>

I can click on it and it'll load the details template and show the data.

When I let Angular generate the links in a ng-repeat it doesn't work anymore:

<a href="#/students/{{student.name}}">{{student.name}}</a>

The href of this link is changed to: unsafe:chrome://myapp/content/index.html#/students/JON

The following is changed as well:

<a href='#/students/{{"JON"}}'>messed with by angular</a>

This would suggest that JS generated hrefs are considered unsafe yet the following works fine:

  var a=document.createElement("a");
  a.href="#/students/JON";
  a.innerHTML="dynamic added link same url";
  document.body.appendChild(a);

When clicking on that link the details template is loaded and details are displayed.

So my question is: How can I prevent XUL from considering the links as unsafe? They all point to local resources in chrome://myapp/content/ and setting the link as chrome://myapp/content/index.html#/sudents/JON isn't working either (still unsafe).

Another one is: Is there good documentation about XUL rendering things differently and executing JS differently than Firefox? If there is a such a document then it surely contains the unsafe part and probably other things I'm going to run into.

[update] Thanks to Mr Maier I've figured out that it isn't a XUL issue at all. Since before XUL was refusing location.replaceState for chrome content and then was returning status 0 instead of 200 (like in Firefox) I assumed it was XUL related as well. Should have known it was Angular because adding dom elements worked (angular wasn't aware I added them) and links that were not processed by angular worked. To add the chrome:// protocol as trusted I've done the following:

angular.module('student', []).
  config(['$routeProvider','$compileProvider', 
    function($routeProvider,$compileProvider) {
      $compileProvider.urlSanitizationWhitelist(/^\s*(chrome|file):/);

Will remove file later as I'm using it at the moment to open the file from disk in Firefox to see if everything still works

Answer 1

Nothing to do with XUL per-se. This is an AngularJS feature (use), that does not work in chrome: as expected, apparently. You'll have to fix this, e.g. by white-listing the chrome: protocol.

Answer 2

When using bindings in the href attribute of links, you should use ng-href rather than href so the bindings are evaluated. e.g.

<a ng-href="#/students/{{student.name}}">{{student.name}}</a>

instead of

<a href="#/students/{{student.name}}">{{student.name}}</a>

See the angular documentation at http://docs.angularjs.org/api/ng.directive:ngHref