Questions tagged [angularjs-sce]

Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. One example of such a context is binding arbitrary html controlled by the user via ng-bind-html. We refer to these contexts as privileged or SCE contexts.

As of version 1.2, Angular ships with SCE enabled by default.

Note: When enabled (the default), IE<11 in quirks mode is not supported. In this mode, IE<11 allow one to execute arbitrary javascript by the use of the expression() syntax. Refer to learn more about them. You can ensure your document is in standards mode and not quirks mode by adding to the top of your HTML document.

SCE assists in writing code in way that (a) is secure by default and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.

Here's an example of a binding in a privileged context:

<input ng-model="userHtml" aria-label="User input">
<div ng-bind-html="userHtml"></div>

Notice that ng-bind-html is bound to userHtml controlled by the user. With SCE disabled, this application allows the user to render arbitrary HTML into the DIV. In a more realistic example, one may be rendering user comments, blog articles, etc. via bindings. (HTML is just one example of a context where rendering user controlled input creates security vulnerabilities.)

For the case of HTML, you might use a library, either on the client side, or on the server side, to sanitize unsafe HTML before binding to the value and rendering it in the document.

How would you ensure that every place that used these types of bindings was bound to a value that was sanitized by your library (or returned as safe for rendering by your server?) How can you ensure that you didn't accidentally delete the line that sanitized the value, or renamed some properties/fields and forgot to update the binding to the sanitized value?

To be secure by default, you want to ensure that any such bindings are disallowed unless you can determine that something explicitly says it's safe to use a value for binding in that context. You can then audit your code (a simple grep would do) to ensure that this is only done for those values that you can easily tell are safe - because they were received from your server, sanitized by your library, etc. You can organize your codebase to help with this - perhaps allowing only the files in a specific directory to do this. Ensuring that the internal API exposed by that code doesn't markup arbitrary values as safe then becomes a more manageable task.

In the case of AngularJS' SCE service, one uses $sce.trustAs (and shorthand methods such as $sce.trustAsHtml, etc.) to obtain values that will be accepted by SCE / privileged contexts.

10 questions
13
votes
4 answers

Make a web page with a folder of external files

Previously, I used $sce.trustAsHtml(aString) to inject a string (eg, ...) to a template
to display a graph when loading a generated URL: .state('urls', { url: '/urls/{id}', template: '
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
3
votes
1 answer

Why should we use $sce.trustAsResourceUrl(iframeUrl)?

I am new to AngularJS. I tried binding iframe src with Angular controller. html: controller js: $scope.iframeUrl = function(){ return "http://www.google.co.in"; }; This doesn't…
Sayuj
  • 7,464
  • 13
  • 59
  • 76
2
votes
1 answer

inserting iframe from trusted source in AngularJS

Trying to use ng-bind-html to insert iframe into page with AngularJS & I can't get it to work it on even the simplest form. Javascript function Ctrl($scope) { $scope.showIt = ''; } My HTML:
Amidude
  • 351
  • 2
  • 6
  • 14
0
votes
0 answers

AngularJS issue: $sce:insecurl despite $sce.trustAsResourceUrl

I have a set-up using templates from my CDN, that usually works fine but periodically I get this error: ng-error: Error: [$sce:insecurl]…
MalcolmOcean
  • 2,807
  • 2
  • 29
  • 38
0
votes
0 answers

How to completly disable angular html escape (app wide)?

I have tried this : angular.module('dashboard').config(['$ocLazyLoadProvider', '$httpProvider', '$sceProvider', function($ocLazyLoadProvider, $httpProvider, $sceProvider) { $sceProvider.enabled(false); }]); But nothing seems to…
Geo C.
  • 755
  • 6
  • 18
0
votes
1 answer

Pass html string in controller and put into .html (angular js)

I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with ng-bind-html Still not working, any solution for me ? Thanks This is my code…
userpr
  • 213
  • 1
  • 7
  • 19
0
votes
0 answers

Add a function to html string in link layer of directive

I got this directive which renders a list of objects. this objects got it's own function, i wanna bind it to a button. So i run over my items.In my objects value, i got a prop called Action which value is a function. i then try to add it to the html…
DaCh
  • 921
  • 1
  • 14
  • 48
0
votes
1 answer

angularjs textarea with colors (with html5 contenteditable)

I'm trying to create an editor which does "syntax highlighting", it is rather simple: yellow -> yellow I'm also using html5 tag to replace