title: How is concatenating urls in templates in angular less secure than in other locations?
body: <p>I have an angularjs template which looks similar to this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img ng:src="/resources/{{id}}/thumbnail" /&gt;
  </code></pre>
  
  <p>However this results in an <a href="https://docs.angularjs.org/error/$interpolate/noconcat" rel="noreferrer">$interpolate:noconcat error</a>. In contrast to that this template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img ng:src="{{fullUrl}}" /&gt;
  </code></pre>
  
  <p>or even:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img ng:src="{{id|createThumbnailURL}}" /&gt;
  </code></pre>
  
  <p>(where createThumbnailURL is a simple filter which does the same concatination as above) work totally fine.</p>
  
  <p>The documentation says:</p>
  
  <blockquote>
    <p>Concatenating expressions makes it hard to reason about whether some
    combination of concatenated values are unsafe to use and could easily
    lead to XSS.</p>
  </blockquote>
  
  <p>Well yes, a static URL is always easier to assess than a concatenated one, I see the point there. However it does not sound uncommon to me to have REST-APIs that have URLs that can be constructed by simple concatenation and that concatenation has to be done <em>somehwere</em>. I can do it in the controller or even server-side, but <strong>how does that improve anything to move the concatenation elsewhere?</strong> And <strong>what is the recommended way to deal with the problem?</strong></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is demo for the error: <a href="http://cipher-code.de/tmp/angular3/index.xhtml" rel="noreferrer">http://cipher-code.de/tmp/angular3/index.xhtml</a></p>
  
  <p>Maybe it has to do with the page being XML.</p>